Android GridView控件（九宫格）

Android GridView控件（九宫格）

效果图

（GridView实现九宫格图片显示，并使用跳转实现点击事件显示大图）

一.Android GridView控件（九宫格）

GridView(九宫格视图)是按照行列的方式来显示内容的，一般用于显示图片，比如实现九宫格视图，用GridView是首选，也是最简单的。

GridView常用的XML属性：

android:columnWidth             设置列的宽度。

android:gravity                       设置此组件中的内容在组件中的位置。可选的值有：                                                     top、bottom、left、right、center_vertical、                                                           fill_vertical、center_horizontal、fill_horizontal、                                                     center、fill、clip_vertical可以多选，用“|”分开。

android:horizontalSpacing       两列之间的间距。

android:numColumns               设置列数。

android:stretchMode                缩放模式。

android:verticalSpacing            两行之间的间距。

1.在xml文件activity_main.xml中添加一个GridView控件并设置列数为3列

xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.cxy.gridview.MainActivity">

    <GridView
        android:numColumns="3"
        android:verticalSpacing="5dp"
        android:horizontalSpacing="5dp"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/gridView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>
RelativeLayout>

2.新建一个xml文件为activity_item.xml并添加一个ImageView和TextView用于显示图片和显示图片下的字样

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
                android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <ImageView
        android:background="@drawable/a11"
        android:layout_width="180dp"
        android:layout_height="120dp"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"/>

    <TextView
        android:textSize="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView"
        android:layout_below="@+id/imageView"
        android:layout_alignLeft="@+id/imageView"
        android:layout_alignStart="@+id/imageView"/>
RelativeLayout>

3.新建一个xml文件为activity_large_image.xml并添加一个ImageView用于实现点击事件跳转显示大图

xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.cxy.gridview.LargeImage">

    <ImageView
        android:background="@drawable/a33"
        android:scaleType="fitCenter"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView2"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>
RelativeLayout>

4.编写 MainActivity测试类

添加 GridView控件

添加一个image数组并把图片放到数组中去（最好图片数量多点）

声明一个inintent方法，用于实例化控件

实例化GridView控件

实例化Adapter适配器

将适配器的数据存储到GridView控件中（设置GridView组件中的Adapter对象）

给GridView添加监听，用于点击事件

实例化Intent跳转，并添加跳转页面

向Intent对象中存储数据，第一个参数为唯一标识，第二个参数为传递的数据

开始跳转

package com.example.cxy.gridview;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import com.example.cxy.gridview.adapter.MyAdapter;

public class MainActivity extends AppCompatActivity {
    private GridView mGridView;
    private int[] image={R.drawable.a11,R.drawable.a22,R.drawable.a33,
            R.drawable.a44,R.drawable.a55, R.drawable.a66,R.drawable.a77,
            R.drawable.a88,R.drawable.a99,R.drawable.a11,R.drawable.a22,
            R.drawable.a33,R.drawable.a44,R.drawable.a55, R.drawable.a66,
            R.drawable.a77,R.drawable.a88,R.drawable.a99,R.drawable.a11,
            R.drawable.a22,R.drawable.a33,R.drawable.a44,R.drawable.a55,
            R.drawable.a66,R.drawable.a77,R.drawable.a88,R.drawable.a99};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        inintent();
    }

    private void inintent() {
        //实例化GridView控件
        mGridView= (GridView) findViewById(R.id.gridView);
        //实例化Adapter适配器
        MyAdapter adapter=new MyAdapter(image,this);
        //将适配器的数据存储到GridView组件中（设置GridView组件的Adapter对象）
        mGridView.setAdapter(adapter);
        //给GridView加监听
        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                //实例化intent跳转，并添加跳转页面
                Intent intent=new Intent(MainActivity.this,LargeImage.class);
                //向intent对象中存数据，第一个参数为唯一标识，第二个参数为传递的数据
                intent.putExtra("image",image[position%image.length]);
                //开始跳转
                startActivity(intent);
            }
        });
    }
}

5.新建一个adapter包在包中新建一个MyAdapter类，编写MyAdapter类

添加image数组和Context上下文，并构造有参方法

将MyAdapter继承BaseAdapter类并修改返回值

将getCount方法(获取列表总长度)返回值修改为image.length

将getItem方法(获取当前整一行)返回值修改为image[position]

将getItemId 方法(获取当前Item的Id)返回值修改为position

将getView方法(获取视图)返回值修改为convertView，列表的优化主要在getView方法中完成

添加一个 自定义内部类ViewHolder(装的全部是行布局中的控件)

创建一个ViewHolder类对象

使用一个if语句判断当前converView是否为空，如果为空则加载新的item行布局

实例化ViewHolder，实例化ImageView，实例化TextView

把视图和控件设置标签缓存，如已缓存在else中获取已缓存标签

赋值(将Image数组中的值赋给ImageView)

给TextView添加文字，返回视图给用户

（如果想循环加载图片可以将getCount方法中的返回值设置为Integer.MAX_VALUE并要在给ImageView赋值处加%image.length例:

viewHolder.mImageView.setImageResource(image[position%image.length]);

还需要在MainActivity类中的向intent对象存数据处添加Integer.MAX_VALUE

          intent.putExtra("image",image[position%image.length]);）

package com.example.cxy.gridview.adapter;

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 android.widget.TextView;
import com.example.cxy.gridview.R;

/**
 * Created by admin on 2017/2/15.
 */
public class MyAdapter extends BaseAdapter{
    private int[] image;
    private Context mContext;

    public MyAdapter(int[] image, Context context) {
        this.image = image;
        mContext = context;
    }

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

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

    @Override
    public long getItemId(int position) {
        return position;
    }
    //列表优化主要是在这个方法中完成
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //
        ViewHolder viewHolder;
        //如果当前视图为空，则加载新视图，实例化控件
        if (convertView==null){
            convertView=LayoutInflater.from(mContext).inflate(R.layout.activity_item,null);
            //实例化ViewHolder控件
            viewHolder=new ViewHolder();
            //实例化ImageView控件
            viewHolder.mImageView= (ImageView) convertView.findViewById(R.id.imageView);
            //实例化TextView控件
            viewHolder.mTextView= (TextView) convertView.findViewById(R.id.textView);
            //把视图和控件设置标签缓存
            convertView.setTag(viewHolder);
        }else{
            //获取已缓存标签
            viewHolder= (ViewHolder) convertView.getTag();
        }
        //赋值（将image数组的值赋给ImageVirwe）
        viewHolder.mImageView.setImageResource(image[position]);
        //给TextView添加文字
        viewHolder.mTextView.setText("第"+(position+1)+"张");
        //返回视图给用户看
        return convertView;
    }
    //装的全部都是行布局中的控件
    class ViewHolder{
        ImageView mImageView;
        TextView mTextView;
    }
}

6.新建一个La r geImage类，编写LargelImage

添加一个ImageView控件

获取MainActivity中跳转过来的Intent对象

获取Intent对象中的图片，第一个参数为传递的字段，第二个参数为缺省值

实例化ImageView控件

给ImageView控件设置图片(将图片放入ImageView中)

package com.example.cxy.gridview;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

public class LargeImage extends AppCompatActivity {
    private ImageView imageview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_large_image);
        //获取上个页面跳转过来的Intent对象
        Intent intent=getIntent();
        //获取intent对象中的图片，第一个参数为传递的字段，第二个参数为缺省值
        int img = intent.getIntExtra("image", R.drawable.a11);
        //实例化ImageView控件
        imageview= (ImageView) findViewById(R.id.imageView2);
        //给当前控件设置图片
        imageview.setImageResource(img);
    }
}