基于Android小巫新闻客户端开发---显示新闻详细内容UI设计

2013年2月27日，天气潮湿！！！

距上一次写的主界面业务逻辑实现，已经过来11天，小巫觉得拖得太久了，所以决定尽量把所有的内容介绍完，好完成这个任务，因为小巫已经开学了，将会有更加重的任务等着。在发表前面几章博客之前，小巫已经把项目源代码共享了，这里稍微提一下关于这个项目的部署的问题吧，因为可能在你们的机器上难免会出点问题，小巫之前把整个软件测试调通也花了不少时间，主要是服务端的问题，跟数据库的连接可能会出错，因为在我的机器上安装的MySQL所建立的用户和密码可能不一样，需要在服务端，修改一下连接数据库的配置文件。

这里可能要修改的地方有：端口号、用户名、密码，这需要根据各位童鞋自己配置MySQL的时候为准。

还有一点，是关于编码的问题：这个web项目所使用的编码格式是utf-8,因为MyEclipse默认的编码格式是GBK，这就需要到【Window】->【Preference】->【General】->【Workspace】然后修改encoding为utf-8,这样程序就不会出现乱码问题了。这要MyEclipse配好服务器，把项目部署到Tomcat中，我想应该没问题了。如果出现问题的话，小巫也无法一下子回答，那就要靠你们自己寻找原因吧。

那好回到博客正题！！！---显示新闻详细内容UI界面的设计

效果如下：

  

因为在动手开发小巫新闻客户端是打算为小巫所在的学校开发一个新闻客户端，专门用来显示我们学校的新闻，后来发现实现起来意义不大，后来改了名字，以小巫命名这个新闻客户端，所以这里显示为华广新闻，希望不要介意。

要实现整个界面效果需要3个xml文件：

1.newsdetail_layout.xml,

2.newsbody_layout.xml,

3.news_reply_frame_layout.xml

具体实现需要看看代码：

