Android学习笔记之ImageSwitcher

前面我们介绍过Android的一个缩略图控件Gallery，以及一个网格显示空间，都分别用图片作为例子，但我们真正用来显示图片的有这样一个控件，叫ImageSwitcher，顾名思义，意思就是图像转换器，我们常用它来显示Android的UI中图片，当然我们也可以用ImageView来操作，但ImageSwitcher具备一些特定的功能，就是它本身在转换图片的时侯可以增加一些动画效果。

布局中的声明及其简单，跟一个时钟控件一样简单。

[java] view plaincopy

1. <ImageSwitcher   
2.     android:id="@+id/imageSwitcher"   
3.     android:layout_width="fill_parent"     android:layout_height="wrap_content"   
4. />  

我们先把它绑架出来，再对它的几个重要方法介绍下。

[java] view plaincopy

1. ImageSwitcher mSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);  
2.   
3. mSwticher.setFactory(this);  

 

如上所示，ImageSwitcher的使用一个最重要的地方就是需要为它指定一个ViewFactory，也就是定义它是如何把内容显示出来的，一般做法为在使用ImageSwitcher的该类中实现ViewFactory接口并覆盖对应的makeView方法。

[java] view plaincopy

1. public View makeView() {   
2. ImageView image = new ImageView(this);   
3.         image.setMinimumHeight(200);   
4.         image.setMinimumWidth(200);   
5.         image.setScaleType(ImageView.ScaleType.FIT_CENTER);   
6.         image.setLayoutParams(new ImageSwitcher.LayoutParams(   
7.                 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));   
8.         return image;   
9.   
10. }  

 

接下来开始添加动画效果。

[java] view plaincopy

1. mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,   
2.         android.R.anim.fade_in));   
3. mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,   
4.         android.R.anim.fade_out));  

把图片显示出来，我们可以把改方法放到事件处理中，就形成了触发而发生图片转换的交互效果。

 

 

[java] view plaincopy

1. package xiaosi.iamgeswitcher;  
2.   
3. import android.app.Activity;  
4. import android.content.Context;  
5. import android.os.Bundle;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.view.ViewGroup.LayoutParams;  
9. import android.view.Window;  
10. import android.view.animation.AnimationUtils;  
11. import android.widget.AdapterView;  
12. import android.widget.AdapterView.OnItemSelectedListener;  
13. import android.widget.BaseAdapter;  
14. import android.widget.Gallery;  
15. import android.widget.ImageSwitcher;  
16. import android.widget.ImageView;  
17. import android.widget.ViewSwitcher.ViewFactory;  
18.   
19. public class ImageSwitcherActivity extends Activity implements ViewFactory{  
20.       
21.     private ImageSwitcher imageSwitcher;  
22.     private Gallery gallery;  
23.   
24.     //图片集合  
25.     private Integer[] Images = { R.drawable.b, R.drawable.c,  
26.             R.drawable.d, R.drawable.f  
27.     };  
28.   
29.     @Override  
30.     protected void onCreate(Bundle savedInstanceState) {  
31.         super.onCreate(savedInstanceState);  
32.           
33.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
34.         setContentView(R.layout.main);  
35.   
36.         imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher);  
37.         //为他它指定一个ViewFactory，也就是定义它是如何把内容显示出来的，实现ViewFactory接口并覆盖对应的makeView方法。  
38.         imageSwitcher.setFactory(this);  
39.         //添加动画效果  
40.         imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,  
41.                 android.R.anim.fade_in));  
42.         imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,  
43.                 android.R.anim.fade_out));  
44.   
45.         gallery = (Gallery) findViewById(R.id.gallery);  
46.         //添加适配器  
47.         gallery.setAdapter(new ImageAdapter(this));  
48.         //设置监听器  
49.         gallery.setOnItemSelectedListener(new onItemSelectedListener());  
50.     }  
51.     //重写makeView()方法  
52.     public View makeView() {  
53.         ImageView imageView = new ImageView(this);  
54.         imageView.setBackgroundColor(0xFF000000);  
55.         //设置填充方式  
56.         imageView.setScaleType(ImageView.ScaleType.FIT_XY);  
57.         imageView.setLayoutParams(new ImageSwitcher.LayoutParams(  
58.                 LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));  
59.         return imageView;  
60.     }  
61.   
62.     //适配器  
63.     public class ImageAdapter extends BaseAdapter {  
64.           
65.         private Context mContext;  
66.         public ImageAdapter(Context c) {  
67.             mContext = c;  
68.         }  
69.   
70.         public int getCount() {  
71.             return Images.length;  
72.         }  
73.   
74.         public Object getItem(int position) {  
75.             return position;  
76.         }  
77.   
78.         public long getItemId(int position) {  
79.             return position;  
80.         }  
81.   
82.         public View getView(int position, View convertView, ViewGroup parent) {  
83.             ImageView imageView = new ImageView(mContext);  
84.   
85.             imageView.setImageResource(Images[position]);  
86.             imageView.setAdjustViewBounds(true);  
87.             imageView.setLayoutParams(new Gallery.LayoutParams(  
88.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
89.             imageView.setBackgroundResource(R.drawable.e);  
90.             return imageView;  
91.         }  
92.   
93.     }  
94.     private class  onItemSelectedListener implements OnItemSelectedListener{  
95.   
96.         public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,  
97.                 long arg3) {  
98.             imageSwitcher.setImageResource(Images[arg2]);  
99.         }  
100.   
101.         public void onNothingSelected(AdapterView<?> arg0) {  
102.         }  
103.           
104.     }  
105. }  

 

