android開發(2) - 九宮格的實現

加好友 · 發表於 2011-7-8 16:38

馬上加入Android 台灣中文網，立即免費下載應用遊戲。

您需要登錄才可以下載或查看，沒有帳號？註冊

x

在程序中經常會遇到九宮格的樣式實現，如下圖：

登錄/註冊後可看大圖

a1.jpg (36.65 KB, 下載次數: 2)

下載附件保存到相冊

2011-7-8 16:36 上傳

下面我們看看實現的步驟。
1. 一個整體的容器部分。就是上圖中包括整個圖片項個各個部分，這裡我們使用gridView（表格佈局）來實現
2.整個界面裡需要注意的是「重複的部分」，就是各個圖片項和，圖片下方顯示的文字了。那麼我們需要描述這個部分。在描述時，要說明圖片位於上方，文字位於下方。
3.迭代，或者說重複的將各項插入（放入）到容器內。

我們看看具體怎麼實現。
1.新建一個activity，描述放置我們的容器控件

<GridView android:id="@+id/gridView1"
android:layout_width="fill_parent"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:columnWidth="90dp"
android:gravity="center"
android:layout_height="fill_parent">
</GridView>

複製代碼

在這裡需要關注的屬性是columnWidth，這裡指定了列的寬度，一個列對象，對應一個「可重複的子項」，這個子項就是我們的圖片項和圖片下方文字顯示的部分。如果不指定這個寬度的話，默認是每行（展示的行，界面）僅僅只顯示一個「可重複的子項」，而當指定了寬度時，本文指定為90dp,如果每行實際行尺寸大於90，他就會繼續將下一個的「可重複的子項」，放置在本行。於是就呈現一種一行顯示多個子項的情況。numColumns屬性，指定一個自動填充的值，指示了自動填充行。
2。指定「可重複的子項」，就是需要迭代顯示的部分
新建一個佈局文件layout_gridview_item.xml

<RelativeLayout android:id="@+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="@+id/imageView_ItemImage"
android:layout_width="wrap_content"
android:src="@drawable/icon"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
>
</ImageView>
<TextView android:id="@+id/textView_ItemText"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imageView_ItemImage"
android:layout_centerHorizontal="true"
>
</TextView>
</RelativeLayout>

複製代碼

這裡使用了一個相對佈局，在TextView 裡使用屬性android:layout_below="@+id/imageView_ItemImage"
指示了文本在圖片的下方。

登錄/註冊後可看大圖

加好友 · 發表於 2011-7-10 02:45

本帖最後由 kevinjodan 於 2011-7-10 02:45 編輯

謝謝分享對初學者有幫助喔

加好友 · 發表於 2011-7-21 00:10

有幫助喔

加好友 · 發表於 2011-7-26 15:13

感謝大大的分享=!學習記憶了!

加好友 · 發表於 2011-7-29 13:32

真不錯啊把程式碼都放上來
先存起來

謝謝!!

加好友 · 發表於 2013-6-30 15:47

非常詳細的教學,讓新手使用者可以快速上手,真的非常感謝

[教程] android開發(2) - 九宮格的實現

馬上加入Android 台灣中文網，立即免費下載應用遊戲。

相關帖子

警告：您的Adblck已啟用