A021-列表容器之GridView

太过爱你忘了你带给我的痛 2022-08-09 09:55 21阅读 0赞

# 概述 #

GridView是Android的另一个列表容器，用法也跟ListView类似，它的布局是一个网格，一行可以有多个项，并且整个视图可以滚动，我们常见的应用有手机中的图库、launcher里面的应用列表、类似微信多张图片等，总的来说，ListView主要应用于单列多行的列表，然而GridView主要应用于多行多列的网状布局。

# 案例 #

![GridView][]

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

## 实现过程 ##

GridView布局  
layout/activity\_gridview.xml

<?xml version="1.0" encoding="utf-8"?>
    <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

<?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" >
    
        <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资源，实际开发中一般不会这样用，我们传进去的uri是一个图片网络地址，具体的使用方法可以百度学习，这里简单介绍步骤：  
1、 初始化ImageLoader配置  
2、获取ImageLoader实例，调用其displayImage方法异步加载图片

# 最后 #

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

> 转载请注明：IT\_xiao小巫 [http://blog.csdn.net/wwj\_748][http_blog.csdn.net_wwj_748]

[GridView]: /images/20220731/48943d0f50bf4764a8f2f312884457b9.png
[http_developer.android.com_intl_zh-cn_guide_topics_ui_layout_gridview.html]: http://developer.android.com/intl/zh-cn/guide/topics/ui/layout/gridview.html
[http_blog.csdn.net_wwj_748]: http://blog.csdn.net/wwj_748