在程序中經常會遇到九宮格的樣式實現,如下圖:
下面我們看看實現的步驟。
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"
指示了文本在圖片的下方。
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指定適配器對象。注意在構建適配器對象的參數,如下:
lst,R.layout.layout_gridview_item, //指定 子項的佈局文件的ID
new String[]{"itemImage","itemText"}, //指定 數據的列
new int[]{R.id.imageView_ItemImage,R.id.textView_ItemText}); //指定數據的列對應到的 綁定的目標控件
那麼如何獲得選擇的項呢?就是上面的gridView1OnClickListener的實現內容如下:
class gridView1OnClickListener implements OnItemClickListener
{
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
Object obj = _gridView1.getAdapter().getItem(arg2);
HashMap<String,Object> map = (HashMap<String,Object>)obj;
String str = (String) map.get("itemText");
Toast.makeText(getApplicationContext(), ""+str, 0).show();
}
}
至此完成。