首页 > 移动平台 > 详细

Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法

时间:2014-08-18 16:10:43      阅读:605      评论:0      收藏:0      [点我收藏+]

网格试图(GridView)用于在界面上按行,列分布的方式来显示多个组件。

GridView和ListView有共同的父类:AbsListView,因此GridView和ListView具有一定的相似性。GridView和ListView的主要区别在于:ListView只是一个方向上的分布;而GridView则会在两个方向上分布。

与ListView相似的是,GridView也需要通过Adapter来提供显示数据:可以通过SimpleAdapter来为GridView提供数据,也可以通过开发BaseAdapter的子类来问GridView提供数据,不管使用那种方式,GridView和ListView的用法基本是一致的。

GridView中提供了常用的XML属性:

XML属性 相关方法 说明
android:columnWidth setColumnWidth(int) 设置列的宽度
android:gravity setGravity(int) 设置对齐方式
android:horizontalSpacing setHorizontalSpac(int) 设置各个元素之间的水平间距
android:numColumn setNumColumn(int) 设置列数
android:stretchMode setStretchMode(int) 设置拉伸模式
android:verticalSpacing setVerticalSpacing(int) 设置各个元素之间的垂直间距

注意:使用GridView时一般都应该指定numColumn大于1,否则该属性默认值为1,如果将属性设置为1,则意味着该Gridview只有一列,那Gridview就变成了Listview。

在上面表中提到的android:stretchMode属性支持如下几个属性值:

  • NO_STRETCH : 不拉伸
  • STRETCH_SPACING:仅拉伸元素之间的间距
  • STRETCH_SPACING_UNIFORM:表格元素本身、元素之间的间距一起拉伸
  • STRETCH_COLUMN_WIDTH:仅拉伸元素表格元素本身。

 

图片切换器(ImageSwitcher)是由FrameLayout派生而出,ImageSwitcher组件和ImageView很相似,他们都可用于显示图片,但是ImageView比ImageView多了一个功能:它所显示的图片切换是可以设置动画效果。

使用ImageSwitcher时往往需要为它设置一个ImageSwitcher.ViewFactory,来实现ImageSwitcher.ViewFactory时需要实现一个makeView()方法,该方法通常会返回一个Imageview而ImageSwitcher则负责显示这个ImageView。

下面我们用个GridView 以行列的形式来组织所有图片的预览视图,然后启用一个ImageSwitcher来显示图片。

界面布局文件:layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6     android:gravity="center_horizontal"
 7     >
 8 <!-- 定义一个GridView组件 -->
 9 <GridView  
10     android:id="@+id/grid01"
11     android:layout_width="fill_parent" 
12     android:layout_height="wrap_content" 
13     android:horizontalSpacing="pt"
14     android:verticalSpacing="2pt"
15     android:numColumns="4"
16     android:gravity="center"
17     />
18 <!-- 定义一个ImageSwitcher组件 -->
19 <ImageSwitcher android:id="@+id/switcher"
20     android:layout_width="320dp"
21     android:layout_height="320dp"
22     android:layout_gravity="center_horizontal"
23     />    
24 </LinearLayout>

上面的布局文件中只是简单的定义了一个GridView、一个ImageSwitcher。定义GridView指定了android:numColumns=“4”,这个属性的指定意味着该网格包含了4列,GridView到底包含了多少行,其实跟ListView一样都是有Adapter去决定的。

主程序:GridViewTest.java

 1 package com.yangjing.gridviewtest;
 2 
 3 import java.util.ArrayList;
 4 import java.util.HashMap;
 5 import java.util.List;
 6 import java.util.Map;
 7 
 8 import android.app.Activity;
 9 import android.os.Bundle;
10 import android.view.View;
11 import android.view.ViewGroup.LayoutParams;
12 import android.view.animation.Animation;
13 import android.view.animation.AnimationUtils;
14 import android.view.animation.GridLayoutAnimationController;
15 import android.widget.AdapterView.OnItemClickListener;
16 import android.widget.AdapterView.OnItemSelectedListener;
17 import android.widget.AdapterView;
18 import android.widget.GridView;
19 import android.widget.ImageSwitcher;
20 import android.widget.ImageView;
21 import android.widget.SimpleAdapter;
22 import android.widget.Switch;
23 import android.widget.ViewSwitcher.ViewFactory;
24 
25 public class GridViewTest extends Activity{
26     int[] imageIds = new int[]
27     {
28             R.drawable.bomb5,R.drawable.bomb6,R.drawable.bomb7,
29             R.drawable.bomb8,R.drawable.bomb9,R.drawable.bomb10,
30             R.drawable.bomb11,R.drawable.bomb12,R.drawable.bomb13,
31             R.drawable.bomb14,R.drawable.bomb15,R.drawable.bomb16,
32     }; 
33     
34     @Override
35     protected void onCreate(Bundle savedInstanceState) {
36         super.onCreate(savedInstanceState);
37         setContentView(R.layout.main);
38         //创建一个list对象,list对象的元素是map
39         List<Map<String,Object>> listItems = new ArrayList<Map<String, Object>>();
40         
41         for (int i = 0; i < imageIds.length; i++) {
42             Map<String, Object> listItem = new HashMap<String, Object>();
43             listItem.put("image", imageIds[i]);
44             listItems.add(listItem);
45         }
46         //获取显示图片的ImageSwitcher
47         final ImageSwitcher switcher = (ImageSwitcher) findViewById(R.id.switcher);
48         //设置图片更换的动画效果
49         switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
50         switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
51         //为ImageSwitcher设置图片切换的动画效果
52         switcher.setFactory(new ViewFactory() {
53             
54             @Override
55             public View makeView() {
56                 ImageView imageView = new ImageView(GridViewTest.this);
57                 imageView.setBackgroundColor(0xff0000);
58                 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
59                 imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
60                         LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
61                 return imageView;
62             }
63         });
64         
65         //创建一个SimpleAdapter
66         SimpleAdapter simpleAdapter = new SimpleAdapter(this, listItems, R.layout.cell, new String[]{"image"}, new int[]{R.id.image1});
67         
68         GridView grid = (GridView) findViewById(R.id.grid01);
69         //为GridView设置Adapter
70         grid.setAdapter(simpleAdapter);
71         //添加列表项被选中的监听器
72         grid.setOnItemSelectedListener(new OnItemSelectedListener() {
73             @Override
74             public void onItemSelected(AdapterView<?> parent, View view, 
75                     int position , long id) {
76                 //显示当前被选中的图片
77                 switcher.setImageResource(imageIds[position % imageIds.length]);
78             }
79 
80             @Override
81             public void onNothingSelected(AdapterView<?> arg0) {}
82         });
83         //添加列表被单击的监听
84         grid.setOnItemClickListener(new OnItemClickListener() {
85 
86             @Override
87             public void onItemClick(AdapterView<?> parent, View view, int position,
88                     long id) {
89                 switcher.setImageResource(imageIds[position % imageIds.length]);
90             }
91             
92         });
93         
94     }
95 }

 

上面蓝色字体在创建SimpleAdapter时指定使用R.Layout.cell作为界面布局:cell.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" 
 6     android:gravity="center_horizontal"
 7     android:padding="5pt"
 8     >
 9     <!-- android:gravity="center_horizontal"   这个是针对控件里的元素来说的,用来控制元素在该控件里的显示位置。 -->
10     <ImageView android:id="@+id/image1"
11         android:layout_width="50dp"
12         android:layout_height="50dp"/>
13 
14 </LinearLayout>

最后的运行效果:

bubuko.com,布布扣

 

Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法,布布扣,bubuko.com

Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法

原文:http://www.cnblogs.com/Yang-jing/p/3919628.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!