第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;
}
}