基于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>

这个布局文件用到了<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>

这段代码只有一个需要特别注意的，因为这是在这个项目后期才添加上的内容：自定义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>

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

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

原：http://blog.csdn.net/wwj_748/article/details/8619107

Android新闻客户端开发3－－显示新闻详细内容UI设计相关推荐

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

    基于Android小巫新闻客户端开发---显示新闻详细内容UI设计 2013年2月27日,天气潮湿!!! 距上一次写的主界面业务逻辑实现,已经过来11天,小巫觉得拖得太久了,所以决定尽量把所有的内容介 ...

  2. Android应用开发-小巫CSDN博客客户端之显示博文详细内容

    Android应用开发-小巫CSDN博客客户端之显示博文详细内容 上篇博文给大家介绍的是如何嵌入有米广告并且获取收益,本篇博客打算讲讲关于如何在一个ListView里显示博文的详细信息,这个可能是童鞋 ...

  3. 基于Android的小巫新闻客户端开发--UI设计（主界面）

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 基于An ...

  4. 开篇--基于Android的小巫新闻客户端开发

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 开篇-- ...

  5. 基于安卓的新闻客户端开发

     研究背景 当前市面上移动新闻客户端,包括网易移动新闻客户端,搜狐移动新闻客户端,凤凰移动新闻客户端等.这些客户端界面绚丽,版面较多,操作过程较为复杂.为简化流程,操作简单,方便用户使用和下载.所以, ...

  6. Android简易新闻客户端自动升级 简易新闻（二十）

    Android简易新闻客户端自动升级 简易新闻(二十) 关于 说明 第一步,添加引用 第二步,注册蒲公英账号 第三步,添加AndroidManifest.xml配置 初始化 最后一步 打包上传 关于 ...

  7. Android:Socket客户端开发，Android 的Socket客户端优化，Android非UI线程修改控件程序崩溃的问题

    一.Android:Socket客户端开发 创建一个工程 我们要做的是按下按键之后,去往服务器 (服务器) 或者我们自己写的服务器 ,给他发送一些预定好的东西 然后打开操作界面 然后修改一下 你要发送 ...

  8. 浅谈android手机客户端开发

    广州手机app客户端开发公司[启汇网络]企业开始注重Android手机客户端开发,源于android手机市场的庞大. 从android手机数量上看,三星无疑是推出 Android 移动设备最多的公司, ...

  9. 指令汇B新闻客户端开发（四） 自动轮播条

    在这个新闻客户端,我们可以看到有一个轮播页面,在这个项目中,用Handler和一个定时器来做更容易一些, 我们定义一个Handler: private Handler mHandler; 定时器的代码 ...

最新文章

  1. 快学Scala 第二课 （apply, if表达式，循环，函数的带名参数，可变长参数，异常）...
  2. Unitest框架的使用(一)准备工作，接口定义和Unittest方法
  3. 【求救】如何调用Windows系统自带的“选择用户”、“选择组”的对话框？
  4. Julia之初体验（一）下载与安装
  5. 斐讯E1刷K2版老毛子Padavan，完美实现中继教程
  6. 国外服务器网站打开速度慢,使用国外服务器时访问为什么很慢？
  7. Connection接口
  8. 外贸企业oa移动办公管理系统
  9. Msbuild的工具集版本
  10. 浅析能源物联网技术在校园能耗监测系统中的应用与研究
  11. 数据库常见面试题 —— 7.事务的四种特性
  12. JT/T1078-车辆终端模拟器
  13. 输入一行字符统计英文字母，空格，数字和其他字符的个数
  14. 使用while 循环1234568910
  15. html js涨幅率怎么计算,JS加速线指标的计算公式及买卖分析
  16. Qt控件样式 Style Sheet Demo
  17. 不要再这么傻，OK?
  18. 微信小程序——按时间逆序排序
  19. 超分辨latex论文写作图片排版
  20. 【达梦数据库】VMware虚拟机 + CentOS7环境配置 + DM8 数据库安装流程

热门文章

  1. fMRI基础理论知识学习
  2. oracle drop column 多个,3000W记录，alter table drop column很慢
  3. GaussDB200与postgresql相关性
  4. 汽车为什么会“跑”： 图解汽车构造与原理 陈新亚编著
  5. android canvas光晕绘制_android用canvas绘制两种波纹效果
  6. 字符设备编程（四）之可爱的 misc
  7. bugku域名解析记录
  8. Android---flipper实现图片轮播
  9. 【Python运行报错】yaml.parser.ParserError: while parsing a block collection
  10. python实现两个excel数据匹配，最终写入新的excel文件