了解Android_09之GridView（网格视图）

一、GridView视图是什么样的一种效果？

  GridView将自定义布局样式按照网格的方式进行显示，例如：

 

 GridView标签代码：

<GridView
    android:id="@+id/gv1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:numColumns="3"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="20dp"
    android:listSelector="@drawable/gridview_item"
/>

其中引入了自定的按压样式：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/colorRed"/>
    <item android:state_pressed="true" android:drawable="@color/colorRed"/>
    <item android:state_focused="true" android:drawable="@color/colorRed"/>
</selector>

二、GridView类似ListView，内部item都是由Java代码进行控制的：

先自定义一个item布局：

<?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"
>
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#FFFF00"
        android:scaleType="centerCrop"
    />
    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="标签自带文字"
        android:textSize="18sp"
        android:gravity="center"
        android:textColor="#FF0000"
    />

</LinearLayout>

再自定义一个适配器（我这里直接用内部类）：

package com.example.gridviewdemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.*;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {
    GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = findViewById(R.id.gv1);
        gridView.setAdapter(new GridViewAdapter(this));
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this,"单击了位置为："+i,Toast.LENGTH_SHORT).show();
            }
        });
        gridView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this,"你长按了"+i,Toast.LENGTH_SHORT).show();
                return true;
            }
        });
    }
    private class GridViewAdapter extends BaseAdapter {
        Context context;
        LayoutInflater layoutInflater;
        GridViewAdapter(Context context){
            this.context = context;
            this.layoutInflater = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            return 9;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

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

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            view = layoutInflater.inflate(R.layout.gridview_item,null);
            ImageView imageView = view.findViewById(R.id.iv1);
            TextView textView = view.findViewById(R.id.tv1);
            Glide.with(this.context).load("https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1604332215&t=cb2b5ed8ce723d4117196f3ee207a001").into(imageView);
            textView.setText("设置后的文本");
            return view;
        }
    }
}

与ListView十分相像，所以不做过多的解释了。

最后效果：