/newsdetail_layout.xml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- 最外层界面布局是RelativeLayout -->
  3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:id="@id/newsdetail_layout"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:background="@drawable/main_background"
  8. >
  9. <!--
  10. 标题栏用RelativeLayout,包含一个向前查看按钮、向后查看按钮
  11. 一个TextView, 一个跟帖按钮
  12. -->
  13. <RelativeLayout
  14. android:id="@id/newsdetail_titlebar_layout"
  15. android:layout_width="match_parent"
  16. android:layout_height="wrap_content"
  17. android:background="@drawable/image_titlebar_background"
  18. >
  19. <Button
  20. android:id="@id/newsdetail_titlebar_previous"
  21. android:layout_width="wrap_content"
  22. android:layout_height="wrap_content"
  23. android:layout_alignParentLeft="true"
  24. android:layout_marginTop="7.0dip"
  25. android:layout_marginLeft="5.0dip"
  26. android:background="@drawable/newsdetail_titlebar_btn_privious_selector"
  27. />
  28. <Button
  29. android:id="@id/newsdetail_titlebar_next"
  30. android:layout_width="wrap_content"
  31. android:layout_height="wrap_content"
  32. android:layout_alignParentRight="true"
  33. android:layout_marginRight="5.0dip"
  34. android:layout_marginTop="7.0dip"
  35. android:background="@drawable/newsdetail_titlebar_btn_next_selector"
  36. />
  37. <Button
  38. android:id="@id/newsdetail_titlebar_comments"
  39. android:layout_width="wrap_content"
  40. android:layout_height="wrap_content"
  41. android:layout_alignParentRight="true"
  42. android:layout_marginRight="50.0dip"
  43. android:layout_marginTop="10.0dip"
  44. android:text="0跟帖"
  45. android:textColor="@color/white"
  46. android:background="@drawable/newsdetail_titlebar_btn_comments_selector" />
  47. <TextView
  48. android:id="@id/newsdetail_titlebar_title"
  49. android:layout_width="wrap_content"
  50. android:layout_height="wrap_content"
  51. android:layout_alignBaseline="@id/newsdetail_titlebar_previous"
  52. android:layout_marginLeft="20dip"
  53. android:layout_toRightOf="@id/newsdetail_titlebar_previous"
  54. android:text="校内"
  55. android:textColor="@color/white"
  56. android:textSize="18.0sp" />
  57. </RelativeLayout>
  58. <!-- 用于翻页的的ViewFlipper -->
  59. <ViewFlipper
  60. android:id="@id/news_body_flipper"
  61. android:layout_width="match_parent"
  62. android:layout_height="match_parent"
  63. android:layout_below="@id/newsdetail_titlebar_layout"
  64. android:layout_marginBottom="40.0dip" >
  65. </ViewFlipper>
  66. <include
  67. android:id="@id/comment_reply_frame"
  68. android:layout_width="match_parent"
  69. android:layout_height="wrap_content"
  70. android:layout_alignParentBottom="true"
  71. layout="@layout/news_reply_frame_layout" />
  72. </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<!-- 最外层界面布局是RelativeLayout -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@id/newsdetail_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/main_background"><!--标题栏用RelativeLayout,包含一个向前查看按钮、向后查看按钮一个TextView, 一个跟帖按钮--><RelativeLayout android:id="@id/newsdetail_titlebar_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/image_titlebar_background"><Button android:id="@id/newsdetail_titlebar_previous"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_marginTop="7.0dip"android:layout_marginLeft="5.0dip"android:background="@drawable/newsdetail_titlebar_btn_privious_selector"/><Buttonandroid:id="@id/newsdetail_titlebar_next"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_marginRight="5.0dip"android:layout_marginTop="7.0dip"android:background="@drawable/newsdetail_titlebar_btn_next_selector"/><Buttonandroid:id="@id/newsdetail_titlebar_comments"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_marginRight="50.0dip"android:layout_marginTop="10.0dip"android:text="0跟帖"android:textColor="@color/white"android:background="@drawable/newsdetail_titlebar_btn_comments_selector" /><TextViewandroid:id="@id/newsdetail_titlebar_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignBaseline="@id/newsdetail_titlebar_previous"android:layout_marginLeft="20dip"android:layout_toRightOf="@id/newsdetail_titlebar_previous"android:text="校内"android:textColor="@color/white"android:textSize="18.0sp" /></RelativeLayout><!-- 用于翻页的的ViewFlipper --><ViewFlipperandroid:id="@id/news_body_flipper"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/newsdetail_titlebar_layout"android:layout_marginBottom="40.0dip" ></ViewFlipper><includeandroid:id="@id/comment_reply_frame"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"layout="@layout/news_reply_frame_layout" /></RelativeLayout>

这个布局文件用到了<include>标签，它的作用是将另一个布局文件包含进来，这样可以实现代码的复用，因为下面的回复栏，在查看评论的界面也需要用到。这是这段代码需要注意的地方，其他的就不多说了。

