在Android程序设计中GridView跟ListView都是比较常用的多控件布局,GridView的用法很多,主要凸显的是那种网格式布局,既有横向也有纵向的数据显示。
基本用法
效果图
实现思路是
1、初始化控件
2、定义图片资源mThumbIds
3、定义ImageAdapter
创建item布局
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/iv_head"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
创建activity布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<GridView
android:id="@+id/gview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:columnWidth="80dp"
android:stretchMode="columnWidth"
></GridView>
</LinearLayout>
Activity代码
public class GridViewTestActivity extends ActionBarActivity implements OnItemClickListener {
private GridView gridView;
private Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gridview);
mContext = GridViewTestActivity.this;
gridView = (GridView) this.findViewById(R.id.gridView);
gridView.setAdapter(new ImageAdapter(this));
}
// 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.drwable.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
};
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// TODO: 点击列表跳转到其他页面
}
}
适配器
private class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context context) {
this.mContext = context;
}
@Override
public int getCount() {
return mThumbIds.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.layout_grid_item, parent, false);
viewHolder = new ViewHolder();
viewHolder.itemImg = (ImageView) convertView.findViewById(R.id.iv_head);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.itemImg.setImageResource(mThumbIds[position]);
return convertView;
}
class ViewHolder {
ImageView itemImg;
}
}
缺少的资源,大家可以自行配置,图片的话,百度图片搜索就能下载解决
常用api
-
android:numColumns=”auto_fit” //GridView的列数设置为自动
-
android:columnWidth=”90dp " //每列的宽度,也就是Item的宽度
-
android:stretchMode=”columnWidth"//缩放与列宽大小同步
-
android:verticalSpacing=”10dp” //两行之间的边距
-
android:horizontalSpacing=”10dp” //两列之间的边距
-
android:cacheColorHint="#00000000" //去除拖动时默认的黑色背景
-
android:listSelector="#00000000" //去除选中时的黄色底色
-
android:scrollbars="none" //隐藏GridView的滚动条
-
android:fadeScrollbars="true" //设置为true就可以实现滚动条的自动隐藏和显示
-
android:fastScrollEnabled="true" //GridView出现快速滚动的按钮(至少滚动4页才会显示)
-
android:fadingEdge="none" //GridView衰落(褪去)边缘颜色为空,缺省值是vertical。(可以理解为上下边缘的提示色)
-
android:fadingEdgeLength="10dip" //定义的衰落(褪去)边缘的长度
-
android:stackFromBottom="true" //设置为true时,你做好的列表就会显示你列表的最下面
场景解决方案
九宫格实现
实现思路是
1,设置属性android:numColumns="3",android:stretchMode=”columnWidth",android:columnWidth属性不要设置
2,数据最多准备9个
3,android:verticalSpacing和android:horizontalSpacing行和列间隔按照需求美化调整即可
结语
网格布局还是非常简单的,使用起来很方便只需要适配器设置好就可以了,想要熟练还是得多多练习,同样大家有什么问题也可以评论留言,我会及时回复的。