android小项目之新闻客户端四分析

访客 阅读:173 2021-03-31 23:34:00 评论:0


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

  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.   
  67.     <include  
  68.         android:id="@id/comment_reply_frame"  
  69.         android:layout_width="match_parent"  
  70.         android:layout_height="wrap_content"  
  71.         android:layout_alignParentBottom="true"  
  72.         layout="@layout/news_reply_frame_layout" />  
  73.   
  74. </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" 
            /> 
        <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 --> 
	  <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

  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.               
  24.             <LinearLayout  
  25.                 android:layout_width="match_parent"  
  26.                 android:layout_height="wrap_content"  
  27.                 android:orientation="vertical"  
  28.                 >  
  29.                 <TextView   
  30.                     android:id="@id/news_body_title"  
  31.                     android:layout_width="match_parent"  
  32.                     android:layout_height="wrap_content"  
  33.                     android:layout_marginLeft="12.0dip"  
  34.                     android:layout_marginTop="12.0dip"  
  35.                     android:textColor="#FF272727"  
  36.                     android:textSize="18.0sp"  
  37.                     android:textStyle="bold"  
  38.                     />  
  39.                 <TextView   
  40.                     android:id="@id/news_body_ptime_source"  
  41.                     android:layout_width="match_parent"  
  42.                     android:layout_height="wrap_content"  
  43.                     android:layout_marginLeft="12.0dip"  
  44.                     android:layout_marginRight="12.0dip"  
  45.                     android:layout_marginTop="9.0dip"  
  46.                     android:textColor="#FF888888"  
  47.                     android:textSize="12.0sp"  
  48.                     />  
  49.                 <ImageView  
  50.                     android:layout_width="match_parent"  
  51.                     android:layout_height="wrap_content"  
  52.                     android:layout_marginTop="8.0dip"  
  53.                     android:src="@drawable/image_widget_hot_list_separator_line"   
  54.                     />  
  55.                 <ProgressBar   
  56.                     android:id="@id/news_body_detail_loding"  
  57.                     style="?android:attr/progressBarStyleLarge"  
  58.                     android:layout_width="16.0dip"  
  59.                     android:layout_height="16.0dip"  
  60.                     android:layout_marginLeft="152.0dip"  
  61.                     android:layout_marginTop="10.0dip"  
  62.                     android:clickable="false"  
  63.                     android:visibility="gone"  
  64.                     />  
  65.   
  66.             </LinearLayout>  
  67.             <com.xiaowu.news.ConstomTextView  
  68.                 android:id="@id/news_body_details"  
  69.                 android:layout_width="match_parent"  
  70.                 android:layout_height="wrap_content"  
  71.                 android:layout_marginTop="5.0dip"  
  72.                 android:textColor="#ff000000"   
  73.                 wwj:image_width="200dip"  
  74.                 wwj:image_height="52dip"/>  
  75.   
  76.         </LinearLayout>  
  77.           
  78.     </ScrollView>  
  79.   
  80. </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" 
            > 
             
            <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

/news_reply_frame_layout.xml

  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.   
  27.         <Button  
  28.             android:id="@id/news_reply_post"  
  29.             android:layout_width="58.0dip"  
  30.             android:layout_height="42.0dip"  
  31.             android:text="@string/reply_post"   
  32.             android:textColor="@color/white"  
  33.             android:background="@drawable/btn_send_reply_selector"/>  
  34.     </LinearLayout>  
  35.     <LinearLayout  
  36.         android:id="@id/news_reply_img_layout"  
  37.         android:layout_width="wrap_content"  
  38.         android:layout_height="wrap_content"  
  39.         android:layout_marginLeft="5.0dip"  
  40.         android:layout_marginTop="3.0dip"  
  41.         android:gravity="center"  
  42.         android:orientation="horizontal"   
  43.         android:visibility="visible">  
  44.   
  45.         <ImageButton  
  46.             android:id="@id/news_reply_img_btn"  
  47.             android:layout_width="wrap_content"  
  48.             android:layout_height="wrap_content"  
  49.             android:layout_marginLeft="20.0dip"  
  50.             android:layout_weight="1.60"  
  51.             android:background="#00000000"  
  52.             android:src="@drawable/news_reply_img_btn_background" />  
  53.         <ImageButton  
  54.             android:id="@id/news_share_btn"  
  55.             android:layout_width="wrap_content"  
  56.             android:layout_height="wrap_content"  
  57.             android:layout_marginLeft="10.0dip"  
  58.             android:background="#00000000"  
  59.             android:src="@drawable/newsdetail_toolbar_btn_share_selector" />  
  60.         <ImageButton  
  61.             android:id="@id/news_favorites_btn"  
  62.             android:layout_width="wrap_content"  
  63.             android:layout_height="wrap_content"  
  64.             android:layout_marginLeft="10.0dip"  
  65.             android:background="#00000000"  
  66.             android:src="@drawable/newsdetail_toolbar_favorites_selector" />  
  67.     </LinearLayout>  
  68. </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>


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

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


声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号