从零开始水安卓——高级UI组件1（GridView）

目录

 

GridView

概述

简单的图片排列视图

activity_main.xml

MainActivity.java

效果

总结

带图片和文本视图的GridView

activity_main2.xml

MainActivity

效果

点击事件

---

GridView

概述

网格方式排列视图，区别于GridLayout（纯粹的布局），屏幕中有许多元素需要显示时，可以使用该组件。

• android:columnWidth：列宽，“auto_fit”将设置为自动
• android:numColumns：列数
• android:gravity：对齐方式
• android:horizontalSpacing：水平方向单元格间距
• android:verticalSpacing：垂直方向单元格间距
• android:stretchMode：设置拉伸模式，“columWidth”缩放将于列宽大小同步

简单的图片排列视图

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="auto_fit"
        android:columnWidth="90dp"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        android:id="@+id/gridview"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

MainActivity.java

准备工作:在mipmap导入一定的图片资源

继承BaseAdapter导入四个方法...

并且定义一个int数组引用mipmap中的图片资源（建议图片大小相同，会看起来比较整齐）

getCount()就可以返回数组的length了

getItem()获取每一个选项，就可以返回数组中的每个元素的下标（[position]）

getItemId()直接返回position

最后getView() 需要new一个imageview，但是需要一个上下文参数

所以进行如下操作，来传递context

完整代码如下：

package com.example.listview;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    private GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = findViewById(R.id.gridview);
        gridView.setAdapter(new MyAdapter(this));
    }

    //自定义适配器
    static class MyAdapter extends BaseAdapter{
        private int[] images = {R.mipmap.if_apple_2003193,
                R.mipmap.if_grapes_2003194,
                R.mipmap.if_lemon_2003191,
                R.mipmap.if_mango_2003198,
                R.mipmap.if_orange_2003192,
                R.mipmap.if_pear_2003196,
                R.mipmap.if_pineapple_2003197,
                R.mipmap.if_strawberry_2003199,
                R.mipmap.if_watermelon_2003190};
        private Context context;
        public MyAdapter(Context context){
            this.context = context;
        }

        @Override
        public int getCount() {
            return images.length;
        }

        @Override
        public Object getItem(int position) {
            return images[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(images[position]);
            return imageView;
        }
    }
}

效果

总结

在使用GridView组件的时候 进行了 自定义适配器 的操作，回顾一下流程

（1）创建一个类，继承BaseAdapter类

（2）实现四个方法

getCount：获取要显示的选项总数

getItem:获取每一个选项（图片就返回图片，对象就返回对象）

getItemId:选项ID（基本上直接返回position）

getView:用来为每一个选项生成视图（对图片而言即ImageView，且该方法将会多次调用，次数为一个屏幕显示的数量）

带图片和文本视图的GridView

OK，首先还是新建一个Activity...作为启动的Activity（或者新建项目）

activity_main2.xml

完全不变，直接复制上面的例子里就好...也可以试试修改一下属性...

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity">
    <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="4"
        android:columnWidth="60dp"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        android:id="@+id/gridview"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

MainActivity

前面部分的过程基本一致，需要额外一个String数组，放显示的文本。

然后需要额外定义一个布局文件 例如新建一个item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageview"
        android:src="@mipmap/if_pear_2003196"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:id="@+id/textview"
        android:text="测试"/>
</LinearLayout>

然后getView里用inflater实例化对象并引用

得到imageview和textview，并设置对应的图片和文字。

最后return view（inflater实例化出来的对象）

package com.example.listview;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

public class Main2Activity extends AppCompatActivity {
    private GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        gridView = findViewById(R.id.gridview);
        gridView.setAdapter(new MyAdapter(this));
    }

    static class MyAdapter extends BaseAdapter{
        private String[] name ={
                "项目1",
                "项目2",
                "项目3",
                "项目4",
                "项目5",
                "项目6",
                "项目7",
                "项目8",
                "项目9"
        };
        private int[] images = {R.mipmap.if_apple_2003193,
                R.mipmap.if_grapes_2003194,
                R.mipmap.if_lemon_2003191,
                R.mipmap.if_mango_2003198,
                R.mipmap.if_orange_2003192,
                R.mipmap.if_pear_2003196,
                R.mipmap.if_pineapple_2003197,
                R.mipmap.if_strawberry_2003199,
                R.mipmap.if_watermelon_2003190};
        private Context context;
        public MyAdapter(Context context){
            this.context=context;
        };

        @Override
        public int getCount() {
            return name.length;
        }

        @Override
        public Object getItem(int position) {
            return name[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            LayoutInflater inflater = LayoutInflater.from(context);
            View view = inflater.inflate(R.layout.item,null);
            ImageView iv = view.findViewById(R.id.imageview);
            TextView tv = view.findViewById(R.id.textview);
            iv.setImageResource(images[position]);
            tv.setText(name[position]);
            return view;
        }
    }
}

效果

点击事件

在原有代码的基础上进行修改，实现了点击每个项目显示项目的名字。

package com.example.listview;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class Main2Activity extends AppCompatActivity {
    private GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        gridView = findViewById(R.id.gridview);
        gridView.setAdapter(new MyAdapter(this));
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //parent——GridView view——每一个选项的布局 position——所在的位置 id——编号...
                TextView tv = view.findViewById(R.id.textview);
                Toast.makeText(Main2Activity.this,tv.getText(),Toast.LENGTH_LONG).show();
            }
        });
    }

    static class MyAdapter extends BaseAdapter{
        private String[] name ={
                "项目1",
                "项目2",
                "项目3",
                "项目4",
                "项目5",
                "项目6",
                "项目7",
                "项目8",
                "项目9"
        };
        private int[] images = {R.mipmap.if_apple_2003193,
                R.mipmap.if_grapes_2003194,
                R.mipmap.if_lemon_2003191,
                R.mipmap.if_mango_2003198,
                R.mipmap.if_orange_2003192,
                R.mipmap.if_pear_2003196,
                R.mipmap.if_pineapple_2003197,
                R.mipmap.if_strawberry_2003199,
                R.mipmap.if_watermelon_2003190};
        private Context context;
        public MyAdapter(Context context){
            this.context=context;
        };

        @Override
        public int getCount() {
            return name.length;
        }

        @Override
        public Object getItem(int position) {
            return name[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            LayoutInflater inflater = LayoutInflater.from(context);
            View view = inflater.inflate(R.layout.item,null);
            ImageView iv = view.findViewById(R.id.imageview);
            TextView tv = view.findViewById(R.id.textview);
            iv.setImageResource(images[position]);
            tv.setText(name[position]);
            return view;
        }
    }
}