/newsbody_layout.xml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:wwj="http://schemas.android.com/apk/res/com.xiaowu.news"
  4. android:id="@id/news_body_layout"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:orientation="vertical" >
  8. <!-- android:fadingEdge="none"的作用解析
  9. 设置拉滚动条时 ，边框渐变的放向。none（边框颜色不变）
  10. ，horizontal（水平方向颜色变淡），vertical（垂直方向颜色变淡） -->
  11. <ScrollView
  12. android:id="@id/news_body_scrollview"
  13. android:layout_width="match_parent"
  14. android:layout_height="match_parent"
  15. android:background="#FFE7E7E7"
  16. android:fadingEdge="none"
  17. >
  18. <LinearLayout
  19. android:layout_width="match_parent"
  20. android:layout_height="wrap_content"
  21. android:orientation="vertical"
  22. >
  23. <LinearLayout
  24. android:layout_width="match_parent"
  25. android:layout_height="wrap_content"
  26. android:orientation="vertical"
  27. >
  28. <TextView
  29. android:id="@id/news_body_title"
  30. android:layout_width="match_parent"
  31. android:layout_height="wrap_content"
  32. android:layout_marginLeft="12.0dip"
  33. android:layout_marginTop="12.0dip"
  34. android:textColor="#FF272727"
  35. android:textSize="18.0sp"
  36. android:textStyle="bold"
  37. />
  38. <TextView
  39. android:id="@id/news_body_ptime_source"
  40. android:layout_width="match_parent"
  41. android:layout_height="wrap_content"
  42. android:layout_marginLeft="12.0dip"
  43. android:layout_marginRight="12.0dip"
  44. android:layout_marginTop="9.0dip"
  45. android:textColor="#FF888888"
  46. android:textSize="12.0sp"
  47. />
  48. <ImageView
  49. android:layout_width="match_parent"
  50. android:layout_height="wrap_content"
  51. android:layout_marginTop="8.0dip"
  52. android:src="@drawable/image_widget_hot_list_separator_line"
  53. />
  54. <ProgressBar
  55. android:id="@id/news_body_detail_loding"
  56. style="?android:attr/progressBarStyleLarge"
  57. android:layout_width="16.0dip"
  58. android:layout_height="16.0dip"
  59. android:layout_marginLeft="152.0dip"
  60. android:layout_marginTop="10.0dip"
  61. android:clickable="false"
  62. android:visibility="gone"
  63. />
  64. </LinearLayout>
  65. <com.xiaowu.news.ConstomTextView
  66. android:id="@id/news_body_details"
  67. android:layout_width="match_parent"
  68. android:layout_height="wrap_content"
  69. android:layout_marginTop="5.0dip"
  70. android:textColor="#ff000000"
  71. wwj:image_width="200dip"
  72. wwj:image_height="52dip"/>
  73. </LinearLayout>
  74. </ScrollView>
  75. </LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:wwj="http://schemas.android.com/apk/res/com.xiaowu.news"android:id="@id/news_body_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><!-- android:fadingEdge="none"的作用解析设置拉滚动条时 ，边框渐变的放向。none（边框颜色不变），horizontal（水平方向颜色变淡），vertical（垂直方向颜色变淡） --><ScrollView android:id="@id/news_body_scrollview"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFE7E7E7"android:fadingEdge="none"><LinearLayout android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextView android:id="@id/news_body_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="12.0dip"android:layout_marginTop="12.0dip"android:textColor="#FF272727"android:textSize="18.0sp"android:textStyle="bold"/><TextView android:id="@id/news_body_ptime_source"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="12.0dip"android:layout_marginRight="12.0dip"android:layout_marginTop="9.0dip"android:textColor="#FF888888"android:textSize="12.0sp"/><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="8.0dip"android:src="@drawable/image_widget_hot_list_separator_line" /><ProgressBar android:id="@id/news_body_detail_loding"style="?android:attr/progressBarStyleLarge"android:layout_width="16.0dip"android:layout_height="16.0dip"android:layout_marginLeft="152.0dip"android:layout_marginTop="10.0dip"android:clickable="false"android:visibility="gone"/></LinearLayout><com.xiaowu.news.ConstomTextViewandroid:id="@id/news_body_details"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5.0dip"android:textColor="#ff000000" wwj:image_width="200dip"wwj:image_height="52dip"/></LinearLayout></ScrollView></LinearLayout>

这段代码只有一个需要特别注意的，因为这是在这个项目后期才添加上的内容：自定义TextView和异步更新加载图片，这跟之前有所差别，因为这里包含了一个自定义的组件，ConstomTextView，上面代码已经写的很清楚了。如果有点不明白的话，来看小巫之前所发表的一篇文章，希望有所帮助：http://blog.csdn.net/wwj_748/article/details/8195975

