## 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,再整合一些優秀的開源組件,我相信大家一定能設計出簡潔美觀的界面。