部落格時間：2015-02-04 15:03

今天我們來模仿一下支付寶錢包首頁中帶有分割線的GridView，俗稱九宮格。先上圖，是你想要的效果麼？如果是請繼續往下看。

          我們都知道ListView設定分割線是非常容易的，設定ListView的分割線顏色和寬度，只需要在佈局中定義android:divider和android:dividerHeight屬性即可。而GridView並沒有這樣的屬性和方法，那我們改如何來做呢？

       博主在做這個效果之前，也參考了其他的一些方案，比如說定義一個自定義的GridView，然後在dispatchDraw()方法中在每個item的四周加上一條分割線，這是需要靠演算法來實現的，最後這種方法實現的效果並不理想，會出現有些item中沒有加上分割線，很難達到我們想要的這種效果。

       其實實現這種效果並不難，原理就是讓每個item都設定成帶有分割線的背景，這樣就很容易實現了。

       首先我們來寫佈局：

1. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2.     android:layout_width="match_parent"
3.     android:layout_height="match_parent"
4.     android:orientation="vertical">
5.      <ScrollView
6.         android:layout_width
   ="fill_parent"
7.         android:layout_height="wrap_content"
8.         android:fillViewport="true"
9.         android:scrollbars="none">
10.         <com.finddreams.alipay.MyGridView
11.             android:id="@+id/gridview"
12.             android:layout_width="fill_parent"
13.             android:layout_height="wrap_content"
14.             android:horizontalSpacing="0.0dip"
15.             android:listSelector="@null"
16.             android:numColumns="3"
17.             android:scrollbars="none"
18.             android:stretchMode="columnWidth"
19.             android:verticalSpacing="0.0dip"/>
20.     </ScrollView>
21. </LinearLayout>

       因為有時候我們的Gridview中的item可能比較多，為了放得下，一般都會用一個ScrollView來巢狀起來。這時就會出現一個常見的問題，我們在開發中經常會碰到，就是當ListView或者GridView被巢狀在ScrollView中時，發現只會顯示第一行的資料，後面的資料就不會顯示了。至於產生這個問題的原因，可能是因為Gridview和ListView都是可以根據子item的寬高來顯示大小的，但是一旦巢狀到ScrollView中就可以上下滑動，於是系統就不能確定到底該畫多大，所以才會產生這樣的問題。

      這個問題的解決方法在網上很多，一般百度一下就能查到，下面是GridView的解決方法：

1. publicclass MyGridView extends GridView {  
2.     public MyGridView(Context context, AttributeSet attrs) {  
3.         super(context, attrs);  
4.     }  
5.     public MyGridView(Context context) {  
6.         super(context);  
7.     }  
8.     public MyGridView(Context context, AttributeSet attrs, int defStyle) {  
9.         super(context, attrs, defStyle);  
10.     }  
11.     @Override
12.     publicvoid onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
13.         int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,  
14.                 MeasureSpec.AT_MOST);  
15.         super.onMeasure(widthMeasureSpec, expandSpec);  
16.     }  
17. }  

      接下來，我們就定義一個帶分割線的選擇器，具體程式碼是：

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <selectorxmlns:android="http://schemas.android.com/apk/res/android">
3.     <itemandroid:state_pressed="true"><shapeandroid:shape="rectangle">
4.             <strokeandroid:width="1.0px"android:color="@color/line"/>
5.             <gradientandroid:angle="270.0"android:endColor="#ffe8ecef"android:startColor="#ffe8ecef"/>
6.         </shape></item>
7.     <itemandroid:state_focused="true"><shapeandroid:shape="rectangle">
8.             <gradientandroid:angle="270.0"android:endColor="#ffe8ecef"android:startColor="#ffe8ecef"/>
9.             <strokeandroid:width="1.0px"android:color="@color/line"/>
10.         </shape></item>
11.     <item><shapeandroid:shape="rectangle">
12.             <gradientandroid:angle="270.0"android:endColor="#ffffffff"android:startColor="#ffffffff"/>
13.             <strokeandroid:width="1.0px"android:color="@color/line"/>
14.         </shape></item>
15. </selector>

         定義一個selector，在裡面設定一個形狀為矩形rectangle，設定這個矩形的stroke描邊屬性的顏色為分割線的顏色，然後在不同的state的item中設定不同的gradient漸變屬性，從而實現在單個item在被點選選中時的效果。

        接著就是給我們GridView的item佈局中加上背景了：

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="fill_parent"
4.     android:layout_height="fill_parent"
5.     android:layout_margin="0.0dip"
6.     android:background="@color/griditems_bg">
7.     <RelativeLayout
8.         android:layout_width="fill_parent"
9.         android:layout_height="fill_parent"
10.         android:layout_centerInParent="true"
11.         android:background="@drawable/bg_gv"
12.         android:padding="12.0dip">
13.         <ImageView
14.             android:id="@+id/iv_item"
15.             android:layout_width="58.0dip"
16.             android:layout_height="58.0dip"
17.             android:layout_centerHorizontal="true"
18.             android:contentDescription="@string/app_name"/>
19.         <TextView
20.             android:id="@+id/tv_item"
21.             android:layout_width="wrap_content"
22.             android:layout_height="wrap_content"
23.             android:layout_below="@id/iv_item"
24.             android:layout_centerHorizontal="true"
25.             android:layout_marginTop="5.0dip"
26.             android:maxLines="1"
27.             android:textColor="@color/commo_text_color"
28.             android:textSize="14.0sp"/>
29.     </RelativeLayout>
30. </RelativeLayout>

      到這裡，就要開始寫程式碼了，定義一個Adapter，把資料填充到GridView中，這一步我想大家都應該都很清楚，這裡就不多講了，不懂的話，可以參考下面的專案程式碼。