`
bywyu
  • 浏览: 20207 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Grid View

阅读更多

网格布局:是一个ViewGroup以网格显示它的子视图(view)元素,即二维的、滚动的网格。网格元素通过ListAdapter自动插入到网格。ListAdapter跟上面的列表布局是一样的,这里就不重复累述了。

下面也通过一个例子来,创建一个显示图片缩略图的网格。当一个元素被选择时,显示该元素在列表中的位置的消息。

1)、首先,将上面实践截取的图片放入res/drawable/

2)、res/layour/main.xml的内容置为如下:这个GridView填满整个屏幕,而且它的属性都很好理解,按英文单词的意思就对了。

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridview"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>
3)、然后,HelloWorld.java文件中onCreate()函数如下:
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));

        gridview.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(HelloWorld.this, " " + position, Toast.LENGTH_SHORT).show();
            }
        });
    } 
onCreate()函数跟通常一样,首先调用超类的onCreate()函数函数,然后通过setContentView()为活动
(Activity)加载布局文件。紧接着是,通过GridView的id获取布局文件中的gridview,然后调用它的
setListAdapter(ListAdapter)函数填充它,它的参数是一个我们自定义的ImageAdapter。后面的工作跟列表布局中一
样,为监听网格中的元素被点击的事件而做的工作。

4)、实现我们自定义ImageAdapter,新添加一个类文件,它的代码如下:

package com.javaeye.bywyu;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // references to our images
    private Integer[] mThumbIds = {
            R.drawable.linearlayout1, R.drawable.linearlayout2,
            R.drawable.linearlayout3, R.drawable.listview,
            R.drawable.relativelayout, R.drawable.tablelayout
    };
}  
ImageAdapter类扩展自BaseAdapter,所以首先得实现它所要求必须实现的方法。构造函数和getcount()函数很好理解,而
getItem(int)应该返回实际对象在适配器中的特定位置,但是这里我们不需要。类似地,getItemId(int)应该返回元素的行号,但是这
里也不需要。

这里重点要介绍的是getView()方法,它为每个要添加到ImageAdapter的图片都创建了一个新的View。当调用这个方法时,一个View是循环再用的,因此要确认对象是否为空。如果是空的话,一个ImageView就被实例化且配置想要的显示属性:

    * setLayoutParams(ViewGroup.LayoutParams):设置View的高度和宽度,这确保不管drawable中图片的大小,每个图片都被重新设置大小且剪裁以适应这些尺寸。
    * setScaleType(ImageView.ScaleType):声明图片应该向中心剪裁(如果需要的话)。
    * setPadding(int, int, int, int):定义补距,如果图片有不同的横纵比,小的补距将导致更多的剪裁以适合设置的ImageView的高度和宽度。

如果View传到getView()不是空的,则本地的ImageView初始化时将循环再用View对象。在getView()方法末尾,position整数传入setImageResource()方法以从mThumbIds数组中选择图片。
分享到:
评论

相关推荐

    GridView Grid View 翻页 GridView翻页 GridPager

    GridView Grid View 翻页 GridView翻页 用户控件自定义翻页 |&lt;&lt; &lt;&lt; 1 2 3 4 5 &gt;&gt; &gt;&gt;| 总页:T 当前:N M件

    jQuery grid view plugin - jQuery表格插件

    jQuery Grid View插件是一种强大的工具,它允许开发者在网页上创建功能丰富的表格,提供数据的显示、排序、分页和过滤等功能。这个插件基于流行的JavaScript库jQuery,它简化了前端开发过程,使得即便是初学者也能...

    export grid view with images.

    在IT领域,"export grid view with images"是一个常见的需求,特别是在数据可视化和报表生成的场景中。这个主题涉及到如何将包含图像的网格视图导出为PDF格式。下面将详细探讨这一技术及其相关知识点。 首先,网格...

    GOOGLE官网 grid view api guide

    因为大多数时候都上不了google,保存下来以便之后学习使用

    Sample grid view in c#.zip

    "Sample grid view in c#.zip"这个压缩包文件很可能是提供了一个示例项目,用于展示如何在C#中使用GridView控件。GridView-master可能是指该项目的主目录或者分支名。 GridView控件的功能非常强大,它允许开发者对...

    data grid view 合并单元格

    标题“data grid view 合并单元格”就是针对这一需求,它涵盖了如何在`DataGridView`中实现单元格的合并。 在描述中提到,提供了“demo”和“源码”,这意味着我们可以直接通过示例代码来学习和理解这个功能。`...

    (0017)-iOS/iPhone/iPAD/iPod源代码-视图布局(View Layout)-Grid View

    在iOS开发中,视图布局(View Layout)是构建用户界面的关键部分,特别是在设计复杂的界面如网格视图(Grid View)时。网格视图是一种显示数据的高效方式,它将内容组织成行和列,常见于照片应用、电商应用的商品...

    Laravel开发-grid-view

    在Laravel框架中,开发一个"grid-view"通常指的是创建一个数据展示的表格视图,这种视图在后台管理系统中非常常见,用于高效地展示和操作大量数据。Grid View允许用户以整洁、有序的方式查看数据库中的信息,并进行...

    Laravel开发-grid-view-vue

    在Laravel框架中,开发一个基于Vue.js的“grid view”是提高Web应用程序用户体验的有效方式。Grid View是一种数据展示模式,通常用于展示大量结构化数据,允许用户进行筛选、排序和分页操作。在这个名为“Laravel...

    Flip Grid View(iPhone源代码)

    来源:Licence:Custom... 实现动态翻页切换内容的网格化视图(Grid View)效果。界面上有多个网格子视图,每个网格子视图都可以自动翻页切换页面从而改变内容。 Code4App编译测试,适用环境:Xcode 4.5, iOS 6.0。

    动态生成Grid View

    在ASP.NET开发中,`GridView`控件是一个非常常见的数据展示工具,它允许开发者以表格的形式展示数据库或其他数据源中的数据。本知识点主要探讨如何动态生成`GridView`以及将其内容导出为PDF,这对于数据报告、打印...

    Laravel开发-grid-view .zip

    在本文中,我们将深入探讨如何在Laravel框架中实现Grid View,这是一个强大的工具,用于以表格形式展示数据,便于用户浏览和操作。Grid View通常用于数据密集型应用,如后台管理系统,它允许开发者以整洁、有组织的...

    Grid(list)view

    在Android开发中,`GridView`和`ListView`是两种非常重要的布局组件,它们主要用于展示大量数据,具有良好的可滚动性和自适应性。本教程将详细讲解`GridView`和`ListView`的整合及其常见应用场景。...

    Sliding Grid View(iPhone源代码)

     以滑动的方式动态刷新Grid View或者Table View的内容。具体来说,对于Grid View(网格视图)的每个子视图的内容,新内容从上往下移动代替旧内容;对于Table View(表格)的每一行单元格(Cell),新内容从左往右...

    Android Cool Drag And Drop Grid View

    AndroidCoolDragAndDropGridView 非常好用,列可拖动的GridView.

    Unity3D插件 - Grid Framework v1.3.1

    Unity3D 超好用插件,Grid 绘制多边形网格,多用于2D 二维屏幕

    Google Meet Grid View (New)-crx插件

    什么是Google Meet Grid View? 添加一个切换以在Google Meet中使用网格布局。 Google Meet的Grid View允许添加一个按钮以使用Google Meet中的网格布局。 Google Meet的Grid View在右上栏(聊天和参与者列表旁边)...

    Grid View For Google Meet-crx插件

    Google Meet的Grid View在右上栏(聊天和参与者列表旁边)添加了一个按钮,以在Google Meet中启用网格视图。 网格视图为每个参与者提供了大小相等的视频,供没有主要发言者的会议中使用(例如在家庭无声会议中工作)...

    分析ASP.NET2.0中Grid View的数据处理机制.pdf

    ***是微软推出的一个用于开发基于Windows系统的Web应用程序的开发框架。*** 2.0是该框架的一个版本,它增加了很多新的控件和功能,使得Web开发变得更加简单和高效。GridView是*** 2.0中引入的一个功能强大的数据控件...

Global site tag (gtag.js) - Google Analytics