本節將實現以下效果
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
(也就是顯示的文字和圖片的樣式)