Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android入門第八篇之GridView(九宮圖)

Android入門第八篇之GridView(九宮圖)

編輯:Android開發實例

      GridView跟ListView都是比較常用的多控件布局,而GridView更是實現九宮圖的首選!本文就是介紹如何使用GridView實現九宮圖。GridView的用法很多,網上介紹最多的方法就是自己實現一個ImageAdapter繼承BaseAdapter,再供GridView使用,類似這種的方法本文不再重復,本文介紹的GridView用法跟前文ListView的極其類似。。。。也算是我偷懶一下,嘻嘻嘻嘻。。。。

       先來貼出本文代碼運行的結果:

 

本文需要添加/修改3個文件:main.xml、night_item.xml、JAVA源代碼。

main.xml源代碼如下,本身是個GirdView,用於裝載Item:

 

 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:id="@+id/gridview" 
  4.     android:layout_width="fill_parent"   
  5.     android:layout_height="fill_parent" 
  6.     android:numColumns="auto_fit" 
  7.     android:verticalSpacing="10dp" 
  8.     android:horizontalSpacing="10dp" 
  9.     android:columnWidth="90dp" 
  10.     android:stretchMode="columnWidth" 
  11.     android:gravity="center" 
  12. /> 

 

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

android:numColumns="auto_fit" ,GridView的列數設置為自動

android:columnWidth="90dp",每列的寬度,也就是Item的寬度
android:stretchMode="columnWidth",縮放與列寬大小同步
android:verticalSpacing="10dp",兩行之間的邊距,如:行一(NO.0~NO.2)與行二(NO.3~NO.5)間距為10dp
android:horizontalSpacing="10dp",兩列之間的邊距。

 

接下來介紹 night_item.xml,這個XML跟前面ListView的ImageItem.xml很類似:

  

 

 

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

 

 

 

最後就是JAVA的源代碼了,也跟前面的ListView的JAVA源代碼很類似,不過多了“選中”的事件處理:

 

  1. public void onCreate(Bundle savedInstanceState) {     
  2.       super.onCreate(savedInstanceState);     
  3.       setContentView(R.layout.main);     
  4.       GridView gridview = (GridView) findViewById(R.id.gridview);     
  5.            
  6.       //生成動態數組,並且轉入數據     
  7.       ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();     
  8.       for(int i=0;i<10;i++)     
  9.       {     
  10.         HashMap<String, Object> map = new HashMap<String, Object>();     
  11.         map.put("ItemImage", R.drawable.icon);//添加圖像資源的ID     
  12.     map.put("ItemText", "NO."+String.valueOf(i));//按序號做ItemText     
  13.         lstImageItem.add(map);     
  14.       }     
  15.       //生成適配器的ImageItem <====> 動態數組的元素,兩者一一對應     
  16.       SimpleAdapter saImageItems = new SimpleAdapter(this, //沒什麼解釋     
  17.                                                 lstImageItem,//數據來源      
  18.                                                 R.layout.night_item,//night_item的XML實現     
  19.                                                      
  20.                                                 //動態數組與ImageItem對應的子項             
  21.                                                 new String[] {"ItemImage","ItemText"},      
  22.                                                      
  23.                                                 //ImageItem的XML文件裡面的一個ImageView,兩個TextView ID     
  24.                                                 new int[] {R.id.ItemImage,R.id.ItemText});     
  25.       //添加並且顯示     
  26.       gridview.setAdapter(saImageItems);     
  27.       //添加消息處理     
  28.       gridview.setOnItemClickListener(new ItemClickListener());     
  29.   }     
  30.        
  31.   //當AdapterView被單擊(觸摸屏或者鍵盤),則返回的Item單擊事件     
  32.   class  ItemClickListener implements OnItemClickListener     
  33.   {     
  34. public void onItemClick(AdapterView<?> arg0,//The AdapterView where the click happened      
  35.                                   View arg1,//The view within the AdapterView that was clicked     
  36.                                   int arg2,//The position of the view in the adapter     
  37.                                   long arg3//The row id of the item that was clicked     
  38.                                   ) {     
  39.     //在本例中arg2=arg3     
  40.     HashMap<String, Object> item=(HashMap<String, Object>) arg0.getItemAtPosition(arg2);     
  41.     //顯示所選Item的ItemText     
  42.     setTitle((String)item.get("ItemText"));     
  43. }     
  44.          
  45.   }   

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved