网格试图(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>
最后的运行效果:
Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法,布布扣,bubuko.com