Android学习笔记(十七):高级UI组件----图像类组件(网格视图GridView)

图像类组件(网格视图GridView)

  1. 网格视图:按照行列的方式来显示多个组件,通常用来显示图片或图标。
    在这里插入图片描述
    在activity_main.xml文件中,用GridView标签来定义网格视图:
    在这里插入图片描述
  2. 属性:
  • android:layout_width和android:layout_height :取值为match_parent,即与父容器相同。
  • android:numColumns :设置网格的列数。可设置为auto_fit,即自动排列。
    在这里插入图片描述
  1. 利用适配器来显示图片
    对于网格视图,无法用某一个属性来设置它显示哪些图片,需要使用适配器来设置。适配器是连接后端数据与前端显示的接口,是数据和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;
        }
    }
}

运行结果:
在这里插入图片描述

发布了32 篇原创文章 · 获赞 10 · 访问量 5472

猜你喜欢

转载自blog.csdn.net/weixin_44480874/article/details/104341683
今日推荐