程序员人生 网站导航

A021-列表容器之GridView

栏目:综合技术时间:2016-03-22 09:10:00

概述

GridView是Android的另外一个列表容器,用法也跟ListView类似,它的布局是1个网格,1行可以有多个项,并且全部视图可以转动,我们常见的利用有手机中的图库、launcher里面的利用列表、类似微信多张图片等,总的来讲,ListView主要利用于单列多行的列表,但是GridView主要利用于多行多列的网状布局。

案例

GridView

上面的运行结果就是GridView的典型效果,每一个item是1张固定大小的图片,这里让它自适应屏幕来填充完全个屏幕的宽度。

实现进程

GridView布局
layout/activity_gridview.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <GridView android:id="@+id/gridView" android:layout_width="match_parent" android:layout_height="match_parent" android:columnWidth="90dp" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:cacheColorHint="#00000000" android:listSelector="#00000000" android:scrollbars="none" android:fadeScrollbars="true" android:fastScrollEnabled="true" android:fadingEdge="none" android:fadingEdgeLength="10dp" android:stackFromBottom="true" android:transcriptMode="alwaysScroll" android:drawSelectorOnTop="false" android:gravity="center"/> LinearLayout>

相干属性解析:
1.android:numColumns=”auto_fit” //GridView的列数设置为自动
2.android:columnWidth=”90dp ” //每列的宽度,也就是Item的宽度
3.android:stretchMode=”columnWidth”//缩放与列宽大小同步
4.android:verticalSpacing=”10dp” //两行之间的边距
5.android:horizontalSpacing=”10dp” //两列之间的边距
6.android:cacheColorHint=”#00000000” //去除拖动时默许的黑色背景
7.android:listSelector=”#00000000” //去除选中时的黄色底色
8.android:scrollbars=”none” //隐藏GridView的转动条
9.android:fadeScrollbars=”true” //设置为true就能够实现转动条的自动隐藏和显示
10.android:fastScrollEnabled=”true” //GridView出现快速转动的按钮(最少转动4页才会显示)
11.android:fadingEdge=”none” //GridView衰落(褪去)边沿色彩为空,缺省值是vertical。(可以理解为上下边沿的提示色)
12.android:fadingEdgeLength=”10dip” //定义的衰落(褪去)边沿的长度
13.android:stackFromBottom=”true” //设置为true时,你做好的列表就会显示你列表的最下面
14.android:transcriptMode=”alwaysScroll” //当你动态添加数据时,列表将自动往下转动最新的条目可以自动转动到可视范围内
15.android:drawSelectorOnTop=”false” //点击某条记录不放,色彩会在记录的后面成为背风景,内容的文字可见(缺省为false)

子项
layout/layout_grid_item.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 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代码

package com.devilwwj.androiddevelopcourse.activities; import android.content.Context; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.ImageView; import com.devilwwj.androiddevelopcourse.R; import com.nostra13.universalimageloader.core.ImageLoader; /** * A021-列表容器之GridView * * @author devilwwj */ public class GridViewTestActivity extends ActionBarActivity implements OnItemClickListener { private GridView gridView; private Context mContext; private ImageLoader imageLoader; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_gridview); mContext = GridViewTestActivity.this; imageLoader = ImageLoader.getInstance(); 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.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.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(); } // 这里只是摹拟,实际开发可能需要加载网络图片,可使用ImageLoader这样的图片加载框架来异步加载图片 imageLoader.displayImage("drawable://" + mThumbIds[position], viewHolder.itemImg); return convertView; } class ViewHolder { ImageView itemImg; } } }

在Activity中我们做了以下几件事:
1、初始化控件
2、定义图片资源mThumbIds
3、定义ImageAdapter

上面代码中我们用到了ImageLoader这个图片加载框架,使用它来加载本地drawable资源,实际开发中1般不会这样用,我们传进去的uri是1个图片网络地址,具体的使用方法可以百度学习,这里简单介绍步骤:
1、 初始化ImageLoader配置
2、获得ImageLoader实例,调用其displayImage方法异步加载图片

最后

GridView的用法与ListView类似,都需要设置Adapter来填充数据,除填充数据以外,我们可能还需要添加每项的点击事件,这时候需要设置它的监听事件,与ListView设置监听事件1样,这里不赘述,代码中使用到的图片来自官方,可以参考以下地址http://developer.android.com/intl/zh-cn/guide/topics/ui/layout/gridview.html,本节课内容就这么多,谢谢。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