Android-ImageSwitcher-详解

来源：互联网发布：什么是网站数据接口编辑：程序博客网时间：2024/04/30 06:19

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/0305/966.html

继承关系，ImageSwitcher和TextSwitcher的继承关系是一样的。两个重要的父类：ViewSwitcher和ViewAnimator
继承于ViewSwitcher，说明具备了切换功能
继承于ViewAnimator，说明具备了动画功能

ImageSwitcher原理

ImageSwitcher的内容在Gallery中已经有所讲解，这边系统的详解一下
ImageSwitcher粗略的理解就是ImageView的选择器
ImageSwitcher的原理：ImageSwitcher有两个子View：ImageView，当左右滑动的时候，就在这两个ImageView之间来回切换来显示图片
下面我们来看看Android自带的source，以便更深的理解这个原理：
既然有两个子ImageView，那么我们要创建两个ImageView给ImageSwitcher。创建ImageSwitcher是通过工厂来实现的，看下面代码

imageSwicher.setFactory(this);

为imageSwitcher设置ViewFactory
@Override
public View makeView() {
ImageView imageView = new ImageView(this);
imageView.setImageResource(arrayPictures[pictureIndex]);
return imageView;
}

实现ViewFactory的makeView()方法，makeView()方法就是负责给ImageSwitcher创建两个字ImageView
下面再来看看setFactory()方法的具体代码
public void setFactory(ViewFactory factory) {
mFactory = factory;
obtainView();
obtainView();
}

可以看到在setFactory的同时，调用了两遍obtainView()方法，obtainView()方法就是给ImageSwitcher添加子ImageView的，调用两遍就是添加了两个子ImageView
再来看看obtainView()方法的具体代码
private View obtainView() {
View child = mFactory.makeView();
LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp == null) {
lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
}
addView(child, lp);
return child;
}

可以看到obtainView()方法的的职责就是：通过makeView()方法创建View，然后把创建出来的View添加到ImageSwitcher上
再来看看下面的方法
public void setImageResource(int resid)
{
ImageView image = (ImageView)this.getNextView();
image.setImageResource(resid);
showNext();
}

此方法就是用来显示下一张图片的，我们可以看到这个方法里面调用了getNextView()方法和showNext()方法，那么我们来看看这两个方法的具体代码
public View getNextView() {
int which = mWhichChild == 0 ? 1 : 0;
return getChildAt(which);
}
public void showNext() {
setDisplayedChild(mWhichChild + 1);
}

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

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

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

ImageSwitcher实例

main.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" > 
  
    <ImageSwitcher 
        android:id="@+id/imageSwicher"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:background="@android:color/white"
        android:gravity="center" > 
    </ImageSwitcher> 
  
</LinearLayout>

ImageSwicherDemoActivity.java

package com.tianjf; 
  
import android.app.Activity; 
import android.os.Bundle; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.View.OnTouchListener; 
import android.view.animation.AnimationUtils; 
import android.widget.ImageSwitcher; 
import android.widget.ImageView; 
import android.widget.ViewSwitcher.ViewFactory; 
  
/** 
 * 一个左右滑动浏览图片的Demo 
 *  
 * @author tianjf 
 *  
 */
public class ImageSwicherDemoActivity extends Activity implements ViewFactory, 
        OnTouchListener { 
  
    private ImageSwitcher imageSwicher; 
  
    // 图片数组 
    private int[] arrayPictures = { R.drawable.bg001, R.drawable.bg002, 
            R.drawable.bg003, R.drawable.bg004 }; 
    // 要显示的图片在图片数组中的Index 
    private int pictureIndex; 
    // 左右滑动时手指按下的X坐标 
    private float touchDownX; 
    // 左右滑动时手指松开的X坐标 
    private float touchUpX; 
  
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main); 
  
        imageSwicher = (ImageSwitcher) findViewById(R.id.imageSwicher); 
  
        // 为ImageSwicher设置Factory，用来为ImageSwicher制造ImageView 
        imageSwicher.setFactory(this); 
        // 设置ImageSwitcher左右滑动事件 
        imageSwicher.setOnTouchListener(this); 
    } 
  
    @Override 
    public View makeView() { 
        ImageView imageView = new ImageView(this); 
        imageView.setImageResource(arrayPictures[pictureIndex]); 
        return imageView; 
    } 
  
    @Override 
    public boolean onTouch(View v, MotionEvent event) { 
        if (event.getAction() == MotionEvent.ACTION_DOWN) { 
            // 取得左右滑动时手指按下的X坐标 
            touchDownX = event.getX(); 
            return true; 
        } else if (event.getAction() == MotionEvent.ACTION_UP) { 
            // 取得左右滑动时手指松开的X坐标 
            touchUpX = event.getX(); 
            // 从左往右，看前一张 
            if (touchUpX - touchDownX > 100) { 
                // 取得当前要看的图片的index 
                pictureIndex = pictureIndex == 0 ? arrayPictures.length - 1 
                        : pictureIndex - 1; 
                // 设置图片切换的动画 
                imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this, 
                        android.R.anim.slide_in_left)); 
                imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this, 
                        android.R.anim.slide_out_right)); 
                // 设置当前要看的图片 
                imageSwicher.setImageResource(arrayPictures[pictureIndex]); 
                // 从右往左，看下一张 
            } else if (touchDownX - touchUpX > 100) { 
                // 取得当前要看的图片的index 
                pictureIndex = pictureIndex == arrayPictures.length - 1 ? 0 
                        : pictureIndex + 1; 
                // 设置图片切换的动画 
                // 由于Android没有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right编写了slide_out_left和slide_in_right 
                imageSwicher.setInAnimation(AnimationUtils.loadAnimation(this, 
                        R.anim.slide_out_left)); 
                imageSwicher.setOutAnimation(AnimationUtils.loadAnimation(this, 
                        R.anim.slide_in_right)); 
                // 设置当前要看的图片 
                imageSwicher.setImageResource(arrayPictures[pictureIndex]); 
            } 
            return true; 
        } 
        return false; 
    } 
}

ImageSwitcher实例

main.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" > 
  
    <ImageSwitcher 
        android:id="@+id/imageSwicher"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:background="@android:color/white"
        android:gravity="center" > 
    </ImageSwitcher> 
  
</LinearLayout>

0 0