/news_reply_frame_layout.xml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@id/news_reply_layout"
  4. android:layout_width="match_parent"
  5. android:layout_height="wrap_content"
  6. android:layout_gravity="bottom"
  7. android:background="@drawable/image_toolbar_background"
  8. android:orientation="horizontal"
  9. android:visibility="visible"
  10. >
  11. <LinearLayout
  12. android:id="@id/news_reply_edit_layout"
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content"
  15. android:layout_gravity="center"
  16. android:orientation="horizontal"
  17. android:visibility="gone"
  18. >
  19. <EditText
  20. android:id="@id/news_reply_edittext"
  21. android:layout_width="260.0dip"
  22. android:layout_height="wrap_content"
  23. android:layout_marginTop="2.0dip"
  24. android:hint="@string/et_reply"
  25. android:maxLength="500" />
  26. <Button
  27. android:id="@id/news_reply_post"
  28. android:layout_width="58.0dip"
  29. android:layout_height="42.0dip"
  30. android:text="@string/reply_post"
  31. android:textColor="@color/white"
  32. android:background="@drawable/btn_send_reply_selector"/>
  33. </LinearLayout>
  34. <LinearLayout
  35. android:id="@id/news_reply_img_layout"
  36. android:layout_width="wrap_content"
  37. android:layout_height="wrap_content"
  38. android:layout_marginLeft="5.0dip"
  39. android:layout_marginTop="3.0dip"
  40. android:gravity="center"
  41. android:orientation="horizontal"
  42. android:visibility="visible">
  43. <ImageButton
  44. android:id="@id/news_reply_img_btn"
  45. android:layout_width="wrap_content"
  46. android:layout_height="wrap_content"
  47. android:layout_marginLeft="20.0dip"
  48. android:layout_weight="1.60"
  49. android:background="#00000000"
  50. android:src="@drawable/news_reply_img_btn_background" />
  51. <ImageButton
  52. android:id="@id/news_share_btn"
  53. android:layout_width="wrap_content"
  54. android:layout_height="wrap_content"
  55. android:layout_marginLeft="10.0dip"
  56. android:background="#00000000"
  57. android:src="@drawable/newsdetail_toolbar_btn_share_selector" />
  58. <ImageButton
  59. android:id="@id/news_favorites_btn"
  60. android:layout_width="wrap_content"
  61. android:layout_height="wrap_content"
  62. android:layout_marginLeft="10.0dip"
  63. android:background="#00000000"
  64. android:src="@drawable/newsdetail_toolbar_favorites_selector" />
  65. </LinearLayout>
  66. </LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@id/news_reply_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:background="@drawable/image_toolbar_background"android:orientation="horizontal"android:visibility="visible" ><LinearLayout android:id="@id/news_reply_edit_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:orientation="horizontal"android:visibility="gone"><EditTextandroid:id="@id/news_reply_edittext"android:layout_width="260.0dip"android:layout_height="wrap_content"android:layout_marginTop="2.0dip"android:hint="@string/et_reply"android:maxLength="500" /><Buttonandroid:id="@id/news_reply_post"android:layout_width="58.0dip"android:layout_height="42.0dip"android:text="@string/reply_post" android:textColor="@color/white"android:background="@drawable/btn_send_reply_selector"/></LinearLayout><LinearLayoutandroid:id="@id/news_reply_img_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="5.0dip"android:layout_marginTop="3.0dip"android:gravity="center"android:orientation="horizontal" android:visibility="visible"><ImageButtonandroid:id="@id/news_reply_img_btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20.0dip"android:layout_weight="1.60"android:background="#00000000"android:src="@drawable/news_reply_img_btn_background" /><ImageButtonandroid:id="@id/news_share_btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10.0dip"android:background="#00000000"android:src="@drawable/newsdetail_toolbar_btn_share_selector" /><ImageButtonandroid:id="@id/news_favorites_btn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10.0dip"android:background="#00000000"android:src="@drawable/newsdetail_toolbar_favorites_selector" /></LinearLayout>
</LinearLayout>

这个布局，没有什么难点，在这里小巫也不过多浪费口舌。

总之一句，试过就知道了，如果觉得整个项目有难度，并不适合初学者，各位童鞋可以择重学习。



