【Android 开发教程】GridView

来源:互联网 发布:淘宝logo设计生成器 编辑:程序博客网 时间:2024/05/17 09:07

本章节翻译自《Beginning-Android-4-Application-Development》,如有翻译不当的地方,敬请指出。

原书购买地址http://www.amazon.com/Beginning-Android-4-Application-Development/dp/1118199545/


GridView是一个可滑动的二维平面视图。通常,用GridView去显示一些图片。下面展示如何使用GridView。

1. 创建一个工程,Grid。

2. 在res/drawable-mdpi下面放一些图片。

3. main.xml中的代码。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" ><GridView     android:id="@+id/gridview"    android:layout_width="fill_parent"     android:layout_height="fill_parent"    android:numColumns="auto_fit"    android:verticalSpacing="10dp"    android:horizontalSpacing="10dp"    android:columnWidth="90dp"    android:stretchMode="columnWidth"    android:gravity="center" /></LinearLayout>
4. GridActivity.java中的代码。

public class GridActivity extends Activity {    //---the images to display---    Integer[] imageIDs = {            R.drawable.pic1,            R.drawable.pic2,            R.drawable.pic3,            R.drawable.pic4,            R.drawable.pic5,            R.drawable.pic6,            R.drawable.pic7    };    /** Called when the activity is first created. */    @Override    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(getBaseContext(),                        "pic" + (position + 1) + " selected",                        Toast.LENGTH_SHORT).show();            }        });    }        public class ImageAdapter extends BaseAdapter     {        private Context context;        public ImageAdapter(Context c)        {            context = c;        }        //---returns the number of images---        public int getCount() {            return imageIDs.length;        }        //---returns the item---        public Object getItem(int position) {            return position;        }        //---returns the ID of an item---        public long getItemId(int position) {            return position;        }        //---returns an ImageView view---        public View getView(int position, View convertView,        ViewGroup parent)        {            ImageView imageView;            if (convertView == null) {                imageView = new ImageView(context);                imageView.setLayoutParams(new                    GridView.LayoutParams(85, 85));                imageView.setScaleType(                    ImageView.ScaleType.CENTER_CROP);                imageView.setPadding(5, 5, 5, 5);            } else {                imageView = (ImageView) convertView;            }            imageView.setImageResource(imageIDs[position]);            return imageView;        }    }}
5. 按F11在模拟器上面调试。


就像Gallery和ImageSwitcher一样,在这里,也需要实现ImageAdapter类,然后把它和GridView绑定:

gridView.setAdapter(new ImageAdapter(this));        gridView.setOnItemClickListener(new OnItemClickListener()        {            public void onItemClick(AdapterView<?> parent,            View v, int position, long id)            {                Toast.makeText(getBaseContext(),                        "pic" + (position + 1) + " selected",                        Toast.LENGTH_SHORT).show();            }        });
当图片被选择,就是弹出一个Toast通知。

在getView()方法中,指定了图片的大小,同时,也设置了图片之间的空隙尺寸。

        //---returns an ImageView view---        public View getView(int position, View convertView,        ViewGroup parent)        {            ImageView imageView;            if (convertView == null) {                imageView = new ImageView(context);                imageView.setLayoutParams(new                    GridView.LayoutParams(85, 85));                imageView.setScaleType(                    ImageView.ScaleType.CENTER_CROP);                imageView.setPadding(5, 5, 5, 5);            } else {                imageView = (ImageView) convertView;            }            imageView.setImageResource(imageIDs[position]);            return imageView;        }    }