GridView（九宫格）

GridView跟ListView都是比较常用的多控件布局，而GridView更是实现九宫图的首选!本文就是介绍如何使用GridView实现九宫图，并且实现图片查看的功能

首先先了解一下GridView的几个属性：
1.Android:numColumns=”3dp” //GridView的列数设置为3列
2.android:columnWidth=”90dp ” //每列的宽度，也就是Item的宽度
3.android:stretchMode=”columnWidth”//缩放与列宽大小同步
4.android:verticalSpacing=”10dp” //两行之间的边距
5.android:horizontalSpacing=”10dp” //两列之间的边距
6.android:cacheColorHint=”#00000000” //去除拖动时默认的黑色背景
7.android:listSelector=”#00000000” //去除选中时的黄色底色
8.android:scrollbars=”none” //隐藏GridView的滚动条
9.android:fadeScrollbars=”true” //设置为true就可以实现滚动条的自动隐藏和显示
10.android:fastScrollEnabled=”true” //GridView出现快速滚动的按钮(至少滚动4页才会显示)
11.android:fadingEdge=”none” //GridView衰落(褪去)边缘颜色为空，缺省值是vertical。(可以理解为上下边缘的提示色)
12.android:fadingEdgeLength=”10dip” //定义的衰落(褪去)边缘的长度
13.android:stackFromBottom=”true” //设置为true时，你做好的列表就会显示你列表的最下面
14.android:transcriptMode=”alwaysScroll” //当你动态添加数据时，列表将自动往下滚动最新的条目可以自动滚动到可视范围内
15.android:drawSelectorOnTop=”false” //点击某条记录不放，颜色会在记录的后面成为背景色,内容的文字可见(缺省为false)

先贴出本文的代码运行的结果：


其代码如下所示：

<?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.gridview.MainActivity">
    <GridView
        android:numColumns="3" //设置列数为3列
        android:verticalSpacing="3dp" //设置两行之间的宽度为3dp
        android:horizontalSpacing="3dp" //设置两列之间的宽度为3dp
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/gridView"

        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

其MainActivity中的代码：

public class MainActivity extends AppCompatActivity {

private GridView gridView;
    private  int[] image={R.drawable.jwss_img,R.drawable.jwss_img,R.drawable.xhm_img,
            R.drawable.ms_img,R.drawable.kpds_img, R.drawable.kpds_img,
            R.drawable.ms_img, R.drawable.kpds_img, R.drawable.ms_img, R.drawable.jwss_img,
            R.drawable.jwss_img,R.drawable.jwss_img,R.drawable.xhm_img,
            R.drawable.ms_img,R.drawable.kpds_img, R.drawable.kpds_img,
            R.drawable.ms_img, R.drawable.kpds_img, R.drawable.ms_img, R.drawable.jwss_img};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        gridView= (GridView) findViewById(R.id.gridView);
        MyAdapter adapter= new MyAdapter(this,image);//新建自定义适配器
        gridView.setAdapter(adapter);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Intent intent=new Intent();
                intent.putExtra("image",image[position]);
                intent.setClass(MainActivity.this,LargeActivity.class);
                startActivity(intent);
            }//为GridView设置监听事件，点击可查看大图
        });
    }
}

新建一个自定义的类MyAdapter 其代码如下所示：

public class MyAdapter extends BaseAdapter {
    private Context context;
    private int[] image;

    public MyAdapter(Context context, int[] image) {
        this.context = context;
        this.image = image;
    }
     //获取数据长度
    @Override
    public int getCount() {
        return image.length;
    }
    //获取当前item的ID
    @Override
    public Object getItem(int position) {
        return image[position];
    }
     //获取item的ID
    @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(context).inflate(R.layout.item_view,null);
            //实例化ViewHolder控件类
            viewHolder=new ViewHolder();
            //实例化控件
            viewHolder.img= (ImageView) convertView.findViewById(R.id.imageView);
            //把视图和控件设置缓存标签
            convertView.setTag(viewHolder);

        }else {
            //获取已缓存的标签
            viewHolder= (ViewHolder) convertView.getTag();
        }
        //赋值
        viewHolder.img.setImageResource(image[position]);
        return convertView;
    }
    //创建内部类 ViewHolder
    class ViewHolder{
        ImageView img;
    }
}

其点击每一个图片可查看大图 主要是使用Intent 传出数据 接收数据的LargeActivity中的代码如下所示：
其所对应的的xml文件

<?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.gridview.LargeActivity">

    <ImageView
        android:background="@drawable/back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView2"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

接收数据的LargeActivity 代码如下所示：

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

    }
}