android小项目之新闻客户端四

柔情只为你懂 2023-10-16 19:29 39阅读 0赞

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

##  2013年2月27日，天气潮湿！！！   距上一次写的主界面业务逻辑实现，已经过来11天，小巫觉得拖得太久了，所以决定尽量把所有的内容介绍完，好完成这个任务，因为小巫已经开学了，将会有更加重的任务等着。在发表前面几章博客之前，小巫已经把项目源代码共享了，这里稍微提一下关于这个项目的部署的问题吧，因为可能在你们的机器上难免会出点问题，小巫之前把整个软件测试调通也花了不少时间，主要是服务端的问题，跟数据库的连接可能会出错，因为在我的机器上安装的MySQL所建立的用户和密码可能不一样，需要在服务端，修改一下连接数据库的配置文件。  ![1361966790_3485.png][]  这里可能要修改的地方有：端口号、用户名、密码，这需要根据各位童鞋自己配置MySQL的时候为准。  还有一点，是关于编码的问题：这个web项目所使用的编码格式是utf-8,因为MyEclipse默认的编码格式是GBK，这就需要到【Window】->【Preference】->【General】->【Workspace】然后修改encoding为utf-8,这样程序就不会出现乱码问题了。这要MyEclipse配好服务器，把项目部署到Tomcat中，我想应该没问题了。如果出现问题的话，小巫也无法一下子回答，那就要靠你们自己寻找原因吧。  那好回到博客正题！！！---显示新闻详细内容UI界面的设计  效果如下：  ![1361967688_8621.png][] ![1361967697_7527.png][]  因为在动手开发小巫新闻客户端是打算为小巫所在的学校开发一个新闻客户端，专门用来显示我们学校的新闻，后来发现实现起来意义不大，后来改了名字，以小巫命名这个新闻客户端，所以这里显示为华广新闻，希望不要介意。  要实现整个界面效果需要3个xml文件：  1.newsdetail\_layout.xml,  2.newsbody\_layout.xml,  3.news\_reply\_frame\_layout.xml  具体实现需要看看代码：  /newsdetail\_layout.xml  **\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]  <?xml version="1.0" encoding="utf-8"?>    <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  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"  />  <Button  android: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"  />  <Button  android: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" />  <TextView  android: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  android: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>  <include  android: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>  `<?xml version="1.0" encoding="utf-8"?>  <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 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" /> <Button android: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" /> <Button android: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" /> <TextView android: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 android: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> <include android: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 plain][view plain] [copy][view plain] [print][view plain] [?][view plain]  <?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" >    <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"  >  <LinearLayout  android: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"  />  <ImageView  android: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.ConstomTextView  android: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>  `<?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" >  <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" > <LinearLayout android: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" /> <ImageView android: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.ConstomTextView android: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][http_blog.csdn.net_wwj_748_article_details_8195975]  /news\_reply\_frame\_layout.xml  **\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]  <?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"  >  <EditText  android: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" />  <Button  android: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>  <LinearLayout  android: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">  <ImageButton  android: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" />  <ImageButton  android: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" />  <ImageButton  android: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>  `<?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" > <EditText android: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" /> <Button android: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> <LinearLayout android: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"> <ImageButton android: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" /> <ImageButton android: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" /> <ImageButton android: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>`     这个布局，没有什么难点，在这里小巫也不过多浪费口舌。  总之一句，试过就知道了，如果觉得整个项目有难度，并不适合初学者，各位童鞋可以择重学习。 ##

[1361966790_3485.png]: https://img-my.csdn.net/uploads/201302/27/1361966790_3485.png
[1361967688_8621.png]: https://img-my.csdn.net/uploads/201302/27/1361967688_8621.png
[1361967697_7527.png]: https://img-my.csdn.net/uploads/201302/27/1361967697_7527.png
[view plain]: http://blog.csdn.net/wwj_748/article/details/8619107#
[http_blog.csdn.net_wwj_748_article_details_8195975]: http://blog.csdn.net/wwj_748/article/details/8195975