快捷導(dǎo)航

Android編程簡單實(shí)現(xiàn)九宮格示例

更新時(shí)間：2017年06月29日 10:51:37 作者：a771948524

這篇文章主要介紹了Android編程簡單實(shí)現(xiàn)九宮格,結(jié)合具體實(shí)例形式分析了Android實(shí)現(xiàn)九宮格的具體步驟與相關(guān)布局、功能實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了Android編程簡單實(shí)現(xiàn)九宮格。分享給大家供大家參考，具體如下：

實(shí)現(xiàn)的步驟

1. 一個(gè)整體的容器部分。就是上圖中包括整個(gè)圖片項(xiàng)個(gè)各個(gè)部分，這里我們使用gridView（表格布局）來實(shí)現(xiàn)

2.整個(gè)界面里需要注意的是 “重復(fù)的部分”，就是各個(gè)圖片項(xiàng)和，圖片下方顯示的文字了。那么我們需要描述這個(gè)部分。在描述時(shí)，要說明圖片位于上方，文字位于下方。

3.迭代，或者說重復(fù)的將各項(xiàng) 插入（放入）到容器內(nèi)。
需要添加/修改3個(gè)文件：main.xml、meunitem.xml、activity

main.xml源代碼如下，本身是個(gè)GirdView，用于裝載Item：

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:Android="http://schemas.android.com/apk/res/android"
 android:id="@+id/GridView"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:numColumns="auto_fit"
 android:horizontalSpacing="10dp"
 android:verticalSpacing="10dp"
 android:columnWidth="90dp"
 android:stretchMode="columnWidth"
 android:gravity="center">
</GridView>

在這里需要關(guān)注的屬性是columnWidth，這里指定了列的寬度，一個(gè)列對象，對應(yīng)一個(gè) “可重復(fù)的子項(xiàng)”，這個(gè)子項(xiàng)就是我們的圖片項(xiàng)和圖片下方文字顯示的部分。如果不指定這個(gè)寬度的話，默認(rèn)是每行（展示的行，界面）僅僅只顯示一個(gè) “可重復(fù)的子項(xiàng)”，而當(dāng)指定了寬度時(shí)，本文指定為90dp,如果每行實(shí)際行尺寸大于90，他就會繼續(xù)將下一個(gè)的“可重復(fù)的子項(xiàng)”，放置在本行。于是就呈現(xiàn)一種一行顯示多個(gè)子項(xiàng)的情況。numColumns屬性，指定一個(gè)自動填充的值，指示了自動填充行。

2。指定“可重復(fù)的子項(xiàng)”，就是需要迭代顯示的部分

Android:numColumns="auto_fit" ，GridView的列數(shù)設(shè)置為自動
android:columnWidth="90dp"，每列的寬度，也就是Item的寬度
android:stretchMode="columnWidth"，縮放與列寬大小同步
android:verticalSpacing="10dp"，兩行之間的邊距，如：行一(NO.0~NO.2)與行二(NO.3~NO.5)間距為10dp
android:horizontalSpacing="10dp"，兩列之間的邊距。

接下來介紹 meunitem.xml，這個(gè)XML跟前面ListView的ImageItem.xml很類似：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageView android:layout_width="wrap_content"
  android:id="@+id/ItemImage"
  android:layout_height="wrap_content"
  android:layout_centerHorizontal="true"/>
<TextView  android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ItemImage"
android:id="@+id/ItemText"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>

最后是JAVA的源代碼

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.mainmenu);
GridView gridview = (GridView) findViewById(R.id.GridView);
ArrayList<HashMap<String, Object>> meumList = new ArrayList<HashMap<String, Object>>();
for(int i = 1;i < 10;i++) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage", R.drawable.icon);
map.put("ItemText", "NO."+i);
meumList.add(map);
}
SimpleAdapter saMenuItem = new SimpleAdapter(this,
 meumList, //數(shù)據(jù)源
 R.layout.menuitem, //xml實(shí)現(xiàn)
 new String[]{"ItemImage","ItemText"}, //對應(yīng)map的Key
 new int[]{R.id.ItemImage,R.id.ItemText}); //對應(yīng)R的Id
//添加Item到網(wǎng)格中
gridview.setAdapter(saMenuItem);
gridview.setOnItemClickListener(new OnItemClickListener() {
  public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {
    System.out.println("click index:"+arg2);
  }
});
}

更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Android開發(fā)入門與進(jìn)階教程》、《Android調(diào)試技巧與常見問題解決方法匯總》、《Android基本組件用法總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》及《Android控件用法總結(jié)》

希望本文所述對大家Android程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: