表视图-GridView

与ListView用于显示列视图类似,GridView用于显示二维列表视图。下面通过一个简化的相册例子来演示GrdView的基本用法。

主界面如下。

Main.xml

1.   <?xml version="1.0" encoding="utf-8"?>

2.   <GridView

xmlns:android="http://schemas.android.com/apk/res/android"

3.   android:id="@+id/gridview"

4.   android:layout_width="fill_parent"

5.   android:layout_height="fill_parent"

6.   android:numColumns="auto_fit" 第6行android:numColumns="auto_fit" 设置列数为根据屏幕宽度自动适配。

7.   android:verticalSpacing="8dp"   第7、8行的意义是设置了行间隔和列间隔都是8dp。

8.   android:horizontalSpacing="8dp"

9.   android:columnWidth="80dp"  第9行设置每列的宽度,也就是item的宽度为80dp。

10.  android:stretchMode="columnWidth"  第10行设置将item里的内容缩放到列宽大小同步,即缩放到80dp。

11.  android:gravity="center"  />

主界面没有采用Layout布局,而是直接用Gridview。

第6行android:numColumns="auto_fit" 设置列数为根据屏幕宽度自动适配。

第7、8行的意义是设置了行间隔和列间隔都是8dp。

第9行设置每列的宽度,也就是item的宽度为80dp。

第10行设置将item里的内容缩放到列宽大小同步,即缩放到80dp。

第11行设置将显示的内容放在item的中央位置。

GridView里每个item的布局如下。

Griditem.xml

1.   <?xml version="1.0" encoding="utf-8"?>

2.   <RelativeLayout

3.   xmlns:android="http://schemas.android.com/apk/res/android"

4.   android:id="@+id/R1"

5.   android:layout_height="wrap_content"

6.   android:layout_width="fill_parent">

7.   <ImageView

8.   android:id="@+id/ItemImage"

9.   android:layout_height="wrap_content"

10.  android:layout_width="wrap_content"

11.  android:layout_centerHorizontal="true"/>

12.  <TextView

13.  android:id="@+id/ItemText"

14.  android:layout_below="@+id/ItemImage"

15.  android:layout_width="wrap_content"

16.  android:layout_height="wrap_content"

17.  android:text="名字"

18.  android:layout_centerHorizontal="true"   />

19.  </RelativeLayout>

这个item布局和上个例子中的布局类似,item内有一个imageview和一个textview,textview位于imageview的下方。

最后就是Java源代码主要部分。

MyGridView.java

1.   public void onCreate(Bundle savedInstanceState) {

2.   super.onCreate(savedInstanceState);

3.   setContentView(R.layout.main);

4.   GridView gridview;

5.   String[] titles={"赵1","钱2","张三","李四","王五"};

6.   int buf=R.drawable.sample;

7.   int[] resIds={buf,buf,buf,buf,buf};

8.   gridview=(GridView)this.findViewById(R.id.gridview);

9.   gridview.setAdapter(new MyAdapter(titles,resIds));

10.  gridview.setOnItemClickListener(new

AdapterView.OnItemClickListener(){

11.  @Override

12.  public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long

arg3) {

13.  TextView title = (TextView)arg1.findViewById(R.id.itemTitle);

14.  Log.d("mygridview:","我单击的是:"+title.getText()+"的照片");

15.  }});}

16.  public class MyAdapter extends BaseAdapter {

17.  String[] itemTitles, itemTexts;

18.  int[] itemImageRes;

19.  public MyAdapter(String[] itemTitles,int[] itemImageRes)

20.  {

21.  this.itemTitles=itemTitles;

22.  this.itemImageRes=itemImageRes;

23.  }

24.  public int getCount() {

25.  return itemTitles.length;

26.  }

27.  public Object getItem(int position) {

28.  return itemTitles[position];

29.  }

30.  public long getItemId(int position) {

31.  return position;

32.  }

33.  public View getView(int position, View convertView, ViewGroup parent)
     {

34.  if (convertView == null)

35.  {

36.  LayoutInflater inflater =

(LayoutInflater)MyListView.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

37.  View itemView =
inflater.inflate(R.layout.item, null);

38.  TextView title = (TextView)
itemView.findViewById(R.id.itemTitle);

39.  title.setText(itemTitles[position]);

40.  ImageView image = (ImageView)
itemView.findViewById(R.id.itemImage);

41.  image.setImageResource(itemImageRes[position]);

42.  return itemView;

43.  } else{

44.  TextView title = (TextView)

convertView.findViewById(R.id.itemTitle);

45.  title.setText(itemTitles[position]);

46.  ImageView image = (ImageView)

convertView.findViewById(R.id.itemImage);

47.  image.setImageResource(itemImageRes[position]);

48.  return convertView;

49.  }}}}

代码部分和上个例子类似,其中图片资源我选了一个取名为sample的图片,该图片宽度超过测试手机屏幕的一半,顺便测试一下girdview的stretchMode自动缩放功能。

第9行设置gridview的适配器对象MyAdapter。

第10~15行设置了item的单击事件监听器OnItemClickListener。单击后通过Log.d输出到Logcat窗口,显示我们单击了哪个图片。

第16~49行为适配器类MyAdapter,代码与上个例子类似。

运行效果如图10-5所示。

▲图  Gridview示例图

单击item后Logcat输出示例。

1.   D/mygridview:(1164): 我单击的是:赵1的照片

2.   D/mygridview:(1164): 我单击的是:钱2的照片

3.   D/mygridview:(1164): 我单击的是:张三的照片

时间: 2024-08-24 16:20:07

表视图-GridView的相关文章

精通IOS开发-表视图的使用

// // ViewController.m // Simple Table // // Created by Jierism on 16/7/20. // Copyright © 2016年 Jierism. All rights reserved. // #import "ViewController.h" @interface ViewController ()<UITableViewDelegate,UITableViewDataSource> // 声明一个数组,

UI_10 表视图的编辑、UITableViewController

读取plist文件并将其内容显示到表视图上.并添加编辑(增加,删除).移动cell的操作. plist文件内容如下: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" " http://www.apple.com/DTDs/PropertyList-1.0.dtd ">

UI第九讲.UITableView表视图创建,表视图的重用机制,表视图的相关配置方法

一.UITableView表视图创建 1>.基本属性: UITableView继承自UIScrollView,所以可以滚动          表视图的每一条数据都是显示在UITableViewCell对象中          表视图可以分区显示数据,每个分区称为一个section,每一行称为row,编号都是从0始 2>.重要用法: 最重要的是两个代理方法 <UITableViewDelegate,UITableViewDataSource>(其中必须实现的是 numberOfRow

UI基础:UITableView表视图

表视图 UITableView,iOS中最重要的视图,随处可见. 表视图通常用来管理一组具有相同数据结构的数据. UITableView继承于UIScrollView,所以可以滚动 表视图的每条数据都是显示在UITableViewCell对象中 表视图可以分区显示数据,每个分区称为一个section,每一行称为 row,编号都是从0开始 表视图的创建 DataSource数据源 我们需要给tableView指定一个数据源,它负责给tableView提供数据. 需要实现协议中两个必须实现的方法.

简单表视图

从现在开始进入表视图UITableView,同属UISrollView子类. 包括两个协议UITableViewDelegate, UITableViewDataSource 有一些概念 - 表头视图 header view - 表脚视图 footer view - 单元格 cell - 节 section - 节头 section header - 节脚 section footer 这里有一个可重复定义对象的概念,这是为了节约内存开销而设计,当屏幕翻动时,旧的单元格退出屏幕,新的进入. 如果

表视图搜索栏

一.效果 1. 启动程序:上面搜索栏.右边索引条 2. 点击表单元有警告框提示 3. 点击搜索栏输入内容可根据长短范围搜索 二.分析 1. 创建一个表视图,指定委托,实现表单元的显示 2. 创建一个显示搜索结果的模型,该模型也是表视图,遵循搜索结果更新协议,作为更新器 3. 创建一个搜索控制器,指定搜索结果控制器,并创建搜索栏,让搜索结果控制器实现同步更新协议,让搜索到的内容得以在搜索结果中更新 4. 在更新协议实现方法中配置搜索的逻辑 三.实现 1. 实现文件 2. Main.storyboa

第四章:IOS Table表视图搜索功能UISearchBar

UISearchBar经常会跟UITable一齐使用,所以在此就介绍一下UISearchBar 先来看看结构 下面再看看它有哪些样式 基本搜索栏.里面????的Search文字用于提示用户??入查询关??字,搜索栏的Placeholder属性可以设置这个提示信息 带有??除按钮的搜索栏.在??入框中??入文字时,会在后面出现??????除按钮,点????除按钮可以??除??入框中的文字 带有查询结果按钮的搜索栏.显示最??搜索结果,显示设定如图4-31所示,选中 Options下的Shows S

表视图控制器(TableViewController)(一)

1 创建一个UITableViewController并展示简单数据 1.1 问题 有很多移动客户端的应用都是采用表的形式来展示数据,因为表视图能使数据看起来更规整.更有调理,比如微信界面就是使用的表视图,如图-1所示: 图-1 在IOS中表视图是非常重要的视图,类型名称为UITabelViewController,是UIViewController的子类,本案例将学习如何使用UITableViewController来展示简单的数据,完成效果如图-2所示: 图-2 1.2 方案 首先创建一个S

表视图控制器(TableViewController)(三) 、 表视图搜索

1 乐库的设置界面 1.1 问题 tableView分为静态(static)和动态(dynamic),之前使用的都是动态的tableView,表视图的有多少分区.有多少行以及每一行显示的内容都不是固定的,都由数据模式来决定.而静态的tableView有多少分区.有多少行以及每一行显示的内容都是固定不变的. 静态tableView应用广泛,常用于各种应用软件的设置界面,本案例使用静态tableView完成乐库的设置界面,如图-1所示: 图-1 1.2 方案 由图-1可以看到该界面的显示内容是固定不