相信使用过支付宝的朋友,都应该对支付宝的九宫图导航印象深刻吧!今天,咱们就来讨论这九宫图效果的制作,废话不多说,先看预览效果图:
可以看到,不仅有优美的边框线条,还有单击每项时的背景渐灰效果,项目代码下载地址: 单击下载
其实仔细分析,这个效果的实现是非常简单的,就是一个GridView就可以了嘛!有的朋友可能要问了:GridView设置不了每项的边框吧!是的,确实是设置不了,但是我们可以在每个item里设置啊,具体code如下:
可以看到,不仅有优美的边框线条,还有单击每项时的背景渐灰效果,项目代码下载地址: 单击下载
其实仔细分析,这个效果的实现是非常简单的,就是一个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的边框.当某一项被按下或获取焦点时,该项背景就会改变。
这个效果的实现还是比较简单的,如果还有不清楚的地方,可以下载源码体会一下。最后欢迎大家和我一起讨论学习,一起提高!