android小项目之新闻客户端四相关推荐

  1. Android小项目————聊天室（UI篇）

    Android小项目----聊天室(UI篇) 一.前言 这是所做的第二个android项目,主要目的对暑假所学的java和android知识点进行复习巩固和实践,由于知识所限,目前这个聊天室并不是很完 ...

  2. Android 小项目之--数据存储【Files】（附源码）

    继上篇数据存储,现在我们来讲讲另外一种数据存储,Files.本篇讲述步骤如下: 1.温故而知新,复习四种数据存储的区别. 2.什么是 Files 数据存储. 3.什么是 Properties ? 4. ...

  3. Android小项目———— 冰炭不投de小计算器

    我的第一个Android小项目 冰炭不投de小计算器 一.前言 这是我首个使用java写的app,也在学习郭霖老师的第一行代码和李刚老师的疯狂java讲义之时,进行的练习之作,刚刚学习java和and ...

  4. Android小项目——简易备忘录

    Android小项目--简易备忘录的实现 简易备忘录主要实现功能类似手机默认备忘录,可以对备忘录目录进行增添和删除.在编辑页面,可以显示当前时间,编辑备忘录标题,备忘录内容,设置时间提醒,插入图片等 ...

  5. linux 蓝牙 手机遥控器,嵌入式Android小项目之万能手机遥控器详解

    原标题:嵌入式Android小项目之万能手机遥控器详解 在很久很久以前,手机是有红外功能的,后来随着蓝牙技术的成熟,红外逐渐被蓝牙取代,不再是标配了. 红外本身还是有些优点,比如操作简便,成本低.要想 ...

  6. Android高仿网易新闻客户端之动态添加标签

    承接上一篇文章:Android高仿网易新闻客户端之首页,今天来实现动态添加标签效果. 动态标签页是一个流式布局,实现了宽度自动换行高度自动分配的功能,代码如下: FlowLayout.java pac ...

  7. 一个特别适合新手练习的Android小项目——每日一妹纸

    原文链接 http://sparkyuan.me/ 转载请注明出处 介绍 当前版本V 1.2 刚开始学习Android的时候,主要就是学习了一些Activity的生命周期,各种View和Layout的 ...

  8. Android小项目——新闻APP

    前言: 在公司学习了一段时间Android知识,决定做一个小项目,目的是学会运用所学的基础知识,在这里记录一下开发历程,大家可以把它看成一款入门级练手的 Demo 应用吧~ 项目概述: 类型: 新闻A ...

  9. Android高仿网易新闻客户端之首页

    关于实现网易新闻客户端的界面,以前写过很多博客,请参考: Android实现网易新闻客户端效果 Android实现网易新闻客户端侧滑菜单(一) Android实现网易新闻客户端侧滑菜单(二) 今天用V ...

最新文章

  1. Java必会的工具库，让你的代码量减少90%
  2. YUV2RGB c++ python
  3. 网络编程学习笔记(socketpair函数)
  4. 分享：wkhtmltoimage开源工具的基本应用
  5. 2014计算机二级vfp,2014计算机二级VF考前试题解析
  6. linux c 文件拷贝函数,Linux C函数库参考手册
  7. html图片编辑器插件,js图片编辑器插件Filerobot
  8. P3254 圆桌问题
  9. Asp.Net Ajax 之 取消异步PostBack（ 一 ）
  10. 缩时摄影制作软件——GlueMotion for Mac支持m1
  11. Cisco Packet Tracer 思科交换机模拟器常见命令
  12. Matlab绘制运动想象ERD/ERS分析法图像
  13. 计算机自动关机启机唤醒设置,电脑在哪设置定时关机(如何设置电脑的自动关机和自动开机)...
  14. DeepMind黄士杰：深度学习有创造性，正参与星际2项目
  15. rand、randn和randi的区别
  16. 注册一家互联网公司基本流程
  17. TCP连接的四次挥手全过程
  18. YT8511H的原理图设计
  19. 如何写一个高逼格 README
  20. matlab中nargin用法

热门文章

  1. 网络抓包wireshark---转载
  2. tensorflow学习笔记（1）------北京大学 曹健
  3. 手写Spring-第十三章-超进化！用注解完成Bean的注册
  4. oracle EBS查进程,UNIX/LINUX 上针对Oracle EBS 11i的运行的所有进程状态的查询方法:
  5. 超高频抗金属RFID电子标签应用分析
  6. 【教程】如何在txt文本中提取重复和不重复的手机号码，两个文件两组号码两批手机号对比重复不重复，一键复制和导出
  7. 多频多模BDS/GNSS精密定位数据处理综述
  8. 数据库原理概论第一章思维导图
  9. Hit the Lottery
  10. uni-app黑马优购项目学习记录（下）