A021-列表容器之GridView

概述

GridView是Android的另一个列表容器,用法也跟ListView类似,它的布局是一个网格,一行可以有多个项,并且整个视图可以滚动,我们常见的应用有手机中的图库、launcher里面的应用列表、类似微信多张图片等,总的来说,ListView主要应用于单列多行的列表,然而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,本节课内容就这么多,谢谢。

转载请注明:IT_xiao小巫 http://blog.csdn.net/wwj_748

原文发布于微信公众号 - 小巫技术博客(wwjblog)

原文发表时间:2015-10-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

安卓开发_慕课网_百度地图_添加覆盖物

321100
来自专栏Android先生

项目需求讨论-Android 自定义Dialog实现步骤及封装

在项目中,我们会遇到各种各样的界面需求,比如对话框和选择框,都是会配合具体项目的UI界面来做,而不是说用自带的弹出框。比如下面在登录界面的二个对话框效果。都是我...

39130
来自专栏Android干货园

Android自定义组合控件---教你如何自定义下拉刷新和左滑删除

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/80...

24610
来自专栏codelang

打造万能的EmptyLayout

14720
来自专栏向治洪

BottomSheet底部动作条使用

底部动作条 底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额...

28380
来自专栏蜉蝣禅修之道

android控制view的大小和位置(一)

21240
来自专栏Android小菜鸡

popupWindow的封装与学习

  本篇主要富含了对PopupWindow的封装,实现动画弹窗的例子。可用于相册选择、点赞等等。同时封装使用了建造者模式,对于补间动画的运用同样有较高的学习价值...

12910
来自专栏androidBlog

Android 自定义 MarqueeView 实现跑马灯效果 - 使用说明

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

46210
来自专栏GIS讲堂

打造属于自己的安卓menu

看下面的menu菜单,是原装的菜单,好丑陋哦,类似于小编这么爱美的人来说,纯粹就是天大的打击,接受不起。于是,小编就发奋图强,努力,努力,再努力,终于,将菜单改...

17440
来自专栏分享达人秀

AdapterViewFlipper轻松完成图片轮播

上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilpper的使用。 一、认识Adapter...

27450

扫码关注云+社区

领取腾讯云代金券