main.xml

[java] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:layout_width="match_parent"   
4.     android:layout_height="match_parent">   
5.       
6.     <ImageSwitcher android:id="@+id/switcher"  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="fill_parent"  
9.         android:layout_alignParentTop="true"  
10.         android:layout_alignParentLeft="true"  
11.     />  
12.       
13.     <Gallery android:id="@+id/gallery"  
14.         android:background="#55000000"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="60dp"  
17.         android:layout_alignParentBottom="true"  
18.         android:layout_alignParentLeft="true"  
19.           
20.         android:gravity="center_vertical"  
21.         android:spacing="16dp"  
22.     />  
23. </RelativeLayout>  

[java] view plaincopy

1. package xiaosi.imageswitcher;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.widget.ImageButton;  
7. import android.widget.ImageSwitcher;  
8. import android.widget.ImageView;  
9. import android.widget.ViewSwitcher.ViewFactory;  
10.   
11. public class ImageSwitcherActivity extends Activity implements ViewFactory {  
12.       
13.     private ImageSwitcher is_imageSwitcher;  
14.   
15.     //存放图片id的int数组  
16.     private int[] images={  
17.          R.drawable.a,  
18.          R.drawable.b,  
19.          R.drawable.c,  
20.          R.drawable.d,  
21.          R.drawable.e,  
22.          R.drawable.f,  
23.          R.drawable.g,  
24.          R.drawable.h,};  
25.   
26.     //下一张和上一张按钮  
27.     private ImageButton next;  
28.     private ImageButton last;  
29.     private int index=0;  
30.     /** Called when the activity is first created. */  
31.     @Override  
32.     public void onCreate(Bundle savedInstanceState) {  
33.         super.onCreate(savedInstanceState);  
34.         setContentView(R.layout.main);  
35.           
36.         is_imageSwitcher=(ImageSwitcher)findViewById(R.id.is_imageswitch);  
37.         last=(ImageButton)findViewById(R.id.last);  
38.         next=(ImageButton)findViewById(R.id.next);  
39.           
40.         //imageSwticher必须设置一个viewfactory后才可以查看图片  
41.         is_imageSwitcher.setFactory(this);  
42.   
43.         //设置图片资源id  
44.         is_imageSwitcher.setBackgroundResource(images[index]);  
45.      }  
46.       
47.      public View makeView() {  
48.            //定义每个图像的显示大小  
49.            ImageView imageView = new ImageView(this);  
50.            imageView.setLayoutParams(new ImageSwitcher.LayoutParams(300, 300));  
51.              
52.            return imageView;  
53.     }  
54.       
55.   
56.     //上一张的按钮事件  
57.     public void onClickLast(View v)  
58.     {  
59.         if(index == 0){  
60.             index = images.length-1;  
61.         }  
62.         else{  
63.             index--;  
64.         }  
65.         is_imageSwitcher.setBackgroundResource(images[index%images.length]);  
66.     }  
67.       
68.   
69.     //下一张的按钮事件  
70.     public void onClickNext(View v)  
71.     {  
72.         index++;  
73.         is_imageSwitcher.setBackgroundResource(images[index%images.length]);  
74.     }  
75. }  

 

mian.xml

[java] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent">  
5.       
6.     <ImageSwitcher android:id="@+id/is_imageswitch"  
7.         android:layout_width="fill_parent"   
8.         android:layout_height="fill_parent">  
9.     </ImageSwitcher>  
10.       
11.       
12.     <LinearLayout  
13.     android:orientation="horizontal"   
14.     android:layout_width="fill_parent"  
15.     android:layout_height="wrap_content">  
16.     <ImageButton  
17.         android:src="@drawable/previous"   
18.         android:id="@+id/last"   
19.         android:layout_width="40dp"  
20.         android:layout_height="40dp"   
21.         android:layout_marginRight="10dp"  
22.         android:onClick="onClickLast"/>  
23.      <ImageButton   
24.          android:src="@drawable/next"   
25.          android:id="@+id/next"   
26.          android:layout_width="40dp"  
27.          android:layout_height="40dp"  
28.           android:onClick="onClickNext"  
29.          />  
30.     </LinearLayout>  
31. </FrameLayout>