第30讲 UI组件之 GridView组件

第30讲 UI组件之 GridView组件

1.网格布局组件GridView

GridView是一个ViewGroup(布局控件)，可使用表格的方式显示组件，可滚动的控件。一般用于显示多张图片，比如实现九宫格图，用GridView是首选，也是最简单的。主要用于设置Adapter。

GridView常用的XML属性：

属性名称	描述
android:columnWidth	设置列的宽度。
android:gravity	设置对齐方式。可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多选，用“|”分开。
android:horizontalSpacing	两列之间的间距。
android:numColumns	设置列数。
android:stretchMode	缩放模式，即如何填满空余位置。columnWidth是分配剩余空间给每一列；spacingWidth是分配剩余空间给间隔空隙
android:verticalSpacing	两行之间的间距。

使用方法与Listview类似：（部分代码）

其中的adapter采用BaseAdapter方式构建

private classMyAdapter extends BaseAdapter{

private int[] image;

private Context context;

public MyAdapter(int[] image, Context context) {

super();

this.image = image;

this.context = context;

}

public int getCount() { return image.length; }

public Object getItem(int arg0) { return null; }

public long getItemId(int arg0) { return 0; }

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

int resId=image[position];

ImageView imageView=new ImageView(context);

imageView.setImageResource(resId);

return imageView;

}

}

MainActivity.java部分代码：

GridView gridView=(GridView) findViewById(R.id.gridView1);

int[] image=new int[] {

R.drawable.down,  R.drawable.up,  R.drawable.left,   R.drawable.down,  R.drawable.up,

R.drawable.left,    R.drawable.down, R.drawable.up,  R.drawable.left,  R.drawable.down,

R.drawable.up,  R.drawable.left,  R.drawable.right };

adapter=new MyAdapter(image,this)；

gridView.setAdapter(adapter);

GridView属性

android:numColumns="3" //列数 可以设置为auto_fit，根据columnWidth和Spacing来自动计算。

android:columnWidth="30dp"

android:horizontalSpacing="10dp"

android:verticalSpacing="10dp"

android:stretchMode="columnWidth"

//如何填满空余位置，columnWidth是分配剩余空间给每一列；spacingWidth是分配剩余空间给间隔空隙

二、丰富GridView

实现如下形式的GridView，图片带名字

首先需要构建一个layout——book.xml，用来装载名字和图片。

然后更改adapter

public class MainActivity extends ActionBarActivity {

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

GridView gridView=(GridView)findViewById(R.id.gridView1);

//图片数组

int[] image=newint[] {

R.drawable.beihang, R.drawable.beihang, R.drawable.beihang,

R.drawable.beihang, R.drawable.beihang, R.drawable.beihang,

R.drawable.beihang,R.drawable.beihang, R.drawable.beihang,

R.drawable.beihang, R.drawable.beihang, R.drawable.beihang};

//设置为图片名称

String[] bookname=new String[] {

"java1","java2", "java3", "java4", "java5","java6",

"java7","java8", "java9", "java10", "java11","java12" };

//为GridView设置适配器

gridView.setAdapter(new MyAdapter(image,this,bookname));

//注册监听事件

gridView. setOnItemClickListener(newOnItemClickListener() {

public void onItemClick(AdapterView<?> agr0, View agr1, int agr2, longagr3) {

        Toast.makeText(MainActivity.this,agr2+"-"+ agr3, Toast.LENGTH_SHORT).show();


}

});

}

 

//自定义适配器

public class MyAdapter extends BaseAdapter {

private int[] image;

private Context context;

private String[] bookname;

public MyAdapter(int[] image,Context context, String[] bookname) {

super();

this.image = image;

this.context = context;

this.bookname = bookname;

}

public int getCount() { return image.length;}

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

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

//创建View方法

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

int resId=image[position];

String name=bookname[position];

//设置ImageView对象布局

ViewGroup group=(ViewGroup) getLayoutInflater().inflate(R.layout.book,null);

ImageView imageView=(ImageView) group.findViewById(R.id.imageView1);

//为ImageView设置图片资源

imageView.setImageResource(resId);

TextView textView=(TextView) group.findViewById(R.id.textView1);

textView.setText(name);

return group;

}

}