Android UI 之 GridView 简单使用

Android UI 之 GridView 简单使用

GridView 实际上是一个二维的可滑动表格的 ViewGroup 。可以通过 Adapter 来动态的删减数据。

下面就用一个显示图片的例子讲解其用法。

为应用程序加入一个 GridView

首先在Layout中加入一个 GridView ：

<GridView 
    android:id="@+id/grid_view_use"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

这样，就在 Activity 中加入了一个占满了父控件的 GridView 。但是这样还不够，我们还要为 GridView 设置一系列属性：

android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:stretchMode="columnWidth"
android:gravity="center"

columnWidth 参数为每列指定固定的宽度，在这里，我设置为 90dp；numColumns 指定要 GridView 现实的列数，auto_fit 指的是尽可能多的利用空白空间；verticalSpacing 和 horizontalSpacing 分别是指定列、行之间空白控件的大小；stretchMode 指定的是当空间不足的时候的拉升方法，共有4个值：

• none 禁用拉伸
• spacingWidth 拉伸列之间的空隙
• columnWidth 拉伸单元的大小
• spacingWidthUniform 均匀拉伸每列之间的间距

gravity 指定每个单元内的重心。

为 GridView 添加数据

GridView 是通过 Adapter 实现动态增删数据的。我们需要实现一个Adapter：

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context context) {
        mContext = context;
    }
    @Override
    public int getCount() {
        return mIds.length;
    }

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView iv;
        if (null==convertView) {
            iv = new ImageView(mContext);
            iv.setLayoutParams(new GridView.LayoutParams(85, 85));
            iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            iv.setPadding(8, 8, 8, 8);
        }else {
            iv = (ImageView) convertView;
        }

        iv.setImageResource(mIds[position]);

        return iv;
    }

    private Integer[] mIds = {
            R.drawable.sample_2, R.drawable.sample_1,
            R.drawable.sample_4, R.drawable.sample_6,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_4,
            R.drawable.sample_4, R.drawable.sample_0,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_0,
    };
}

在 ImageAdapter 的构造函数中，通过Context保存实例。并重写了 getCount()、getItem()、getItemId()、getView() 几个方法。在这个例子中，用哟个 Integer 类型数组保存了一些图片索引，供 GridView 使用。在 getView 方法中，对于不存在的 ImageView 对象，予以创建，已经存在的，通过改变资源ID改变图片数据达到优化的效果，然后将 ImageView 对象返回。

• setLayoutParams() 设置 View 的大小，其中的图片通过拉升的办法填充。
• setScaleType() 声明 ImageView 对图片的拉升方式。
• setPadding() 设置 View 的内边距。

然后，我们在 Activity 中把我们的 ImageAdapter 加入到 GridView 之中：

GridView gv = (GridView)findViewById(R.id.grid_view_use);
gv.setAdapter(new ImageAdapter(this));

响应用户点击事件

如果这是一个显示图片的软件，用户可能希望能够点击项，然后展开详细视图。这要求我们响应用户点击事件。

在这个例子中，我们为程序填加显示用户点击了哪一项的功能：

gv.setOnItemClickListener(new GridView.OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
        Toast.makeText(MainActivity.this, "你点击了：" + position, Toast.LENGTH_SHORT).show();
    }
});

其中实现了 OnItemClickListener 中的 onItemClick 方法，并在其中显示当前点击的项。