Android成長日記-使用GridView顯示多行資料

標籤：

本節將實現以下效果

Ps：看起來很不錯的樣子吧，而且很像九宮格/se

-----------------------------------------------------------------------

下面進入正題[s1] ：

Step 1：建立Layout，裡面建立GridView

<GridView

android:id="@+id/gridView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:numColumns="3"

android:horizontalSpacing="10dp"

android:verticalSpacing="10dp" >

</GridView>[s2]

Step 2:建立Java代碼

實現這一效果使用的是ListView

所以在需要涉及ListView的有關知識

ListView需要資料來源，適配器，監聽器

① 考慮到GridView中含有圖片，文字，所以事先加入圖片，文字

private int[] icon={R.drawable.address_book, R.drawable.calendar,R.drawable.camera, R.drawable.clock, R.drawable.games_control,R.drawable.messenger, R.drawable.ringtone, R.drawable.settings, R.drawable.speech_balloon, R.drawable.weather,

R.drawable.world, R.drawable.youtube};

private String[] iconName={"連絡人", "日曆", "照相機", "時鐘", "遊戲", "簡訊", "鈴聲", "設定","語音", "天氣", "瀏覽器", "Youtube"};

② 建立適配器

---由於含有圖片，文字，所以使用的是SimpleAdapter適配器

Ps：SimpleAdapter的參數講解

SimpleAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)

* SimpleAdapter()

* ---->>context:上下文

* ---->data:資料來源 List<? extends Map<String, ?>> data，一個Map所組成的List集合

* 每一個Map都會對應ListView列表中的一行

* 每一個Map(鍵~值對)中的鍵必須包含所有在from中所指定的鍵

* ---->resource：清單項目布局檔案的ID

* ---->from：Map中的鍵名

* ---->to：綁定資料檢視中的ID，與from成對應關係

adapter=new SimpleAdapter(this, getData(), R.layout.view_grid[s3] , new String[]{"image","text"}, new int[]{R.id.image,R.id.text});//建立適配器

gridView.setAdapter(adapter);

 

ps：R.layout.view_grid的樣式代碼

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:gravity="center"

android:background="#000000">

<ImageView

android:id="@+id/image"

android:src="@drawable/ic_launcher"

android:layout_width="60dp"

android:layout_height="60dp"/>

<TextView

android:id="@+id/text"

android:layout_marginTop="5dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#ffffff"

android:text="文字"/>

</LinearLayout>

③ 添加資料來源

private List<Map<String,Object>>dataList;//聲明

dataList=new ArrayList<Map<String,Object>>();

private List<Map<String,Object>> getData() {

for(int i=0;i<icon.length;i++){

Map<String,Object>map=new HashMap<String,Object>();

map.put("image", icon[i]);

map.put("text", iconName[i]);

dataList.add(map);

}

return dataList;

}

④ 建立監聽器

實現介面

public class View extends Activity implements OnItemClickListener

gridView.setOnItemClickListener(this);

⑤ 實現監聽事件

public void onItemClick(AdapterView<?> arg0, android.view.View arg1,

int position, long id) {

Toast.makeText(this, "我是"+iconName[position],Toast.LENGTH_SHORT).show(); }

[s1] /*

* 1.準備資料來源

* 2.建立適配<SimpleAdapter>

* 3.GridView載入適配器

* 4.GridView配置事件監聽器(onItemClickListener)

*/

[s2] android:numColumns="" 每一行顯示多少列android:horizontalSpacing="" 兩列之間的間距

android:verticalSpacing="" 兩行之間的間距

[s3]這是建立的Layout

（也就是顯示的文字和圖片的樣式）

Android成長日記-使用GridView顯示多行資料