Grid View

Grid View 也是最近做的项目里面的UI之一，在Tab的一个标签里面嵌入Grid View。

先单独地把GridView拿出来理一遍吧，只是官方网站上的教程的资源都是静态的，没有涉及到数据的动态存取，这一点需要进一步的学习和探索，尤其是数据库SQLite的使用。

英文官方教程地址：http://developer.android.com/resources/tutorials/views/hello-gridview.html

Grid View (不知道中文翻译确切的该叫什么，就不翻译了吧)

GridView是一个以二维，可滚动的形式显示条目的ViewGroup.Grid条目使用ListAdapter自动地被嵌入到页面中。

在本教程中，我们会构建一个grid形式的图片缩略图。当一个图片被选中后，toast信息会显示图片的位置（以数字的形式）。

1.建立一个工程命名为 HelloGridView.

2.找一些你想用的图片，或者直接在官网上下载样例图片,并且把它们都保存到工程的res/drawable/路径。

3.打开 res/layout/main.xml文件并且插入如下代码：

<? xmlversion = "1.0" encoding = "utf-8" ?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 

    android:id="@+id/gridview"

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent"

    android:columnWidth="90dp"

    android:numColumns="auto_fit"

    android:verticalSpacing="10dp"

    android:horizontalSpacing="10dp"

    android:stretchMode="columnWidth"

    android:gravity="center"
/>



GridView会填满整个屏幕，属性很容易解释。



其实呢，我觉得，在将来，如果要进行相关的关于GridView的开发，到官网上将次段代码复制到xml文件里就好，通常来说，这代表了最普遍的用法。



4.打开HelloGridView.java，插入如下代码来完善onCreate()方法:


public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);



    GridView gridview = (GridView) findViewById(R.id.gridview);

    gridview.setAdapter(new ImageAdapter(this));



    gridview.setOnItemClickListener(new OnItemClickListener() {

        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {

            Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();

        }

    });
}

在main.xml布局设置好以后，就要设置内容，实例对象GridView通过findViewById(int)获得。然后使用setAdapter()方法来设置一个自定义适配器（ImageAdapter）（连接器，不知道用什么词语来说Adapter），作为所有将被显示的条目的源。ImageAdapter将在下一步定义。

当条目被点击的时候，需要发生一些事情，实现一些功能，所以setOnItemClickListener()方法被传给一个新的对象AdapterView.OnItemClickListener。这个匿名的实例定义了返回方法OnItemClick()使得弹出一个Toast来显示所选的条目的编号。用户还可以将装个编号用于显示全幅的图片。

5.创建一个新的ImageAdapter类来扩展BaseAdapter:

public class ImageAdapter extends BaseAdapter {

    private Context mContext;



    public ImageAdapter(Context c) {

        mContext = c;

    }



    public int getCount() {

        return mThumbIds.length;

    }



    public Object getItem(int position) {

        return null;

    }



    public long getItemId(int position) {

        return 0;

    }



    // create a new ImageView for each item referenced by the Adapter

    public View getView(int position, View convertView, ViewGroup parent) {

        ImageView imageView;

        if (convertView == null) {  // if it's not recycled, initialize some attributes

            imageView = new ImageView(mContext);

            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));

            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

            imageView.setPadding(8, 8, 8, 8);

        } else {

            imageView = (ImageView) convertView;

        }



        imageView.setImageResource(mThumbIds[position]);

        return imageView;

    }



    // references to our images

    private Integer[] mThumbIds = {

            R.drawable.sample_2, R.drawable.sample_3,

            R.drawable.sample_4, R.drawable.sample_5,

            R.drawable.sample_6, R.drawable.sample_7,

            R.drawable.sample_0, R.drawable.sample_1,

            R.drawable.sample_2, R.drawable.sample_3,

            R.drawable.sample_4, R.drawable.sample_5,

            R.drawable.sample_6, R.drawable.sample_7,

            R.drawable.sample_0, R.drawable.sample_1,

            R.drawable.sample_2, R.drawable.sample_3,

            R.drawable.sample_4, R.drawable.sample_5,

            R.drawable.sample_6, R.drawable.sample_7

    };
}



首先，它实现了BaseAdapter里面一些需要的方法。构造器getCount()用于内部。通常来说，getItem(int)应该返回适配器中特定位置的实际对象（物件），但是此例中不作讨论。同样，getItemId(int)应该返回条目的行id，在这里也补需要。



第一个必要的方法是getView()。此方法为每个添加到适配器中的图片创建一个新的View，当此方法被调用时，一个View就被传入，通常来说这个View是一个可循环利用的对象。因此这里有一个检查，看这个对象是不是空对象。如果是空的，那么一个ImageView就会被实例化，并且按照需要的属性进行配置。



1）setLayoutParams(ViewGroup.LayoutParams)设置图片的宽度和高度，这样就可以实现无论drawable中图片本身大小是多少，各张图片都被重新设置或者裁剪为新的显示大小。



2）setScaleType(ImageView.ScaleType),声明怎样进行裁剪。本例中是朝中心进行裁剪。



3）setPadding(int,int,int,int)定义每一边的填充。   ／／我在我自己的应用中将此行注释掉了



如果传递给getView()的View不是空值，那么本地的ImageView就使用循环的对象来进行初始化。



在getView()方法的最后，传给方法的位置数值用来从mThumbIds队列中选择图片。－－－mThumbIds是ImageView的图片集中地。所有的图片都是用来定义drawable资源中的mThumbIds队列。



6.运行应用。