GridView用于在界面上按行、列分布的方式来显示多个组件(而ListView只是以按行的方式)
课程目标
学会使用GridView制作二维布局界面(行、列分布)
数据源(集合) --> 适配器(SimpleAdapter) --> 视图界面(GridView)
实现一种用GridView实现手机桌面的效果。
需要新建一个Item样式文件item.xml,是一个LinearLayout,包含一张图片和一段文字。
然后配置simpleAdapter,GridView设置SimpleAdapter。
GridView比较重要的三个属性:
android:numColumns 每一行显示多少列
android:horizontalSpacing 两列之间的间距
android:verticalSpacing 两行之间的间距
android:numColumns="auto_fit" 设置每一行的列数自适应
需要在AndroidManifest.xml中设置application的Theme
android:theme="@android:style/Theme.Black.NoTitleBar" >
然后就设置完了布局,接下来实现事件监听器。
onItemClick()函数的position参数会记录Item在GridView中的位置(Id)。
实现了一个仿桌面的GridView,点击的时候会显示名字。
package com.example.gridview; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.SimpleAdapter; import android.widget.Toast; public class MainActivity extends FragmentActivity implements OnItemClickListener { private GridView gridView; private List<Map<String, Object>> dataList; 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 = { "通讯录", "日历", "照相机", "时钟", "游戏", "短信", "铃声", "设置", "语音", "天气", "浏览器", "视频" }; private SimpleAdapter simpleAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gridView = (GridView) findViewById(R.id.gridView1); dataList = new ArrayList<Map<String, Object>>(); getData(); simpleAdapter = new SimpleAdapter(this, dataList, R.layout.item, new String[] { "image", "text" }, new int[] { R.id.imageView1, R.id.textView1 }); gridView.setAdapter(simpleAdapter); gridView.setOnItemClickListener(this); } private void 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); } } @Override public void onItemClick(AdapterView<?> parent, View arg1, int position, long id) { Toast.makeText(this, "我是" + iconName[position], Toast.LENGTH_SHORT).show(); } }
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <GridView android:id="@+id/gridView1" android:layout_width="match_parent" android:layout_height="match_parent" android:numColumns="3" android:horizontalSpacing="10dp" android:verticalSpacing="10dp" > </GridView> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <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/imageView1" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/ic_launcher" /> <TextView android:layout_marginTop="5dp" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FFFFFF" android:text="文字" /> </LinearLayout>
效果: