Android仿支付寶九宮圖效果

         相信使用過支付寶的朋友,都應該對支付寶的九宮圖導航印象深刻吧!今天,咱們就來討論這九宮圖效果的製作,廢話不多說，先看預覽效果圖:
                                                  
可以看到,不僅有優美的邊框線條，還有單擊每項時的背景漸灰效果,項目代碼下載地址:單擊下載
          其實仔細分析,這個效果的實現是非常簡單的,就是一個GridView就可以了嘛!有的朋友可能要問了:GridView設置不了每項的邊框吧!是的,確實是設置不了，但是我們可以在每個item裏設置啊,具體code如下：

 

<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" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/bg"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imgView"
            android:layout_width="58dip"
            android:layout_height="58dip"
            android:layout_marginTop="10dip"
            android:src="@drawable/app_aapay" />

        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dip"
            android:layout_marginTop="10dip"
            android:text="當面支付" />
    </LinearLayout>

</LinearLayout>

這是GridView加載的item的佈局文件,可以看到每個item裏容器LinearLayout中設置了 background="@drawable/bg",我們再看看bg.xml代碼:

<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:shape="rectangle">

    <item android:state_focused="true"><shape>
            <stroke android:width="1dip" android:color="#ffd3dde6" />

            <solid android:color="#ffe8ecef" />
        </shape></item>
    <item android:state_pressed="true"><shape>
            <stroke android:width="1dip" android:color="#ffd3dde6" />

            <solid android:color="#ffe8ecef" />
        </shape></item>
    <item><shape>
            <stroke android:width="1dip" android:color="#ffd3dde6" />

            <solid android:color="#fff" />
        </shape></item>

</selector>

可以看出,GridView的關鍵效果都在這個文件中了，默認時,有着寬度爲1px,顏色爲#ffd3dde6的邊框.當某一項被按下或獲取焦點時,該項背景就會改變。

     這個效果的實現還是比較簡單的，如果還有不清楚的地方，可以下載源碼體會一下。最後歡迎大家和我一起討論學習，一起提高！