4使用GridView以表格形式显示多张图片
4-1 GridView概述
第一步：准备数据源，准备一些图片和文字作为数据源。
第二步：有了数据源，我们要新建适配器，并且将我们自定义的布局文件和准备的数据源加载上来作为适配器的构造方法去实现。
第三步：最后，在视图界面上加载这个适配器。
1：主题：使用GridView以表格形式显示多张图片
2：课程目标：学会使用GridView制作二维布局界面（行、列分布）
3：GridView用来干嘛：用于在界面上按行、列分布的方式来显示多个组件；
应用举例：手机系统桌面、手机360安全卫士功能列表、聚划算搜索全部内容列表
4：相似列表组件间比较：
GridView 二维列表显示（行列式）
ListView 一维行可下拉表显示（单调行表）
5：GridView的实现：
数据源-->适配器-->视图界面
适配器的一般流程：
1、组建引入，首先初始化视图界面，其次初始化其他组件（findViewById()）
2、初始化数据源（string[]、map[]……）
3、装配适配器
4、视图界面装载适配器（listView.setAdapter()、gridView.setAdapter()……）
（周边查看：AndroidMainfest配置，界面布局的xml，values值与drawable图片）
4-2 使用GridView
MainActivity.java
package com.example.andriod2_gridview; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.widget.GridView; import android.widget.SimpleAdapter; public class MainActivity extends Activity { 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[] iconNameStrings = { "通讯录", "日历", "照相机", "时钟", "游戏", "短信", "铃声", "设置", "语音", "天气", "浏览器", "视频" }; private SimpleAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gridView = (GridView) findViewById(R.id.gridView); // 1.准备数据源 // 2.新建适配器（SimpleAdapter） // 3.GridView加载适配器 // 4.GridView配置事件监听器（OnItemClickListener） // 新建数据集合 dataList = new ArrayList<Map<String, Object>>(); // 获得数据源 getdata(); // 新建适配器 /* * SimpleAdapter(context-上下文, data-数据源, resource-自定义的布局文件, from-字符串数组, * to-int整型的数组) */ adapter = new SimpleAdapter(this, getdata(), R.layout.item, new String[] { "image", "text" }, new int[] { R.id.image, R.id.text }); // 加载适配器 gridView.setAdapter(adapter); } 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", iconNameStrings[i]); dataList.add(map); } return dataList; // TODO Auto-generated method stub } }
Activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <GridView android:id="@+id/gridView" android:layout_width="wrap_content" android:layout_height="wrap_content" ></GridView> </LinearLayout>
item.xml
<?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:gravity="center" android:background="#000000" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:id="@+id/image" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:text="文字" android:id="@+id/text" android:layout_marginTop="5dp" /> </LinearLayout>
但效果并不是我们想要的。
4-3 设置属性
GridView的三个常用属性
android:numColumns="3" //每行显示多少列 自己也有一个属性auto_fit自动适应
android:horizontalSpacing="10dp"//列间距
android:verticalSpacing="10dp" //行间距
然是相隔10dp，但发现中间的间隔比两旁的间隔大，是因为在间隔10dp后剩余的距离会平均分配到各个部分，故呈现这种现象
样式改成黑色且没有标题栏
效果：
4-4 监听事件
package com.example.andriod2_gridview; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.os.Bundle; import android.app.Activity; import android.view.Menu; 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 Activity 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[] iconNameStrings = { "通讯录", "日历", "照相机", "时钟", "游戏", "短信", "铃声", "设置", "语音", "天气", "浏览器", "视频" }; private SimpleAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gridView = (GridView) findViewById(R.id.gridView); // 1.准备数据源 // 2.新建适配器（SimpleAdapter） // 3.GridView加载适配器 // 4.GridView配置事件监听器（OnItemClickListener） // 新建数据集合 dataList = new ArrayList<Map<String, Object>>(); // 获得数据源 //getdata(); // 新建适配器 /* * SimpleAdapter(context-上下文, data-数据源, resource-自定义的布局文件, from-字符串数组, * to-int整型的数组) */ adapter = new SimpleAdapter(this, getdata(), R.layout.item, new String[] { "image", "text" }, new int[] { R.id.image, R.id.text }); // 加载适配器 gridView.setAdapter(adapter); gridView.setOnItemClickListener(this); } 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", iconNameStrings[i]); dataList.add(map); } return dataList; // TODO Auto-generated method stub } @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // TODO Auto-generated method stub Toast.makeText(this, "我是"+iconNameStrings[position],Toast.LENGTH_SHORT).show(); } }
