使用ListView製作表格樣式以及訊息提示小表徵圖的布局

這次主要講一下  一 ：仿的訊息提醒的小表徵圖的布局，二：怎樣利用ListView來製作表格

不管三七二十一：

                                                    

      

       先說一下仿的訊息表徵圖提示的布局是怎樣做的，其實非常簡單，你可以想一想，可以肯定的是訊息提示的小圓標是和她所靠近的圖片重疊在一起的，那麼這就簡單了，什麼布局可以允許控制項重疊呢？答案是：FrameLayout ，FrameLayout布局只允許一個控制項，之後所有的控制項都是重疊在前一個控制項之上的。明白了要用FrameLayout之後，我們看一下提示的小圓標都是在布局的右上方吧，很簡單我們只要將小圓標的位置設為向上向右就行了，具體看下面的代碼：

<FrameLayout     android:background="@null"             android:layout_width="match_parent"             android:layout_height="fill_parent"             android:layout_weight="3.5" >     <LinearLayout          android:gravity="bottom|center"                     android:layout_width="match_parent"                     android:layout_height="match_parent" >                <Button                android:id="@+id/sure"                android:layout_width="match_parent"                android:layout_height="wrap_content"          android:layout_marginRight="10dp"          android:layout_gravity="center"          android:background="@drawable/friendactivity_remind_normal"          android:gravity="center"          android:text="確定"          android:textColor="#FFFFFF"/>          </LinearLayout>                    <LinearLayout               android:gravity="top|right|center"                     android:paddingRight="10.0dip"                     android:layout_width="match_parent"                     android:layout_height="match_parent">                <TextView                     android:textSize="10.0dip"                     android:textColor="@android:color/white"                     android:gravity="center"                     android:id="@+id/tvTabUnread"                     android:background="@drawable/tab_unread_bg"                     android:visibility="visible"                     android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="2" />            </LinearLayout></FrameLayout>

 

上面TextView的背景圖片即是小圓標，將她的父布局的位置設為向上，向右，置中就行： android:gravity="top|right|center"，這樣一個小圓標就顯示在了一個地區的右上方了。

 

接下來說一下怎樣用ListView來繪製表格。

第一：我們在styles.xml檔案中定義兩個樣式，一個為：豎格和豎格之間的橫線，一個為：行和行之間的橫線

    <style name="list_item_seperator_layout">        <item name="android:layout_width">fill_parent</item>               <item name="android:layout_height">1dip</item>                <item name="android:background">@color/color_dark_grey</item>    </style>         <style name="list_item_cell_seperator_layout">        <item name="android:layout_width">1dip</item>        <item name="android:layout_height">fill_parent</item>        <item name="android:background">@color/color_dark_grey</item>    </style>

第二：布局listView的Item 的布局檔案：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:orientation="horizontal" >        <View style="@style/list_item_cell_seperator_layout"/>    <TextView android:id="@+id/picc_task_title"        android:layout_width="0dip"        android:layout_height="30dp"        android:layout_weight="1"        android:layout_gravity="center"        android:gravity="center"        android:padding="2dip"/>        <View style="@style/list_item_cell_seperator_layout"/>                                                                          <TextView android:id="@+id/picc_task_content"        android:layout_width="0dip"        android:layout_height="30dp"        android:layout_weight="2"        android:layout_gravity="center"        android:gravity="center"        android:padding="2dip"/>             <View style="@style/list_item_cell_seperator_layout"/>    </LinearLayout>

這個布局檔案的主要作用就是在格子和格子之間加入垂直的分割線，以形成豎格的效果

第三：設定ListViewItem之間的分割線，這個可以直接在ListView中進行設定：

<ListView android:layout_weight="1" android:id="@+id/stock_list_view" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollingCache="true" android:cacheColorHint="#00000000" android:fastScrollEnabled="true" android:focusable="true" android:divider="@color/color_dark_grey"        android:dividerHeight="1dip"/>

ListView 中的divider就是設定分割線的顏色的，只要設定成和豎格相同的顏色和寬度就行，這樣一個ListView的表格就製作成了。大致步驟就是這樣了，下面我將上面那張圖片

的布局檔案代碼貼出來。

<LinearLayout 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:orientation="vertical"    tools:context=".MainActivity" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="fill_parent"        android:orientation="horizontal"        android:layout_weight="9"        android:background="@drawable/webviewtab_bg">       <LinearLayout         android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="horizontal"        android:layout_weight="3.5">                    <Button            android:id="@+id/come_back"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginLeft="10dp"            android:layout_gravity="center"            android:background="@drawable/friendactivity_remind_normal"            android:text="返回"            android:gravity="center"            android:textColor="#FFFFFF"/>        </LinearLayout>        <LinearLayout         android:layout_width="match_parent"        android:layout_height="fill_parent"        android:orientation="vertical"        android:layout_weight="2">                      </LinearLayout>      <FrameLayout         android:background="@null"             android:layout_width="match_parent"             android:layout_height="fill_parent"             android:layout_weight="3.5" >     <LinearLayout          android:gravity="bottom|center"                     android:layout_width="match_parent"                     android:layout_height="match_parent" >                    <Button                android:id="@+id/sure"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginRight="10dp"                android:layout_gravity="center"                android:background="@drawable/friendactivity_remind_normal"                android:gravity="center"                android:text="確定"                android:textColor="#FFFFFF"/>          </LinearLayout>                    <LinearLayout               android:gravity="top|right|center"                     android:paddingRight="10.0dip"                     android:layout_width="match_parent"                     android:layout_height="match_parent">                    <TextView                        android:textSize="10.0dip"                        android:textColor="@android:color/white"                        android:gravity="center"                        android:id="@+id/tvTabUnread"                        android:background="@drawable/tab_unread_bg"                        android:visibility="visible"                        android:layout_width="wrap_content"                       android:layout_height="wrap_content"                       android:text="2" />            </LinearLayout></FrameLayout>    </LinearLayout>            <LinearLayout         android:layout_width="match_parent"        android:layout_height="fill_parent"        android:orientation="vertical"        android:layout_weight="1">                       <LinearLayout             android:layout_width="match_parent"            android:layout_height="fill_parent"            android:orientation="horizontal"            android:layout_weight="7">                    <TextView         android:id="@+id/acceptTask"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="6"        android:layout_gravity="center"        android:gravity="center"        android:text="接受任務"/>        <ImageView         android:id="@+id/acceptTaskImg"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="7"        android:layout_gravity="center"        android:src="@drawable/pull_left_icon_arrow_normal"/>            <TextView         android:id="@+id/processingTask"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="6"        android:gravity="center"        android:layout_gravity="center"        android:text="前往現場"/>        <ImageView         android:id="@+id/processingTaskImg"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="7"        android:layout_gravity="center"        android:src="@drawable/pull_left_icon_arrow_normal"/>            <TextView         android:id="@+id/arrival"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="6"        android:gravity="center"        android:layout_gravity="center"        android:text="到達現場"/>        <ImageView         android:id="@+id/arricalImg"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="7"        android:layout_gravity="center"        android:src="@drawable/pull_left_icon_arrow_normal"/>                 <TextView         android:id="@+id/finish"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:gravity="center"        android:layout_weight="6"        android:text="處理完畢"/>        </LinearLayout>                <LinearLayout             android:layout_width="match_parent"            android:layout_height="fill_parent"            android:orientation="vertical"            android:layout_weight="1">                       <LinearLayout            android:layout_width="match_parent"            android:layout_height="fill_parent"            android:orientation="vertical"            android:layout_weight="2">                                          <LinearLayout                     android:orientation="horizontal"            android:layout_width="fill_parent"            android:layout_height="wrap_content">                                        <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                                                             <View style="@style/list_item_seperator_layout"                         android:layout_weight="1"/>                                                                  <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                </LinearLayout>                                               <LinearLayout                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:orientation="vertical" >                                    <LinearLayout                 android:orientation="horizontal"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_gravity="center">                <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                 <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>             </LinearLayout>                             <LinearLayout                     android:orientation="horizontal"            android:layout_width="fill_parent"            android:layout_height="wrap_content">                                        <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                                                             <View style="@style/list_item_seperator_layout"                         android:layout_weight="1"/>                                                                  <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                </LinearLayout>                <LinearLayout                     android:orientation="horizontal"                    android:layout_width="fill_parent"                    android:layout_height="wrap_content"                    android:layout_gravity="center">                                        <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                                         <ListView                    android:layout_weight="1"    android:id="@+id/stock_list_view"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:scrollingCache="true"    android:cacheColorHint="#00000000"    android:fastScrollEnabled="true"    android:focusable="true"    android:divider="@color/color_dark_grey"           android:dividerHeight="1dip"/>                                        <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                 </LinearLayout>                              <LinearLayout                         android:orientation="horizontal"                    android:layout_width="fill_parent"                    android:layout_height="wrap_content"                    android:layout_gravity="center">                                        <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                                                             <View style="@style/list_item_seperator_layout"                         android:layout_weight="1"/>                                                                  <TextView                     android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="20"/>                  </LinearLayout>                            </LinearLayout>                                          </LinearLayout>                             <LinearLayout                android:layout_width="match_parent"               android:layout_height="fill_parent"               android:layout_weight="4"               android:orientation="vertical">               <LinearLayout                     android:orientation="horizontal"                android:layout_width="fill_parent"                android:layout_height="wrap_content">                                        <TextView                 android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:layout_weight="20"/>                                         <Button           android:id="@+id/button1"           android:layout_width="match_parent"           android:layout_height="match_parent"           android:layout_weight="1"           android:text="接受任務"/>                                       <TextView                 android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:layout_weight="20"/>                   </LinearLayout>                      <LinearLayout                     android:orientation="horizontal"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_marginTop="10dp">                                        <TextView                 android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:layout_weight="20"/>                                         <Button           android:id="@+id/button2"           android:layout_width="match_parent"           android:layout_height="match_parent"           android:layout_weight="1"           android:text="取消任務"/>                                       <TextView                 android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:layout_weight="20"/>               </LinearLayout>                          </LinearLayout>        </LinearLayout>           </LinearLayout></LinearLayout>

上面就是使用ListView製作表格的過程，我的這個XML可能view tree 過深會導致android解析的時候花費的時間比較長，所以還需進行最佳化，具體的最佳化可以使用hierarchyviewer查看其view tree，這個工具在sdk 包中tools 檔案夾中，使用方法可以google。