Android控件之GridView自定义

1、GridView自定义网格布局

自定义网格布局就是要求，为网格的定义一个布局文件，然后使用这个布局文件去渲染网格。同时为GridView绑定点击事件。效果如下图

2、代码介绍

Activity所对应的布局文件activity_main.xml，里面只有一个GridView控件。代码如下

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.gridview2.MainActivity" >

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnWidth="90dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:gravity="center"
        android:stretchMode="columnWidth"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >
    </GridView>
    
</RelativeLayout>

GridView中每一个网格的布局，使用LinearLayout布局，布局代码item_view.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:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_menu_gallery" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

最后我们在java代码中使用LayoutInflate类将item_view.xml文件的View得到，然后将这个view用来给每一个网格布局。java代码如下

package com.example.gridview2;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
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 MainActivity extends Activity {

	private GridView gridView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		gridView = (GridView) findViewById(R.id.gridView1);
		// 为gridview填充内容
		gridView.setAdapter(new MyAdapter(this));
		// 绑定单击事件
		gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

			/**
			 * parent : 点击的控件的父控件这里就是GridView
			 * View : 点击的控件 LinearLayout
			 * position : 点击的控件的位置
			 * id : 点击的控件的id
			 */
			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				System.out.println("parent="+parent);
				System.out.println("view="+view);
				System.out.println("position="+position);
				System.out.println("id="+id);
				TextView tv = (TextView) view.findViewById(R.id.textView1);
				Toast.makeText(MainActivity.this, tv.getText(), Toast.LENGTH_SHORT).show();
			}
		});
	}

	static class MyAdapter extends BaseAdapter{

		private Context context;
		public MyAdapter(Context context){
			this.context = context;
		}
		private String[] names = {"金融","转账","理财",
				"金融","转账","理财",
				"金融","转账","理财",
				"金融","转账","理财"};
		private int[] icons = {R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher,
				R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher,
				R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher,
				R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher
				};
		@Override
		public int getCount() {
			return names.length;
		}

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

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

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// 使用LayoutInflate类，得到每个item的View布局类
			LayoutInflater inflater = LayoutInflater.from(context);
			View view = inflater.inflate(R.layout.item_view, null);
			// 将item的布局view里面的ImageView和TextView设置
			ImageView imageView = (ImageView) view.findViewById(R.id.imageView1);
			imageView.setImageResource(icons[position]);
			TextView TextView =  (android.widget.TextView) view.findViewById(R.id.textView1);
			TextView.setText(names[position]);
			// 返回LinearLayout布局的View
			return view;
		}
		
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}