现在的位置: 首页 > 综合 > 正文

Android中ImageSwitcher详解（注意与图片浏览器的区别）

2018年04月22日 ⁄ 综合 ⁄ 共 11039字 ⁄ 字号 小 中 大 ⁄ 评论关闭

http://blog.csdn.net/yuzhiboyi/article/details/7700180

目录(?)[+]

先看看继承关系，ImageSwitcher和TextSwitcher的继承关系是一样的。两个重要的父类：ViewSwitcher和ViewAnimator

继承于ViewSwitcher，说明具备了切换功能

继承于ViewAnimator，说明具备了动画功能


ImageSwitcher原理

ImageSwitcher的内容在Gallery中已经有所讲解，这边系统的详解一下

ImageSwitcher粗略的理解就是ImageView的选择器

ImageSwitcher的原理：ImageSwitcher有两个子View：ImageView，当左右滑动的时候，就在这两个ImageView之间来回切换来显示图片

下面我们来看看Android自带的source，以便更深的理解这个原理：

既然有两个子ImageView，那么我们要创建两个ImageView给ImageSwitcher。创建ImageSwitcher是通过工厂来实现的，看下面代码

Java代码
  1. imageSwicher.setFactory(this);  

为imageSwitcher设置ViewFactory

Java代码
  1. @Override  
  2. public View makeView() {  
  3.     ImageView imageView = new ImageView(this);  
  4.     imageView.setImageResource(arrayPictures[pictureIndex]);  
  5.     return imageView;  
  6. }  

实现ViewFactory的makeView()方法，makeView()方法就是负责给ImageSwitcher创建两个字ImageView

下面再来看看setFactory()方法的具体代码

Java代码
  1. public void setFactory(ViewFactory factory) {  
  2.     mFactory = factory;  
  3.     obtainView();  
  4.     obtainView();  
  5. }  

可以看到在setFactory的同时，调用了两遍obtainView()方法，obtainView()方法就是给ImageSwitcher添加子ImageView的，调用两遍就是添加了两个子ImageView

再来看看obtainView()方法的具体代码

Java代码
  1. private View obtainView() {  
  2.     View child = mFactory.makeView();  
  3.     LayoutParams lp = (LayoutParams) child.getLayoutParams();  
  4.     if (lp == null) {  
  5.         lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);  
  6.     }  
  7.     addView(child, lp);  
  8.     return child;  
  9. }  

可以看到obtainView()方法的的职责就是：通过makeView()方法创建View，然后把创建出来的View添加到ImageSwitcher上

再来看看下面的方法

Java代码
  1. public void setImageResource(int resid)  
  2. {  
  3.     ImageView image = (ImageView)this.getNextView();  
  4.     image.setImageResource(resid);  
  5.     showNext();  
  6. }  

此方法就是用来显示下一张图片的，我们可以看到这个方法里面调用了getNextView()方法和showNext()方法，那么我们来看看这两个方法的具体代码

Java代码
  1. public View getNextView() {  
  2.     int which = mWhichChild == 0 ? 1 : 0;  
  3.     return getChildAt(which);  
  4. }  
Java代码
  1. public void showNext() {  
  2.     setDisplayedChild(mWhichChild + 1);  
  3. }  

getNextView()方法是在两个子ImageView之间切换，showNext()方法是负责显示这两个子View中的哪一个

也就是说，现用getNextView()方法得到下一个View，然后重新设置这个View的imageResource，最后通过showNext()方法将下一个View显示出来


好了，ImageSwitcher的原理讲完了。下面附上一个Demo

ImageSwitcher实例

main.xml

Html代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <ImageSwitcher  
  8.         android:id="@+id/imageSwicher"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="0dip"  
  11.         android:layout_weight="1"  
  12.         android:background="@android:color/white"  
  13.         android:gravity="center" >  
  14.     </ImageSwitcher>  
  15.   
  16. </LinearLayout>  


ImageSwicherDemoActivity.java

Java代码
  1. package com.tianjf;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.MotionEvent;  
  6. import android.view.View;  
  7. import android.view.View.OnTouchListener;  
  8. import android.view.animation.AnimationUtils;  
  9. import android.widget.ImageSwitcher;  
  10. import android.widget.ImageView;  
  11. import android.widget.ViewSwitcher.ViewFactory;  
  12.   
  13. /** 
  14.  * 一个左右滑动浏览图片的Demo 
  15.  *  
  16.  * @author tianjf 
  17.  *  
  18.  */  
  19. public class ImageSwicherDemoActivity extends Activity implements ViewFactory,  
  20.         OnTouchListener {  
  21.   
  22.     private ImageSwitcher imageSwicher;  
  23.   
  24.     // 图片数组  
  25.     private int[] arrayPictures = { R.drawable.bg001, R.drawable.bg002,  
  26.             R.drawable.bg003, R.drawable.bg004 };  
  27.     // 要显示的图片在图片数组中的Index  
  28.     private int pictureIndex;  
  29.     // 左右滑动时手指按下的X坐标  
  30.     private float touchDownX;  
  31.     // 左右滑动时手指松开的X坐标  
  32.     private float touchUpX;  
  33.   
  34.     @Override  
  35.     public void onCreate(Bundle savedInstanceState) {  
  36.         super.onCreate(savedInstanceState);  
  37.         setContentView(R.layout.main);  
  38.   
  39.         imageSwicher = (ImageSwitcher) findViewById(R.id.imageSwicher);  
  40.   
  41.         // 为ImageSwicher设置Factory，用来为ImageSwicher制造ImageView  
  42.         imageSwicher.setFactory(this);  
  43.         // 设置ImageSwitcher左右滑动事件  
  44.         imageSwicher.setOnTouchListener(this);  
  45.     }  
  46.   
  47.     @Override  
  48.     public View makeView() {  
  49.         ImageView imageView = new ImageView(this);  
  50.         imageView.setImageResource(arrayPictures[pictureIndex]);  
  51.         return imageView;  
  52.     }  
  53.   
  54.     @Override  
  55.     public boolean onTouch(View v, MotionEvent event) {  
  56.         if (event.getAction() == MotionEvent.ACTION_DOWN) {  
  57.             // 取得左右滑动时手指按下的X坐标  
  58.             touchDownX = event.getX();  
  59.             return true;  
  60.         } else if (event.getAction() == MotionEvent.ACTION_UP) {  
  61.             // 取得左右滑动时手指松开的X坐标  
  62.             touchUpX = event.getX();  
  63.             // 从左往右，看前一张  
  64.             if (touchUpX - touchDownX > 100) {  
  65.                 // 取得当前要看的图片的index  
  66.                 pictureIndex = pictureIndex == 0 ? arrayPictures.length - 1  
  67.                         : pictureIndex - 1;  
  68.                 // 设置图片切换的动画  
  69.                 imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
  70.                         android.R.anim.slide_in_left));  
  71.                 imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
  72.                         android.R.anim.slide_out_right));  
  73.                 // 设置当前要看的图片  
  74.                 imageSwicher.setImageResource(arrayPictures[pictureIndex]);  
  75.                 // 从右往左，看下一张  
  76.             } else if (touchDownX - touchUpX > 100) {  
  77.                 // 取得当前要看的图片的index  
  78.                 pictureIndex = pictureIndex == arrayPictures.length - 1 ? 0  
  79.                         : pictureIndex + 1;  
  80.                 // 设置图片切换的动画  
  81.                 // 由于Android没有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right编写了slide_out_left和slide_in_right  
  82.                 imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
  83.                         R.anim.slide_out_left));  
  84.                 imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
  85.                         R.anim.slide_in_right));  
  86.                 // 设置当前要看的图片  
  87.                 imageSwicher.setImageResource(arrayPictures[pictureIndex]);  
  88.             }  
  89.             return true;  
  90.         }  
  91.         return false;  
  92.     }  
  93. }  


由于Android没有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right编写了slide_out_left和slide_in_right，代码如下：

slide_in_right.xml

Html代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <translate android:fromXDelta="50%p" android:toXDelta="0" android:duration="300"/>  
  4.     <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />  
  5. </set>  


slide_out_left.xml

Html代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <translate android:fromXDelta="0" android:toXDelta="-50%p" android:duration="300"/>  
  4.     <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />  
  5. </set>  



好了ImageSwitcher的讲解到此结束，下面附上一个和ImageSwitcher差不多的TextSwitcher的Demo。

由于TextSwitcher的原理和ImageSwitcher一样，只是一个是ImageView，一个是TextView。那么在此就不多说，直接上代码

main.xml

Html代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextSwitcher  
  8.         android:id="@+id/textSwicher"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="0dip"  
  11.         android:layout_weight="1"  
  12.         android:background="@android:color/white"  
  13.         android:gravity="center" >  
  14.     </TextSwitcher>  
  15.   
  16. </LinearLayout>  


TextSwitcherDemoActivity.java

Java代码
  1. package com.tianjf;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.Gravity;  
  6. import android.view.MotionEvent;  
  7. import android.view.View;  
  8. import android.view.View.OnTouchListener;  
  9. import android.view.ViewGroup.LayoutParams;  
  10. import android.view.animation.AnimationUtils;  
  11. import android.widget.TextSwitcher;  
  12. import android.widget.TextView;  
  13. import android.widget.ViewSwitcher.ViewFactory;  
  14.   
  15. /** 
  16.  * 一个左右滑动浏览文本的Demo 
  17.  *  
  18.  * @author tianjf 
  19.  *  
  20.  */  
  21. public class TextSwitcherDemoActivity extends Activity implements ViewFactory,  
  22.         OnTouchListener {  
  23.   
  24.     private TextSwitcher textSwicher;  
  25.   
  26.     // 图片数组  
  27.     private String[] arrayTexts = { "文本01", "文本02", "文本03", "文本04" };  
  28.     // 要显示的图片在图片数组中的Index  
  29.     private int textIndex;  
  30.     // 左右滑动时手指按下的X坐标  
  31.     private float touchDownX;  
  32.     // 左右滑动时手指松开的X坐标  
  33.     private float touchUpX;  
  34.   
  35.     @Override  
  36.     public void onCreate(Bundle savedInstanceState) {  
  37.         super.onCreate(savedInstanceState);  
  38.         setContentView(R.layout.main);  
  39.   
  40.         textSwicher = (TextSwitcher) findViewById(R.id.textSwicher);  
  41.   
  42.         // 为TextSwitcher设置Factory，用来为TextSwitcher制造TextView  
  43.         textSwicher.setFactory(this);  
  44.         // 设置TextSwitcher左右滑动事件  
  45.         textSwicher.setOnTouchListener(this);  
  46.     }  
  47.   
  48.     @Override  
  49.     public View makeView() {  
  50.         TextView textView = new TextView(this);  
  51.         textView.setTextSize(100);  
  52.         textView.setLayoutParams(new TextSwitcher.LayoutParams(  
  53.                 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
  54.         textView.setGravity(Gravity.CENTER);  
  55.         textView.setText(arrayTexts[textIndex]);  
  56.         return textView;  
  57.     }  
  58.   
  59.     @Override  
  60.     public boolean onTouch(View v, MotionEvent event) {  
  61.         if (event.getAction() == MotionEvent.ACTION_DOWN) {  
  62.             // 取得左右滑动时手指按下的X坐标  
  63.             touchDownX = event.getX();  
  64.             return true;  
  65.         } else if (event.getAction() == MotionEvent.ACTION_UP) {  
  66.             // 取得左右滑动时手指松开的X坐标  
  67.             touchUpX = event.getX();  
  68.             // 从左往右，看前一文本  
  69.             if (touchUpX - touchDownX > 100) {  
  70.                 // 取得当前要看的文本的index  
  71.                 textIndex = textIndex == 0 ? arrayTexts.length - 1  
  72.                         : textIndex - 1;  
  73.                 // 设置文本切换的动画  
  74.                 textSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
  75.                         android.R.anim.slide_in_left));  
  76.                 textSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
  77.                         android.R.anim.slide_out_right));  
  78.                 // 设置当前要看的文本  
  79.                 textSwicher.setText(arrayTexts[textIndex]);  
  80.                 // 从右往左，看下一张  
  81.             } else if (touchDownX - touchUpX > 100) {  
  82.                 // 取得当前要看的文本的index  
  83.                 textIndex = textIndex == arrayTexts.length - 1 ? 0  
  84.                         : textIndex + 1;  
  85.                 // 设置文本切换的动画  
  86.                 // 由于Android没有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right编写了slide_out_left和slide_in_right  
  87.                 textSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
  88.                         R.anim.slide_out_left));  
  89.                 textSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
  90.                         R.anim.slide_in_right));  
  91.                 // 设置当前要看的文本  
  92.                 textSwicher.setText(arrayTexts[textIndex]);  
  93.             }  
  94.             return true;  
  95.         }  
  96.         return false;  
  97.     }  
  98. }  


slide_in_right.xml和slide_out_left.xml可以参照ImageSwitcher的Demo，在此就不重复了

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