图像类组件(网格视图GridView)
- 网格视图:按照行列的方式来显示多个组件,通常用来显示图片或图标。
在activity_main.xml文件中,用GridView标签来定义网格视图:
- 属性:
- android:layout_width和android:layout_height :取值为match_parent,即与父容器相同。
- android:numColumns :设置网格的列数。可设置为auto_fit,即自动排列。
-
利用适配器来显示图片:
对于网格视图,无法用某一个属性来设置它显示哪些图片,需要使用适配器来设置。适配器是连接后端数据与前端显示的接口,是数据和UI组件之间的一个重要纽带。
Android中提供的4个常用的适配器实现类:- ArrayAdapter :数组适配器,通常用于将数组的多个值包装成多个列表项。只能显示一行文字。
- SimpleAdapter :简单适配器,通常用于把List集合的多个值包装成多个列表项。可以自定义各种效果。
- SimpleCursorAdapter :将数据库的内容以列表的形式展示出来。
- BaseAdapter :基本适配器,通过这个适配器可以对各个列表项进行最大限度的定制。
使用SimpleAdapter适配器来显示图片
(1).在res/layout目录下新建一个布局文件cell.xml,用于设置网格视图的一个单元格的内容:
(2).在cell.xml文件中添加一个ImageView,用于显示图片:
(3).准备九张要在网格视图中显示的图片,并放在res/drawable目录下:
(4).为网格视图设置一个id:
(5).在Java文件中进行如下操作:
package com.example.gridviewdemo;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MainActivity extends AppCompatActivity {
//1.定义一个整型数组,用来存放图片资源id
private int[] picture=new int[]{R.drawable.image01,R.drawable.image02,R.drawable.image03,
R.drawable.image04,R.drawable.image05, R.drawable.image06,
R.drawable.image07,R.drawable.image08,R.drawable.image09};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//2.获取GridView
GridView gridView=findViewById(R.id.gridview);
//3.创建一个存储Map的List对象,Map以键值对的形式存储图像资源
List<Map<String,Object>> listitem=new ArrayList();
//4.将图片资源存入List对象
for (int i = 0; i < picture.length; i++) {
Map<String,Object> map=new HashMap<>();
map.put("image",picture[i]);
listitem.add(map);
}
//5.定义一个SimpleAdapter适配器,构造函数有5个参数:
//上下文对象;保存图像资源的List对象;控制网格试图一个单元格的布局文件cell.xml;
//一个保存List中Map的key取值的字符串数组;一个保存cell.xml文件中图像视图id:image的int数组
SimpleAdapter simpleAdapter=new SimpleAdapter(MainActivity.this,listitem,R.layout.cell,new String[]{"image"},new int[]{R.id.image});
//6.为网格视图gridview设置适配器为simpleAdapter
gridView.setAdapter(simpleAdapter);
}
}
运行结果:
使用BaseAdapter适配器来显示图片:
(1)同样需要准备9张图片,同时为GridView定义一个id
(2)不需要控制网格视图中一个单元格布局的布局文件cell.xml
(3)直接在Java文件中进行如下操作:
package com.example.gridviewdemo;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.os.Bundle;
import android.os.PersistableBundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridLayout;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MainActivity extends AppCompatActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//10.获取GirdView
GridView gridView=findViewById(R.id.gridview);
//11.为gridview设置适配器
gridView.setAdapter(new ImageAdapter(this));
}
//2.创建一个继承BaseAdapter类的内部类作为自定义适配器,需要重写4个方法
public class ImageAdapter extends BaseAdapter{
//3.定义一个上下文对象变量
private Context mcontext;
//4.创建一个有参构造方法
public ImageAdapter(Context c){
this.mcontext=c;
}
@Override
public int getCount() {
//5.将返回0改为返回图片资源数组的长度
return picture.length;
}
@Override//不改
public Object getItem(int position) {
return null;
}
@Override//不改
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
//6.创建一个ImageView来显示网格视图中的一个图片,即网格视图的一个单元格
ImageView imageView;
//7.判断此方法的参数convertView是否为null
if(convertView==null){
//7.1为null则实例化imageview,参数为定义的上下文对象
imageView=new ImageView(mcontext);
//设置单元格的大小
imageView.setLayoutParams(new GridView.LayoutParams(100,90));
//设置单元格内图片的缩放方式为按纵横比缩放,并完全覆盖住imageview
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
}else{
//7.2不为null就直接赋给imageview
imageView=(ImageView) convertView;
}
//8.将获取到的图片放在imageview中,position为当前需要显示图片的位置
imageView.setImageResource(picture[position]);
//9.返回imageview
return imageView;
}
}
}
运行结果: