android開發(2) - 九宮格的實現 - Android 台灣中文網

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

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"
指示了文本在圖片的下方。

登錄/註冊後可看大圖

a2.jpg (5.6 KB, 下載次數: 4)

下載附件保存到相冊

2011-7-8 16:36 上傳

3.剩下的就是數據綁定了。上代碼：

protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_main);
_gridView1 = (GridView)findViewById(R.id.gridView1);
ArrayList<HashMap<String,Object>> lst = new ArrayList<HashMap<String,Object>>();
for(int i = 0 ;i < 10; i++)
{
HashMap<String,Object> map = new HashMap<String,Object>();
map.put("itemImage", R.drawable.icon);
map.put("itemText", "item"+i);
lst.add(map);
}
SimpleAdapter adpter = new SimpleAdapter(this,
lst,R.layout.layout_gridview_item,
new String[]{"itemImage","itemText"},
new int[]{R.id.imageView_ItemImage,R.id.textView_ItemText});
_gridView1.setAdapter(adpter);
_gridView1.setOnItemClickListener(new gridView1OnClickListener());
}

複製代碼

先構建ArrayList作為數據源，在構建SimpleAdapter 作為數據適配器，為gridView指定適配器對象。注意在構建適配器對象的參數，如下：

SimpleAdapter adpter = new SimpleAdapter(this,
lst,R.layout.layout_gridview_item, //指定子項的佈局文件的ID
new String[]{"itemImage","itemText"}, //指定數據的列
new int[]{R.id.imageView_ItemImage,R.id.textView_ItemText}); //指定數據的列對應到的綁定的目標控件

複製代碼

至此完成。

loginProj.rar

69.81 KB, 下載次數: 16, 下載積分: 碎鑽 -1 個

源碼下載

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

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

作者: yoman 時間: 2011-7-21 00:10
有幫助喔

作者: wukerjen 時間: 2011-7-26 15:13
感謝大大的分享=!學習記憶了!

作者: laukao 時間: 2011-7-29 13:32
真不錯啊把程式碼都放上來
先存起來

謝謝!!

作者: dnnjg 時間: 2013-6-30 15:47
非常詳細的教學,讓新手使用者可以快速上手,真的非常感謝

歡迎光臨 Android 台灣中文網 (https://apk.tw/)