Android的ImageSwitcher实现原理

最新推荐文章于 2022-04-23 11:36:05 发布

转载最新推荐文章于 2022-04-23 11:36:05 发布 · 579 阅读

文章标签：

#android #import #layout #encoding #float #class

本文详细解析了ImageSwitcher和TextSwitcher的工作原理，并提供了实际的Demo代码，帮助开发者理解如何使用这些组件进行左右滑动浏览图片或文本。

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

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

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

ImageSwitcher原理

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

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

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

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

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

Java代码
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;  
    }  
}

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

slide_in_right.xml

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

slide_out_left.xml

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

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

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

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" >  
  
    <TextSwitcher  
        android:id="@+id/textSwicher"  
        android:layout_width="fill_parent"  
        android:layout_height="0dip"  
        android:layout_weight="1"  
        android:background="@android:color/white"  
        android:gravity="center" >  
    </TextSwitcher>  
  
</LinearLayout>

TextSwitcherDemoActivity.java

package com.tianjf;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.view.Gravity;  
import android.view.MotionEvent;  
import android.view.View;  
import android.view.View.OnTouchListener;  
import android.view.ViewGroup.LayoutParams;  
import android.view.animation.AnimationUtils;  
import android.widget.TextSwitcher;  
import android.widget.TextView;  
import android.widget.ViewSwitcher.ViewFactory;  
  
/** 
 * 一个左右滑动浏览文本的Demo 
 *  
 * @author tianjf 
 *  
 */  
public class TextSwitcherDemoActivity extends Activity implements ViewFactory,  
        OnTouchListener {  
  
    private TextSwitcher textSwicher;  
  
    // 图片数组  
    private String[] arrayTexts = { "文本01", "文本02", "文本03", "文本04" };  
    // 要显示的图片在图片数组中的Index  
    private int textIndex;  
    // 左右滑动时手指按下的X坐标  
    private float touchDownX;  
    // 左右滑动时手指松开的X坐标  
    private float touchUpX;  
  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
  
        textSwicher = (TextSwitcher) findViewById(R.id.textSwicher);  
  
        // 为TextSwitcher设置Factory，用来为TextSwitcher制造TextView  
        textSwicher.setFactory(this);  
        // 设置TextSwitcher左右滑动事件  
        textSwicher.setOnTouchListener(this);  
    }  
  
    @Override  
    public View makeView() {  
        TextView textView = new TextView(this);  
        textView.setTextSize(100);  
        textView.setLayoutParams(new TextSwitcher.LayoutParams(  
                LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
        textView.setGravity(Gravity.CENTER);  
        textView.setText(arrayTexts[textIndex]);  
        return textView;  
    }  
  
    @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  
                textIndex = textIndex == 0 ? arrayTexts.length - 1  
                        : textIndex - 1;  
                // 设置文本切换的动画  
                textSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
                        android.R.anim.slide_in_left));  
                textSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
                        android.R.anim.slide_out_right));  
                // 设置当前要看的文本  
                textSwicher.setText(arrayTexts[textIndex]);  
                // 从右往左，看下一张  
            } else if (touchDownX - touchUpX > 100) {  
                // 取得当前要看的文本的index  
                textIndex = textIndex == arrayTexts.length - 1 ? 0  
                        : textIndex + 1;  
                // 设置文本切换的动画  
                // 由于Android没有提供slide_out_left和slide_in_right，所以仿照slide_in_left和slide_out_right编写了slide_out_left和slide_in_right  
                textSwicher.setInAnimation(AnimationUtils.loadAnimation(this,  
                        R.anim.slide_out_left));  
                textSwicher.setOutAnimation(AnimationUtils.loadAnimation(this,  
                        R.anim.slide_in_right));  
                // 设置当前要看的文本  
                textSwicher.setText(arrayTexts[textIndex]);  
            }  
            return true;  
        }  
        return false;  
    }  
}

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

本文转载自:http://blog.youkuaiyun.com/yuzhiboyi/article/details/7700180#t0