Android中使用GridView进行应用程序UI布局的教程
0.简介
gridview 和 listview 有共同的父类:abslistview,因此 gridview 和 listview 具有一定 的相似性。gridview与listview的主要区别在于:listview只是在一个方向上分布;而 gridview则会在两个方向上分布。
与listview类似的是,gridview也需要通过adapter来提供显示的数据:开发者既可通 过simpleadapter来为gridview提供数据,也可通过开发 baseadaptei的子类来为gridview 提供数据。不管使用哪种方式,gridview与listview的用法基本是一致的。
1.相关属性:
下面是gridview中的一些属性:
(1)android:columnwidth:设置列的宽度
(2)android:gravity:组件对其方式
(3)android:horizontalspacing:水平方向每个单元格的间距
(4)android:verticalspacing:垂直方向每个单元格的间距
(5)android:numcolumns:设置列数
(6)android:stretchmode:设置拉伸模式,可选值如下: none:不拉伸;spacingwidth:拉伸元素间的间隔空隙 columnwidth:仅仅拉伸表格元素自身 spacingwidthuniform:既拉元素间距又拉伸他们之间的间隔空袭
2.使用示例:
下面通过一个简单的例子来熟悉这个控件的使用: (这里用的adapter我们直接用之2.5.0中教大家写的可复用的baseadapter~)
实现的效果图:
代码实现:
首先是gridview 的 item的布局:item_grid_icon.xml:
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp"> <imageview android:id="@+id/img_icon" android:layout_width="64dp" android:layout_height="64dp" android:layout_centerinparent="true" android:src="@mipmap/iv_icon_1" /> <textview android:id="@+id/txt_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/img_icon" android:layout_centerhorizontal="true" android:layout_margintop="30dp" android:text="呵呵" android:textsize="18sp" /> </relativelayout>
接着我们写个entity实体类:icon.java:
public class icon { private int iid; private string iname; public icon() { } public icon(int iid, string iname) { this.iid = iid; this.iname = iname; } public int getiid() { return iid; } public string getiname() { return iname; } public void setiid(int iid) { this.iid = iid; } public void setiname(string iname) { this.iname = iname; } }
最后是mainactivity的布局以及java代码
activity_main.xml:
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" tools:context=".mainactivity"> <!--numcolumns设置每行显示多少个--> <gridview android:id="@+id/grid_photo" android:layout_width="match_parent" android:layout_height="match_parent" android:numcolumns="3" /> </relativelayout>
mainactivity.java:
public class mainactivity extends appcompatactivity { private context mcontext; private gridview grid_photo; private baseadapter madapter = null; private arraylist<icon> mdata = null; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mcontext = mainactivity.this; grid_photo = (gridview) findviewbyid(r.id.grid_photo); mdata = new arraylist<icon>(); mdata.add(new icon(r.mipmap.iv_icon_1, "图标1")); mdata.add(new icon(r.mipmap.iv_icon_2, "图标2")); mdata.add(new icon(r.mipmap.iv_icon_3, "图标3")); mdata.add(new icon(r.mipmap.iv_icon_4, "图标4")); mdata.add(new icon(r.mipmap.iv_icon_5, "图标5")); mdata.add(new icon(r.mipmap.iv_icon_6, "图标6")); mdata.add(new icon(r.mipmap.iv_icon_7, "图标7")); madapter = new myadapter<icon>(mdata, r.layout.item_grid_icon) { @override public void bindview(viewholder holder, icon obj) { holder.setimageresource(r.id.img_icon, obj.getiid()); holder.settext(r.id.txt_icon, obj.getiname()); } }; grid_photo.setadapter(madapter); grid_photo.setonitemclicklistener(new adapterview.onitemclicklistener() { @override public void onitemclick(adapterview<?> parent, view view, int position, long id) { toast.maketext(mcontext, "你点击了~" + position + "~项", toast.length_short).show(); } }); } }