安卓開發_九宮格布局

標籤：

學習內容來自

android布局基礎及範例：人人android九宮格布局

，

類似的九宮格 上面是圖片，下面是文字

這裡用的是“GridView”表格版面配置，下面我來給大家講一下：

首先，請大家理解一下“迭代顯示”這個概念，這個好比布局嵌套，我們在一個大布局裡面重複的放入一些布局相同的小布局，

那些重複的部分是由圖片和文字組成的小控制項，圖片在上方，文字在下方，之後我們只需要把這些小控制項迭代進入主容器裡即可。

首先看看主容器的布局

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent" 5     android:orientation="vertical" > 6  7     <GridView  8       android:id="@+id/GridView" 9       android:layout_width="fill_parent"10       android:layout_height="fill_parent"11       android:numColumns="auto_fit"12       android:columnWidth="70dp"13       android:stretchMode="columnWidth"14       android:gravity="center">15 </GridView>16 </LinearLayout>

介紹一下裡面的某些屬性：

android:numColumns=”auto_fit” ，GridView的列數設定為自動
android:columnWidth=”90dp”，每列的寬度，也就是Item的寬度
android:stretchMode=”columnWidth”，縮放與列寬大小同步

在這裡需要關注的屬性是columnWidth，這裡指定了列的寬度，一個列對象，對應一個 “可重複的子項”，這個子項就是我們 的圖片項和圖片下方文字顯示的部分。如果不指定這個寬度的話，預設是每行（展示的行，介面）僅僅只顯示一個 “可重複的子項”，而當指定了寬度時，本文指定為90dp,如果每行實際行尺寸大於90，他就會繼續將下一個的“可重複的子項”，放置在本行。於是就呈現一種 一行顯示多個子項的情況。numColumns屬性，指定一個自動填滿的值，指示了自動填滿行。

然後是一個布局，放重複顯示的小布局

 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="wrap_content" 5 > 6 <ImageView 7     android:layout_width="wrap_content" 8     android:id="@+id/ItemImage" 9     android:layout_height="wrap_content"10     android:layout_centerHorizontal="true"/>11 <TextView12     android:layout_width="wrap_content"13     android:layout_height="wrap_content"14     android:layout_below="@+id/ItemImage"15     android:id="@+id/ItemText"16     android:layout_centerHorizontal="true"17 />18 </RelativeLayout>

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

 

構建ArrayList作為資料來源，再構建SimpleAdapter 作為資料配接器，為gridView指定配接器物件。

採用了java中的資料結構：HashMap

 1 package jiabin.activity; 2    3 import java.util.ArrayList; 4 import java.util.HashMap; 5    6 import android.app.Activity; 7 import android.os.Bundle; 8 import android.view.View; 9 import android.widget.AdapterView;10 import android.widget.AdapterView.OnItemClickListener;11 import android.widget.GridView;12 import android.widget.SimpleAdapter;13 import android.widget.Toast;14   15 public class layout_gridview extends Activity {16     /** Called when the activity is first created. */17     @Override18     public void onCreate(Bundle savedInstanceState) {19         super.onCreate(savedInstanceState);20         setContentView(R.layout.main);21         GridView gridview = (GridView) findViewById(R.id.GridView);22         ArrayList<HashMap<String, Object>> meumList = new ArrayList<HashMap<String, Object>>();23         for(int i = 1;i < 10;i++)24         {25             HashMap<String, Object> map = new HashMap<String, Object>();26             map.put("ItemImage", R.drawable.i1);27             map.put("ItemText", ""+i);28             meumList.add(map);29         }30         SimpleAdapter saItem = new SimpleAdapter(this,31                   meumList, //資料來源32                   R.layout.item, //xml實現33                   new String[]{"ItemImage","ItemText"}, //對應map的Key34                   new int[]{R.id.ItemImage,R.id.ItemText});  //對應R的Id35   36                 //添加Item到網格中37                 gridview.setAdapter(saItem);38                 //添加點擊事件39                 gridview.setOnItemClickListener(40                     new OnItemClickListener()41                     {42                         public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3)43                         {44                             int index=arg2+1;//id是從0開始的，所以需要+145                             Toast.makeText(getApplicationContext(), "你按下了選項："+index, 0).show();46                             //Toast用於向使用者顯示一些協助/提示47                         }48                     }49                 );50     }51 }

：

上面是全部顯示相同的圖片

如果想要顯示不同的圖片和文字 

則可以把圖片，文字放到數組裡

 1  int[] itemimage = new int[]{R.drawable.image_people_shu_zhangfei,R.drawable.image_people_shu_zhugeliang,R.drawable.image_people_shu_liubei,R.drawable.image_people_shu_huatuo,R.drawable.image_people_shu_guanyu}; //放圖片 7 String[] itemname = new String[]{"張飛","諸葛亮","劉備","華佗","關羽"}; //放文字

for(int i=0;i<6;i++)
{
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage", itemimage[i]);
map.put("ItemText", ""+itemname[i]);
meumList.add(map);
}

便可以實現不同圖片和文字了

安卓開發_九宮格布局