一、废话
今天是冬至,两年前肯定会和兄弟一起去吃饺子,虽然是四川人,但是入乡随俗!可是现在在四川,所以没有那个机会,晚饭时候找了个小面馆儿要了一碗蒸饺,算是过了个冬至吧。
二、正文
1、 Gallery
a) Gallery是个啥?
Gallery组件主要是用于横向显示图片列表,就如我们的画廊一样。按照常规的做法,该组件是不能循环的。也就是说,你从第一张浏览到最后一张图片后,如果想再看第一张,你就必须返回去。
来个图,看看我们需要做出来的效果。
b) 传统做法
i. 不管是传统做法还是稍微有所改进的做法,都是需要继承BaseAdapter,并实现其中的抽象方法的。
ii. Gallery组件的常规使用步骤
-
-
- 资源文件,复制进res/drawable文件夹中
- 定义Gallery 组件的背景样式文件
- 定义含有Gallery组件和ImageSwitcher组件的main.xml文件
- 继承BaseAdapter类,并实现其中的方法
- 为Gallery组件绑定Adapter
- 实现Gallery组件的onItemSelected方法,为ImageSwitcher组件设置其图片源
- 填充ImageSwitcher中的ImageView控件
-
iii. 来看看具体的实现吧
背景样式文件res/values/attrs.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 <declare-styleable name="Gallery"> 4 <attr name="android:galleryItemBackground" /> 5 </declare-styleable> 6 </resources>
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" android:layout_width="fill_parent" 4 android:layout_height="fill_parent"> 5 <Gallery 6 android:layout_width="fill_parent" 7 android:layout_height="wrap_content" 8 android:spacing="10dip" 9 android:unselectedAlpha="1.5" 10 android:id="@+id/main_gallery" 11 android:layout_marginTop="30dp"/> 12 <ImageSwitcher 13 android:id="@+id/imageSwitcher" 14 android:layout_width="fill_parent" 15 android:layout_height="wrap_content" 16 android:layout_marginTop="30dp" /> 17 </LinearLayout>
继承BaseAdapter类,全部都有注释,就不多解释了
1 //重载BaseAdapter类,定义我们自己的ImageAdapter·类 2 public class MyImageAdapter extends BaseAdapter 3 { 4 private Context _context=null; 5 private int _mGalleryItemBackground; 6 public MyImageAdapter(Context context) 7 { 8 this._context=context; 9 TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery); 10 _mGalleryItemBackground = typedArray.getResourceId( 11 R.styleable.Gallery_android_galleryItemBackground, 0); 12 } 13 //返回传入的图片ID数组的长度,也就是图片的总数。既然是数组,那么一定要注意越界问题。 14 @Override 15 public int getCount() { 16 // TODO Auto-generated method stub 17 //return Integer.MAX_VALUE; 18 return imageIDArray.length; 19 } 20 // 返回position所对应的图片对象 21 @Override 22 public Object getItem(int position) { 23 // TODO Auto-generated method stub 24 return imageIDArray[position]; 25 } 26 // 取得列表中与指定位置的行关联的ID. 27 @Override 28 public long getItemId(int position) { 29 // TODO Auto-generated method stub 30 return position; 31 } 32 // 这个是在实现BaseAdapter最重要的一个类 33 // 取得用于显示数据集中指定位置数据的视图。你可以创建一个视图或者通过XML文件来定义视图 34 // 当视图填充自布局文件时,除非通过 inflate(int, android.view.ViewGroup, boolean) 方法指定了根视图, 35 // 并防止其附着于根视图,否则父视图(GridView、ListView等)会使用默认参数进行布局 36 @Override 37 public View getView(int position, View convertView, ViewGroup parent) { 38 // TODO Auto-generated method stub 39 ImageView iv = new ImageView(_context); 40 // 设置ImageView控件的图片源 41 iv.setImageResource(imageIDArray[position]); 42 //iv.setImageResource(imageIDArray[position%imageIDArray.length]); 43 // 设置图片的缩放方式 44 iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE); 45 // 将图片缩放 46 iv.setLayoutParams(new Gallery.LayoutParams(100, 100)); 47 iv.setBackgroundResource(_mGalleryItemBackground); 48 return iv; 49 } 50 51 }
为Gallery组件绑定Adapter(注意,如果要为ImageSwitcher控件生成视图,就需要调用它的setFactory方法,而这个方法的参数来自ViewFactory,所以让我们的Activity实现ViewFactory接口。
1 main_Gallery =(Gallery)findViewById(R.id.main_gallery); 2 imageSwitcher =(ImageSwitcher)findViewById(R.id.imageSwitcher); 3 //用于生成视图,由于Android_GalleryActivity实现了ViewFactory接口,因此this其实就是一个ViewFactory。 4 imageSwitcher.setFactory(this); 5 //为了增加显示的效果,我们设置一个淡入的载入效果,关于Android 6 //的开发工具为我们提供了几组默认的Animation效果,具体的可以参见帮助文档 7 imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in)); 8 imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out)); 9 10 //MyImageAdapter myIamgeAdapter = new MyImageAdapter(Android_GalleryActivity.this); 11 MyImageAdapter myIamgeAdapter = new MyImageAdapter(this); 12 main_Gallery.setAdapter(myIamgeAdapter);
实现onItemSelected方法,为ImageSwitcher组件设置其图片源
1 main_Gallery.setOnItemSelectedListener(new OnItemSelectedListener() { 2 3 @Override 4 public void onItemSelected(AdapterView<?> arg0, View arg1, 5 int arg2, long arg3) { 6 7 //arg2%imageIDArray.length 目的是为了让图片能够循环 8 imageSwitcher.setImageResource(imageIDArray[arg2%imageIDArray.length]); 9 }
填充ImageSwitcher中的ImageView控件,makeView()方法来自ViewFactory接口。用于返回视图填充ImageSwitcher控件。
1 //返回一个视图,这个视图用来填充imageSwitcher 2 @Override 3 public View makeView() { 4 // 创建一个ImageView用来装载需要显示的图片 5 ImageView imageView = new ImageView(this); 6 // 设置背景色 7 imageView.setBackgroundColor(0xFF000000); 8 // 设置图片显示的缩放方式 9 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); 10 // 设置显示的图片对相对容器的填充方式 11 imageView.setLayoutParams(new ImageSwitcher.LayoutParams( 12 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); 13 return imageView; 14 }
c) 稍微改进下
在实现的BaseAdapter中有一个getCount()方法,该方法返回的是我们的图片数组的长度,在Gallery控件显示图片的时候,会同时返回一个数与这个长度进行对比,一旦这个数字大于图片数组长度,那么Gallery控件就会拒绝往前滑动。这也是为什么Gallery图片不能循环的原因。所以要实现循环,首先必须就要让getCount()方法返回的数字永远不小于传入的值。可以使用一个Integer.MAX_VALUE来取得一个很大值,来实现一个伪循环。
循环的第一步是实现了,但是我们怎么给ImageSwitcher组件传入图片呢?我们可以使用取余(%)的方法来实现循环操作。
1 //返回传入的图片ID数组的长度,也就是图片的总数。既然是数组,那么一定要注意越界问题。 2 @Override 3 public int getCount() { 4 // TODO Auto-generated method stub 5 return Integer.MAX_VALUE; 6 }
//循环使用取余方法来实现 iv.setImageResource(imageIDArray[position%imageIDArray.length]);
2、GridView
GridView和Gallery控件的使用方式很相似,所以在此也不再过多废话了,例子可以在帮助文档或者在官方在线文档上找到。
三、总结
Gallery、GridView两个控件作为图片列表展示时最常使用的控件,同时,这两个控件一般情况下又与ImageSwitcher控件结合使用,所以学习Gallery、GridView控件时,需要了解ImageSwitcher以及BaseAdapter类的一些相关知识。更详细的信息,可以在帮助文档中看到,包括BaseAdapter类中最重要的getView()的使用方法。