GridView(网格视图)

GridView 是按照行列的方式来显示内容的，一般用于显示图片列表，比如九宫格列表，使用
GridView实现起来很简单。GridView 的用法与ListView 类似，首先看图2-36，效果图中显示的两
张图片是网上找的。
1.修改布局文件activity_main.xml。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <GridView
        android:id="@+id/gridview"
        android:numColumns="4"
        android:scrollbars="none"
        android:layout_marginBottom="10dp"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</RelativeLayout>

GridView控件中的几个属性作用如下：
� android:numColumns=“4”：一行显示4列。
� android:scrollbars=“none”：去掉滚动条。
� android:verticalSpacing=“10dp”：两行之间的间距。
� android:horizontalSpacing=“10dp”：两列之间的间距

2.Activity 的代码比较简单，初始化数据、设置适配器、设置点击事件

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private GridView gridview;
    private List<Integer> images;
    private GridAdapter gridAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();
        gridview= (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(gridAdapter=new GridAdapter(this,images));

        //item设置点击事件
        gridview.setOnItemClickListener(onItemClickListener);
    }

    private AdapterView.OnItemClickListener onItemClickListener=new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Toast.makeText(MainActivity.this,"当前选中了" +
                    ":"+position,Toast.LENGTH_SHORT).show();
        }
    };

    //初始化数据源
    private void initData(){
        images=new ArrayList<>();
        for(int i=0;i<100;i++){
            if(i%2==1){//对2取余数结果为1  0对2取余等于0，所以0不算，结果为：1 3 5 7 9结果为奇数
                images.add(R.mipmap.test_one);
            }else{ //0 2 4 6 8 10 为偶数   当i为0时，集合里面添加这个所以test_two在第一个（集合索引0）
                images.add(R.mipmap.test_two);
            }
        }
    }
}

3.GridView适配器与ListView 适配器类似，GridAdapter.java 代码如下：（因为类似所以代码不
做详细解释）

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import java.util.List;

/**
 * @author ansen
 * @create time 2016-12-13
 */
public class GridAdapter extends BaseAdapter{//注意：这里继承BaseAdapter
    private LayoutInflater inflater;
    private List<Integer> images;

    public GridAdapter(Context context,List<Integer> images){
        inflater=LayoutInflater.from(context);
        this.images=images;
    }

    @Override
    public int getCount() {
        return images.size();//集合的长度（个数）（图片的个数）
    }

    @Override
    public Object getItem(int position) {
        //每一行绑定的数据源
        return images.get(position);//集合根据索引获取每张图片
    }

    @Override
    public long getItemId(int position) {
        return position;//获取图标的索引
    }

    //获取每一行的View
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        if(convertView==null){
            viewHolder=new ViewHolder();
            convertView = inflater.inflate(R.layout.activity_grid_item, parent, false);
            viewHolder.imageview = (ImageView) convertView.findViewById(R.id.imageview);
            convertView.setTag(viewHolder);
        }else{
            viewHolder= (ViewHolder) convertView.getTag();
        }

        viewHolder.imageview.setImageResource(images.get(position));//注意：这个position是局部变量里面的
        return convertView;
    }

    private class ViewHolder{//内部类（把布局item的控件存储到这个类对象里面，方便存储）
        private ImageView imageview;
    }
}

3.2 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">
    <!--
        android:scaleType="centerCrop" 为了让所有图片充满真个ImageView，是用centerCrop，
        这里高度设置为70dp
    -->
    <ImageView
        android:id="@+id/imageview"
        android:layout_gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/test_one" />
</LinearLayout>

image.png

效果如下所示：

image.png