通过GridView实现Toast

通过GridView实现上述图片

1.首先设计UI界面

在 res目录的layout目录下新建gird_view.xml文件，代码如下：

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/grid_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numColumns="4"
        android:stretchMode="columnWidth" >
    </GridView>

</LinearLayout>

小贴士：

       其中numColumns属性规定了GridView每一行显示多少个格子；

       stretchMode属性设定了每个格子的缩放模式，columnWidth参数是以长宽同步的方式填充每个方格；

在这个GridView中需要用元素填充每个方格，所以要设定一个fruit_item.xml文件对其进行填充，同样建在res目录的layout目录下，UI界面设计代码如下：

<?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="wrap_content" >

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/apple_pic" />

    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="10dip"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/fruit_image"
        android:text="123" />

</RelativeLayout>

      其中ImageView中src仅为填充图形，在运行时会被其他图形填充，同理TextView中的text同样会被替换掉。

2.编写activity中如图实现显示的方法

在src包内新建Fruit.java文件，定义GridView中每个格子要获取的组件内容，代码如下：

package com.example.uilistviewtest;

public class Fruit {

	private String name;

	private int imageId;

	public Fruit(String name, int imageId) {
		this.name = name;
		this.imageId = imageId;
	}

	public String getName() {
		return name;
	}

	public int getImageId() {
		return imageId;
	}

}

创建FruitAdapter.java文件，这是一个适配器，用于GridView组件在每个格子中的显示（获取fruit_item.xml中的ImageView和TextView），也是最重要的一部分，以下是代码：

package com.example.uilistviewtest;

import java.util.List;

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

public class FruitAdapter extends ArrayAdapter<Fruit> {

	private int resourceId;

	public FruitAdapter(Context context, int textViewResourceId,
			List<Fruit> objects) {
		super(context, textViewResourceId, objects);
		resourceId = textViewResourceId;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		Fruit fruit = getItem(position);
		View view;
		ViewHolder viewHolder;
		if (convertView == null) {
			view = LayoutInflater.from(getContext()).inflate(resourceId, null);
			viewHolder = new ViewHolder();
			viewHolder.fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
			viewHolder.fruitName = (TextView) view.findViewById(R.id.fruit_name);
			view.setTag(viewHolder);
		} else {
			view = convertView;
			viewHolder = (ViewHolder) view.getTag();
		}
		viewHolder.fruitImage.setImageResource(fruit.getImageId());
		viewHolder.fruitName.setText(fruit.getName());
		return view;
	}
	
	class ViewHolder {
		
		ImageView fruitImage;
		
		TextView fruitName;
		
	}

}

最后，编写MainActivity.java中的代码用于实现显示每个格子中的内容并实现点击事件的后Toast内容显示，代码如下：

package com.example.uilistviewtest;

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

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

public class MainActivity extends Activity {

	private List<Fruit> fruitList = new ArrayList<Fruit>();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.gird_view);
		initFruits();
		FruitAdapter adapter = new FruitAdapter(MainActivity.this,
				R.layout.fruit_item, fruitList);
		GridView gridView = (GridView) findViewById(R.id.grid_view);
		gridView.setAdapter(adapter);
		gridView.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				Fruit fruit = fruitList.get(position);
				Toast.makeText(MainActivity.this, fruit.getName(),
						Toast.LENGTH_SHORT).show();
			}
		});
	}

	private void initFruits() {
		Fruit apple = new Fruit("苹果", R.drawable.apple_pic);
		fruitList.add(apple);
		Fruit banana = new Fruit("香蕉", R.drawable.banana_pic);
		fruitList.add(banana);
		Fruit orange = new Fruit("橘子", R.drawable.orange_pic);
		fruitList.add(orange);
		Fruit watermelon = new Fruit("西瓜", R.drawable.watermelon_pic);
		fruitList.add(watermelon);
		Fruit pear = new Fruit("梨", R.drawable.pear_pic);
		fruitList.add(pear);
		Fruit grape = new Fruit("葡萄", R.drawable.grape_pic);
		fruitList.add(grape);
		Fruit pineapple = new Fruit("菠萝", R.drawable.pineapple_pic);
		fruitList.add(pineapple);
		Fruit strawberry = new Fruit("草莓", R.drawable.strawberry_pic);
		fruitList.add(strawberry);
		Fruit cherry = new Fruit("樱桃", R.drawable.cherry_pic);
		fruitList.add(cherry);
		Fruit mango = new Fruit("芒果", R.drawable.mango_pic);
		fruitList.add(mango);
	}

}

到这里运行后就可以实现图中的内容了。