前言
这篇博客来聊一聊AndroidUI开发中ImageSwitcher控件的使用。ImageSwitcher控件与ImageView类似,都可以用于显示图片,但是ImageSwitcher通过名字可以看出,主要是用于多张图片的切换显示。在本篇博客中,会介绍ImageSwitcher控件的基本属性的设置以及常用方法的调用。在最后会通过一个示例Demo来展示本篇博客中讲到的一些内容。
ImageSwitcher
ImageSwitcher是一个图片切换器,它间接继承自FrameLayout类,和ImageView相比,多了一个功能,那就是它说显示的图片切换时,可以设置动画效果,类似于淡进淡出效果,以及左进右出滑动等效果。
既然ImageSwitcher是用来显示图片的控件,AndroidAPI为我们提供了三种不同方法来设定不同的图像来源,方法有:
动画效果设定
上面介绍到,ImageSwitcher可以设置图片切换时,动画的效果。对于动画效果的支持,是因为它继承了ViewAnimator类,这个类中定义了两个属性,用来确定切入图片的动画效果和切出图片的动画效果:
以上两个属性如果在XML中设定的话,当然可以通过XML资源文件自定义动画效果,但是如果只是想使用Android自带的一些简单的效果的话,需要设置参数为“@android:anim/AnimName”来设定效果,其中AnimName为指定的动画效果。如果在代码中设定的话,可以直接使用setInAnimation()和setOutAnimation()方法。它们都传递一个Animation的抽象对象,Animation用于描述一个动画效果,一般使用一个AnimationUtils的工具类获得。对于动画效果,不是本片博客的重点,关于Android的动画效果,以后再详细讲解。
对于动画效果,一般定义在android.R.anim类中,它是一个final类,以一些int常量的形式,定义的样式,这里仅仅介绍两组样式,淡进淡出效果,以及左进右出滑动效果,如果需要其他效果,可以查阅官方文档。
一般使用的话,通过这些常量名称就可以看出是什么效果,这里并不是强制Xxx_in_Xxx就一定对应了setInAnimation()方法,但是一般如果不成组设定的话,效果会很丑,建议还是成组的对应In和Out设定效果。
ViewFactory
在使用ImageSwitcher的时候,有一点特别需要注意的,需要通过setFactory()方法为它设置一个ViewSwitcher.ViewFactory接口,设置这个ViewFactory接口时需要实现makeView()方法,该方法通常会返回一个ImageView,而ImageSwitcher则负责显示这个ImageView。如果不设定ViewFactory的话,ImageSwitcher将无法使用。通过官方文档了解到,setFactory()方法被声明在ViewSwitcher类中,而ImageSwitcher直接继承自ViewSwitcher类。ViewSwitcher的功能与ImageSwitcher类似,只是ImageSwitcher用于展示图片,而ViewSwitcher用于展示一些View视图。
可以这么理解,通过ViewFactory中的makeView()方法返回一个新的View视图,用来放入ViewSwitcher中展示,而对于ImageSwitcher而言,这里通常返回的是一个ImageView。
示例程序
下面通过一个Demo来说明上面讲到的内容。在示例中定义一个ImageSwitcher和两个Button,这两个按钮分别控制着图像的上一张、下一张显示,当然,在资源中必须存在这几个待切换的图片文件。。
布局代码:
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:paddingBottom="@dimen/activity_vertical_margin" 6 android:paddingLeft="@dimen/activity_horizontal_margin" 7 android:paddingRight="@dimen/activity_horizontal_margin" 8 android:paddingTop="@dimen/activity_vertical_margin" 9 tools:context=".MainActivity" android:orientation="vertical"> 10 11 <ImageSwitcher 12 android:id="@+id/imageSwitcher1" 13 android:layout_width="fill_parent" 14 android:layout_height="150dp" 15 /> 16 <Button 17 android:id="@+id/btnadd" 18 android:layout_width="fill_parent" 19 android:layout_height="wrap_content" 20 android:text="上一张" /> 21 <Button 22 android:id="@+id/btnSub" 23 android:layout_width="fill_parent" 24 android:layout_height="wrap_content" 25 android:text="下一张" /> 26 </LinearLayout>
实现代码:
1 package com.bgxt.imageswitcherDemo; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.os.Bundle; 7 import android.app.Activity; 8 import android.graphics.drawable.Drawable; 9 import android.view.Menu; 10 import android.view.View; 11 import android.view.View.OnClickListener; 12 import android.view.animation.Animation; 13 import android.view.animation.AnimationUtils; 14 import android.widget.Button; 15 import android.widget.ImageSwitcher; 16 import android.widget.ImageView; 17 import android.widget.ViewSwitcher.ViewFactory; 18 19 public class MainActivity extends Activity { 20 private Button btnAdd, btnSub; 21 private ImageSwitcher imageSwitcher; 22 private int index = 0; 23 private List<Drawable> list; 24 25 @Override 26 protected void onCreate(Bundle savedInstanceState) { 27 super.onCreate(savedInstanceState); 28 setContentView(R.layout.activity_main); 29 putData(); 30 imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher1); 31 btnAdd = (Button) findViewById(R.id.btnadd); 32 btnSub = (Button) findViewById(R.id.btnSub); 33 btnAdd.setOnClickListener(myClick); 34 btnSub.setOnClickListener(myClick); 35 36 //通过代码设定从左缓进,从右换出的效果。 37 imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_in_left)); 38 imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_out_right)); 39 imageSwitcher.setFactory(new ViewFactory() { 40 41 @Override 42 public View makeView() { 43 // makeView返回的是当前需要显示的ImageView控件,用于填充进ImageSwitcher中。 44 return new ImageView(MainActivity.this); 45 } 46 }); 47 imageSwitcher.setImageDrawable(list.get(0)); 48 } 49 50 @Override 51 public boolean onCreateOptionsMenu(Menu menu) { 52 // Inflate the menu; this adds items to the action bar if it is present. 53 getMenuInflater().inflate(R.menu.main, menu); 54 return true; 55 } 56 57 private View.OnClickListener myClick = new OnClickListener() { 58 59 @Override 60 public void onClick(View v) { 61 switch (v.getId()) { 62 case R.id.btnadd: 63 index--; 64 if(index<0) 65 { 66 //用于循环显示图片 67 index=list.size()-1; 68 } 69 //设定ImageSwitcher显示新图片 70 imageSwitcher.setImageDrawable(list.get(index)); 71 break; 72 73 case R.id.btnSub: 74 index++; 75 if(index>=list.size()) 76 { 77 //用于循环显示图片 78 index=0; 79 } 80 imageSwitcher.setImageDrawable(list.get(index)); 81 break; 82 } 83 } 84 }; 85 86 private void putData() { 87 //填充图片的Drawable资源数组 88 list = new ArrayList<Drawable>(); 89 list.add(getResources().getDrawable(R.drawable.bmp1)); 90 list.add(getResources().getDrawable(R.drawable.bmp2)); 91 list.add(getResources().getDrawable(R.drawable.bmp3)); 92 list.add(getResources().getDrawable(R.drawable.bmp4)); 93 list.add(getResources().getDrawable(R.drawable.bmp5)); 94 } 95 }
效果展示:
源码下载
总结
本篇博客主要讲解了ImageSwitcher的使用方式,而对于其父类ViewSwitcher的使用,大致上与ImageSwitcher相似,只是填充的内容不同而已,一般了解了ImageSwitcher的使用,再看ViewSwitcher就很好理解,以后有时间再详细讲解ViewSwitcher的使用。
请支持原创,尊重原创,转载请注明出处。谢谢。