首页 > 代码库 > Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法
Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法
网格试图(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 @Override35 protected void onCreate(Bundle savedInstanceState) {36 super.onCreate(savedInstanceState);37 setContentView(R.layout.main);38 //创建一个list对象,list对象的元素是map39 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 //获取显示图片的ImageSwitcher47 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 @Override55 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 //创建一个SimpleAdapter66 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设置Adapter70 grid.setAdapter(simpleAdapter);71 //添加列表项被选中的监听器72 grid.setOnItemSelectedListener(new OnItemSelectedListener() {73 @Override74 public void onItemSelected(AdapterView<?> parent, View view, 75 int position , long id) {76 //显示当前被选中的图片77 switcher.setImageResource(imageIds[position % imageIds.length]);78 }79 80 @Override81 public void onNothingSelected(AdapterView<?> arg0) {}82 });83 //添加列表被单击的监听84 grid.setOnItemClickListener(new OnItemClickListener() {85 86 @Override87 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>
最后的运行效果: