## Android應用開發-小巫CSDN博客客戶端UI篇 上一篇是給童鞋們介紹整個項目的概況，從這篇博文開始，后續也會詳細介紹整個客戶端的開發，但不會貼很多代碼，我會貼核心代碼然后提供實現思路，想看里面更詳細的代碼的可以到我的資源頁下載源碼進行查看，之前上傳到github的少了些jar包，所以我在csdn下載頻道也上傳了一份，地址：[http://download.csdn.net/detail/wwj_748/7912513](http://download.csdn.net/detail/wwj_748/7912513)。 整個客戶端的開始，自然是需要搭建一個承載我們數據的框架，我這里所說的是UI框架，我們需要事先設計好如何展示我們的內容，有哪些頁面，每個頁面之間的跳轉是怎樣的，我們把這些想好之后就可以進行UI界面的設計和實現了。Android中提供了兩種實現布局的方法，**一種是XML，一種是以代碼**，前者實現比較容易實現，只需要開發者知道如何布局控件就行，后者需要開發者有較好的靈活性和邏輯。如果不是實現動態布局的話，我們一般會以XML的形式實現布局。 小巫的這個客戶端界面不算復雜，界面也算比較簡潔。  **（圖1-啟動頁）**  **（圖2-博文列表）**  **（圖3-側邊欄）** **** **（圖4-博文詳細內容）** **** **（圖5-博文評論列表）** 以上給大家展示的是小巫CSDN博客客戶端的主要界面效果，下面來講解如何布局這樣的界面： ### 啟動界面布局 /BlogClient/res/layout/splash.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/splash" > </RelativeLayout> ~~~ 說明：啟動界面就只是簡單一個布局，設置背景圖片即可。 ### 主布局－頁面切換 /BlogClient/res/layout/main_tab.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/wangyibg2" android:orientation="vertical" > <!-- 包含頭部 --> <include layout="@layout/main_head" /> <!-- 頁面指示器 --> <com.viewpagerindicator.TabPageIndicator android:id="@+id/indicator" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/transparentblue" /> <!-- 頁面切換器 --> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> ~~~ 說明：這里用到了include標簽，這個標簽是用來包含布局模塊的，可以減少代碼冗余，其他界面想使用同樣的布局的時候就不用重復寫代碼了，可讀性也比較好。TabPageIndicator是自定義控件，項目中需要引入viewPagerlibrary這個庫，它是與ViewPager配套使用，可以實現標簽指示，可以實現標簽切換頁面和滑動切換頁面，比較實用的一個組合。 /BlogClient/res/layout/main_head.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/light_blue" android:orientation="horizontal" > <!-- 自定義控件圓形ImageView --> <com.xiaowu.blogclient.view.CircleImageView android:id="@+id/head_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="8dp" android:layout_marginRight="4dp" android:src="@drawable/xiaowu" /> <!-- 分割線 --> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:src="@drawable/base_action_bar_back_divider" /> <!-- 頭部文本 --> <TextView android:id="@+id/headTV" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="4dp" android:layout_weight="1" android:text="小巫CSDN博客" android:textColor="@color/white" android:textSize="21sp" android:textStyle="bold" > </TextView> <ImageButton android:id="@+id/personCenter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:background="@drawable/base_action_bar_action_more_selector" android:visibility="invisible" /> </LinearLayout> ~~~ 說明：頭部的布局沒啥可說的，就只是用到了一個圓形的imageView，也是自定義控件的使用。 ### 側邊欄布局 /BlogClient/res/layout/person_center.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/wangyibg" > <ImageView android:id="@+id/background_img" android:layout_width="match_parent" android:layout_height="300dp" android:layout_marginTop="-100dp" android:contentDescription="@null" android:scaleType="fitXY" android:src="@drawable/scrollview_header" /> <com.xiaowu.blogclient.view.PullScrollView android:id="@+id/scroll_view" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true" app:headerHeight="300dp" app:headerVisibleHeight="100dp" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/transparent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:layout_marginTop="5dp" android:orientation="vertical" > <com.xiaowu.blogclient.view.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/profile_image" android:layout_width="96dp" android:layout_height="96dp" android:layout_gravity="center_horizontal" android:src="@drawable/wwj_748" app:border_color="#FFffffff" app:border_width="1dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="4dp" android:text="IT_xiao小巫" android:textColor="@color/white" android:textSize="18sp" android:textStyle="bold" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="4dp" android:background="@color/transparent" android:src="@drawable/ico_expert" /> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/biz_pc_account_line" android:visibility="invisible" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:text="勛章:" android:textColor="@color/black" android:textSize="16sp" /> <com.xiaowu.blogclient.view.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:background="@null" android:src="@drawable/columnstar_s" app:border_color="#FFffffff" app:border_width="1dp" /> <com.xiaowu.blogclient.view.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:background="@null" android:src="@drawable/holdon_s" app:border_color="#FFffffff" app:border_width="1dp" /> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center_horizontal" android:orientation="vertical" > <TextView android:id="@+id/tv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="訪問：656748次" android:textColor="@color/black" android:textSize="16sp" /> <TextView android:id="@+id/tv2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/tv1" android:layout_below="@+id/tv1" android:gravity="left" android:text="積分：12296分" android:textColor="@color/black" android:textSize="16sp" /> <TextView android:id="@+id/tv3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/tv2" android:layout_below="@+id/tv2" android:text="排名：第281名" android:textColor="@color/black" android:textSize="16sp" /> </RelativeLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:src="@drawable/biz_pc_account_line" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center_horizontal" android:orientation="vertical" > <TextView android:id="@+id/tv4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="原創：526篇" android:textColor="@color/black" android:textSize="16sp" /> <TextView android:id="@+id/tv5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_toRightOf="@+id/tv4" android:gravity="left" android:text="轉載：81篇" android:textColor="@color/black" android:textSize="16sp" /> <TextView android:id="@+id/tv6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/tv4" android:layout_below="@+id/tv4" android:text="譯文：2篇" android:textColor="@color/black" android:textSize="16sp" /> <TextView android:id="@+id/tv7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/tv5" android:layout_marginLeft="5dp" android:layout_toRightOf="@+id/tv6" android:text="評論：956條" android:textColor="@color/black" android:textSize="16sp" /> </RelativeLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:src="@drawable/biz_pc_account_line" /> <RelativeLayout android:id="@+id/checkUpdateView" android:layout_width="match_parent" android:layout_height="40dp" android:background="@drawable/list_selector" > <TextView android:id="@+id/tv8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginLeft="20dp" android:text="檢查更新" android:textColor="@color/black" android:textSize="18sp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="5dp" android:focusable="false" android:src="@drawable/app_recommend_arrow" /> </RelativeLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/biz_pc_account_line" /> <RelativeLayout android:id="@+id/shareView" android:layout_width="match_parent" android:layout_height="40dp" android:background="@drawable/list_selector" > <TextView android:id="@+id/tv9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginLeft="20dp" android:text="分享好友" android:textColor="@color/black" android:textSize="18sp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="5dp" android:focusable="false" android:src="@drawable/app_recommend_arrow" /> </RelativeLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/biz_pc_account_line" /> <RelativeLayout android:id="@+id/aboutView" android:layout_width="match_parent" android:layout_height="40dp" android:background="@drawable/list_selector" > <TextView android:id="@+id/tv10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginLeft="20dp" android:text="關于" android:textColor="@color/black" android:textSize="18sp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="5dp" android:focusable="false" android:src="@drawable/app_recommend_arrow" /> </RelativeLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/biz_pc_account_line" /> <Button android:id="@+id/showSpot" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/list_selector" android:text="展示插播廣告" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/biz_pc_account_line" /> <RelativeLayout android:id="@+id/adLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" > </RelativeLayout> </LinearLayout> </com.xiaowu.blogclient.view.PullScrollView> </RelativeLayout> ~~~ 說明：側邊欄使用的是SlidingMenu——側滑菜單，也是需要包含這個庫。這里要提一下的是，使用到了有下拉回彈效果的ScrollView，一個自定義控件，在小巫的手機里效果還是可以的，在分辨率小的手機可能效果沒那么好。 ### 博文列表布局 /BlogClient/res/layout/article_list_layout.xml ~~~ <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/wangyibg" tools:context=".MainFrag" > <!-- 開源控件，具有頂部下拉和底部上拉刷新的效果 --> <me.maxwin.view.XListView android:id="@+id/blogListView" android:layout_width="match_parent" android:layout_height="match_parent" android:cacheColorHint="#00000000" android:divider="@drawable/base_list_divider_drawable" android:fadingEdge="none" /> <LinearLayout android:id="@+id/noBlogLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:visibility="invisible"> <ImageView android:id="@+id/no_blog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:src="@drawable/phiz" android:visibility="visible" /> <TextView android:id="@+id/tv_noblog" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="博主還未發表文章，敬請期待！！！"/> </LinearLayout> </RelativeLayout> ~~~ ### 博文列表項布局 /BlogClient/res/layout/article_list_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingBottom="8dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="8dp" > <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:text="Cocos2d-x 3.2示例UserDefaultTest（用戶默認配置）" android:textColor="@color/black" android:textSize="18sp" android:textStyle="bold" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:baselineAligned="true" android:orientation="horizontal" > <ImageView android:id="@+id/blogImg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="8dp" android:src="@drawable/csdn" android:visibility="visible" /> <TextView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="end" android:singleLine="false" android:maxLines="4" android:text="本篇博客介紹Cocos2d-x 3.2示例中的UserDefaulstTest,我們在開發中可能需要用到一些默認配置，一般會以xml形式保存。Cocos2d-x為我們提供了UserDefault類來實現這樣的需求。" android:textColor="@color/nomalGray" android:textSize="14sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" > <TextView android:id="@+id/date" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center_vertical|right" android:paddingTop="8dp" android:singleLine="true" android:text="2014-08-08 17:54|141人閱讀" android:textColor="@color/nomalGray" android:textSize="12sp" /> <TextView android:id="@+id/id" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:paddingTop="16dp" android:text="1" android:textColor="@color/nomalGray" android:visibility="gone" /> </LinearLayout> </LinearLayout> ~~~ ### 博文詳細內容布局 /BlogClient/res/layout/article_detail.xml ~~~ <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/blogContentView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/wangyibg" android:clickable="true" > <RelativeLayout android:id="@+id/head" android:layout_width="match_parent" android:layout_height="wrap_content" > <include layout="@layout/article_detail_head" /> </RelativeLayout> <!-- 具有頂部下拉刷新和底部上拉刷新的ListView --> <me.maxwin.view.XListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/head" android:divider="@null" /> <ProgressBar android:id="@+id/blogContentPro" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:indeterminateDrawable="@drawable/progressbar_large" android:visibility="visible" /> <ImageView android:id="@+id/reLoadImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:clickable="true" android:src="@drawable/base_empty_view" android:visibility="invisible" /> </RelativeLayout> ~~~ 說明：博文詳細內容的布局也是由XListView組成，所以我們可以知道整個布局就是一個ListView，然而ListView的項元素是由不同布局組成。 /BlogClient/res/layout/article_detail_title_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="16dp" android:paddingBottom="8dp" android:gravity="center_vertical" android:textSize="21sp" android:textStyle="bold" android:text="" /> </LinearLayout> ~~~ 說明：博文詳細內容的標題項。 /BlogClient/res/layout/article_detail_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:lineSpacingExtra="8dp" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="8dp" android:paddingBottom="8dp" android:gravity="center_vertical" android:textSize="15sp" android:text="" /> </LinearLayout> ~~~ 說明：博文詳細內容的文本項。 /BlogClient/res/layout/article_detail_bold_title_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:lineSpacingExtra="8dp" android:paddingBottom="@dimen/activity_horizontal_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_horizontal_margin" android:text="" android:textColor="@color/coffee" android:textSize="16sp" android:textStyle="bold" /> </LinearLayout> ~~~ 說明：博文詳細內容粗標題項。 /BlogClient/res/layout/article_detail_img_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="8dp" android:layout_marginBottom="8dp" android:background="@drawable/biz_topic_vote_submit_default" android:layout_gravity="center_horizontal"/> </LinearLayout> ~~~ 說明：博文詳細內容的圖片項。 /BlogClient/res/layout/article_detail_code_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <WebView android:id="@+id/code_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:focusableInTouchMode="true" android:layout_margin="5dp" /> </LinearLayout> ~~~ 說明：博文想詳細內容的代碼項。 上面關于博文詳細內容有多個布局，是整個客戶端最復雜的布局了，大家可以好好感受一下。 ### 博文評論列表布局 /BlogClient/res/layout/activity_comment.xml ~~~ <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/newsContentView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/wangyibg" android:clickable="true" > <RelativeLayout android:id="@+id/head" android:layout_width="match_parent" android:layout_height="wrap_content" > <include layout="@layout/comment_head" /> </RelativeLayout> <me.maxwin.view.XListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/head" android:divider="@drawable/base_list_divider_drawable" /> <ProgressBar android:id="@+id/newsContentPro" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:indeterminateDrawable="@drawable/progressbar_large" android:visibility="visible" /> <ImageView android:id="@+id/reLoadImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:clickable="true" android:src="@drawable/base_empty_view" android:visibility="invisible" /> <!-- <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/base_list_divider_drawable" /> --> <!-- <LinearLayout android:id="@+id/commentEditL" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_alignParentBottom="true" android:background="@color/wangyibg" > <EditText android:id="@+id/commentEdit" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableLeft="@drawable/biz_news_newspage_comment_icon" android:textSize="14sp" android:drawablePadding="8dp" android:layout_margin="6dp" android:hint="添加評論"/> <ImageButton android:id="@+id/commentSend" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/comment_btn" android:layout_gravity="center_vertical" android:layout_marginRight="4dp"/> </LinearLayout> --> </RelativeLayout> ~~~ 說明：評論列表跟博文詳細內容的布局類似，也是由XListView組成，只是需要區分評論和回復評論的列表項，區分的邏輯是在代碼中實現的，本篇博客之說明布局實現。 /BlogClient/res/layout/comment_head.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/biz_news_detaila_action_bar_bg" android:orientation="horizontal" > <ImageView android:id="@+id/backBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="0dp" android:layout_marginRight="0dp" android:background="@drawable/back_btn"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:src="@drawable/base_action_bar_back_divider"/> <TextView android:id="@+id/headTV" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_gravity="center_vertical" android:layout_marginLeft="4dp" android:textColor="@color/white" android:textStyle="bold" android:textSize="21sp" android:text=""> </TextView> <ProgressBar android:id="@+id/progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:visibility="gone" /> <TextView android:id="@+id/comment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="" android:textColor="@color/white" android:textSize="12sp" android:layout_marginRight="4dp" android:gravity="center" android:background="@drawable/biz_news_detailpage_comment_normal"/> <!-- <ImageButton android:id="@+id/personCenter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:src="@drawable/base_send_normal" android:background="@drawable/person_btn" /> --> </LinearLayout> ~~~ 說明：評論界面頂部布局。 /BlogClient/res/layout/comment_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingBottom="8dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="8dp" > <com.xiaowu.blogclient.view.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/userface" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/csdn" app:border_color="#FFffffff" app:border_width="1dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:orientation="vertical" > <TextView android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="4dp" android:layout_marginLeft="5dp" android:text="username" android:textColor="@color/light_blue" android:textSize="14sp" /> <!-- <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/biz_pc_account_line" /> --> <TextView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="4dp" android:text="mark" android:ellipsize="none" android:singleLine="false" android:textSize="16sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:orientation="horizontal" > <TextView android:id="@+id/replyCount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="" android:textColor="@color/nomalGray" android:textSize="12sp" /> <TextView android:id="@+id/date" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:text="2013-10-11" android:textColor="@color/nomalGray" android:textSize="12sp" /> </LinearLayout> </LinearLayout> </LinearLayout> ~~~ 說明：評論列表的主題項布局。 /BlogClient/res/layout/comment_child_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/wangyibg2" > <ImageView android:layout_width="match_parent" android:layout_height="4dp" android:background="@drawable/shadow_l" /> <TextView android:id="@+id/replyIcon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="16dp" android:drawableLeft="@drawable/material_go_normal" android:gravity="center_vertical" android:text="回復:" android:textColor="@color/nomalGray" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="3dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_marginTop="3dp" android:layout_toRightOf="@+id/replyIcon" android:orientation="vertical" > <TextView android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="4dp" android:text="username" android:textColor="@color/light_blue" android:textSize="12sp" /> <!-- <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/biz_pc_account_line" /> --> <TextView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="4dp" android:text="mark" android:ellipsize="none" android:singleLine="false" android:textColor="@color/black2" android:textSize="14sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:orientation="horizontal" > <TextView android:id="@+id/replyCount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="" android:textColor="@color/coffee" android:textSize="12sp" /> <TextView android:id="@+id/date" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:text="2013-10-11" android:textColor="@color/nomalGray" android:textSize="12sp" /> </LinearLayout> </LinearLayout> </RelativeLayout> ~~~ 說明：評論列表的回復項布局，跟主題項效果不一樣，它是呈灰色背景的，來表示回復項。 ### UI篇總結 關于整個客戶端的UI設計實現已經基本上介紹完，詳細看來也沒有多么復雜，小巫這里用到了很多自定義組件，讓整個客戶端好看很多。各位初學者可以根據自己的需求定制自己的UI，再整合一些優秀的開源組件，我相信大家一定能設計出簡潔美觀的界面。