Android入门笔记 - 界面开发 - GridView, BaseAdapter

今天我们来看一下网格视图和最常用的适配器BaseAdapter：

• GridView
• BaseAdapter
  

贴代码：

1. res/layout/main_activity.xml

网格视图layout：

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:columnWidth="90dp"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</GridView>

2. src/com.example.demo_ui3/MainActivity.java

主程序Activity：

package com.example.demo_ui3;

import adapter.ImageAdapter;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends Activity {
	private Context ctx = this;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		GridView grid = (GridView) findViewById(R.id.gridView1);
		grid.setAdapter(new ImageAdapter(ctx));
		grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View v, int position,
					long id) {
				showToast("position:"+position+",id:"+id);
			}
		});
	}

	@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;
	}
	
	public void showToast(String words){
		Toast.makeText(ctx, words, Toast.LENGTH_SHORT).show();
	}

}

3. src/adapter/ImageAdapter.java

BaseAdapter 的实现

package adapter;

import com.example.demo_ui3.R;

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

public class ImageAdapter extends BaseAdapter {
	private Context ctx;
	private int[] imgs = { R.drawable.img1, R.drawable.img2, R.drawable.img3,
			R.drawable.img4, R.drawable.img5, R.drawable.img6, R.drawable.img7,
			R.drawable.img8, R.drawable.img9 };

	public ImageAdapter(Context ctx) {
		this.ctx = ctx;
	}

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

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

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView view = new ImageView(ctx);
		view.setImageResource(imgs[position]);
		return view;
	}

}

解释篇：

代码很简单吧！首先从MainActivity开始说，我们看到 activity_main.xml 就知道里面显示的内容就只有一个网格视图。里面配置的属性：

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:columnWidth="90dp"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</GridView>

android:verticalSpacing 水平间距

android:horizontalSpacing 垂直间距

android:columnWidth  一个格子占用的宽度

android:columns 一行有多少个格子

android:stretchMode 伸展的参照

android:gravity 格子中的元素重力选项

这些是最基本的，大家可以去查一下相关资料，了解一下其他的属性

我们来看主程序是怎么加载网格视图的内容的：

GridView grid = (GridView) findViewById(R.id.gridView1);
grid.setAdapter(new ImageAdapter(ctx));

我们并没有看到具体的显示数据在哪里，因为都被写到了ImageAdapter中，这样写肯定是不科学的，这里只是为了做演示，所以写的简单一点。其实我们要显示的内容也应该通过一个list或者什么集合类当做参数传入，这样可扩张性更好。

我们来看看ImageAdapter的实现：

public class ImageAdapter extends BaseAdapter {
	private Context ctx;
	private int[] imgs = { R.drawable.img1, R.drawable.img2, R.drawable.img3,
			R.drawable.img4, R.drawable.img5, R.drawable.img6, R.drawable.img7,
			R.drawable.img8, R.drawable.img9 };

	public ImageAdapter(Context ctx) {
		this.ctx = ctx;
	}

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

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

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView view = new ImageView(ctx);
		view.setImageResource(imgs[position]);
		return view;
	}

}

注意，只要是集成与BaseAdapter都需要重写以上@Override的方法，其中:

构造函数：主要传入所属activity的Context， 以及一些初始化工作。

getCount() ：得到要显示的资源的条目总数。

getItem()：得到某个位置上要显示的资源。

getItemId() ：得到位置的ID。

getView() ：得到要显示的视图。

最后一个getView()方法是最重要的，做的工作就是构造一个视图给网格视图的某一个格子，就是在构造要填充的数据。

我们可以看到这里只是简单的构造了一个图片，然后设置要显示的图片，最后将图片view返回，这样系统就会自动将这个view放在相应的位置上。

当然也可以构造比较复杂的内容，比如在一个layout中有图片有文字，这就需要Inflater来实现，我们将在后面展示。

好了，今日完毕。