Android学习之路---ImageSwitcher和TextSwitcher切换图片及文本

一：ImageSwitcher实现图片切换：

1.需要实现ViewSwitcher.ViewFactory和 View.OnTouchListener两个接口;
2.重写两个接口中的makeView()和onTouch(View v, MotionEvent event)方法。

public class ImageSwitcherTest extends Activity implements ViewSwitcher.ViewFactory
        , View.OnTouchListener {

    private ImageSwitcher imageSwitcher;
    private int[] images = {R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e};
    private int index;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_switcher);
        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
        imageSwitcher.setFactory(this);//注册工厂
        imageSwitcher.setOnTouchListener(this);//注册触摸事件
    }

    /**
     * 显示视图
     * 在这里面写出需要切换的View(TextView,ImageView均可)
     *
     * @return
     */
    @Override
    public View makeView() {
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(images[0]);
        imageView.setMaxHeight(600);
        imageView.setMaxWidth(300);
        return imageView;
    }

    private float startX = 0.0f;
    private float endX = 0.0f;


    /**
     * 触屏
     * 核心滑动屏幕改变View代码
     *
     * @param v
     * @param event
     * @return
     */
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();//获取当前的事件动作
        if (action == MotionEvent.ACTION_DOWN) {
            startX = event.getX();
            return true;
        }
        if (action == MotionEvent.ACTION_UP) {
            endX = event.getX();
            if (startX - endX > 20) {//下一张
                index = index + 1 < images.length ? ++index : 0;//切记要先"++"
                imageSwitcher.setInAnimation(this, android.R.anim.fade_in);//设置图片进入动画
                imageSwitcher.setOutAnimation(this, android.R.anim.fade_out);//设置图片切出动画
                imageSwitcher.setImageResource(images[index]);
            } else if (endX - startX > 20) {//上一张
                index = index - 1 <= 0 ? images.length - 1 : --index;
                imageSwitcher.setInAnimation(this, android.R.anim.fade_in);//设置图片进入动画
                imageSwitcher.setOutAnimation(this, android.R.anim.fade_out);//设置图片切出动画
                imageSwitcher.setImageResource(images[index]);
            }

        }
        return true;
    }
}

效果图（真机可以看到渐变效果）

二：TextSwitcher实现图片切换：

和ImageSwitcher几乎一样,故直接上代码

public class TextSwitcherTest extends Activity implements ViewSwitcher.ViewFactory, View.OnTouchListener {

    private TextSwitcher textSwitcher;
    private int index;
    private String texts[] = {"岁月是把无情的杀猪刀", "AAAA", "fighting!", "HHHH！"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_switcher_test);
        textSwitcher = (TextSwitcher) findViewById(R.id.textSwitcher);
        textSwitcher.setOnTouchListener(this);//注册触摸屏事件
        textSwitcher.setFactory(this);//注册工厂

    }

    @Override
    public View makeView() {
        TextView textView = new TextView(this);
        textView.setText(texts[0]);

        return textView;
    }

    private float startX = 0.0f;
    private float endX = 0.0f;

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();//获取当前的事件动作
        if (action == MotionEvent.ACTION_DOWN) {
            startX = event.getX();
            return true;
        }
        if (action == MotionEvent.ACTION_UP) {
            endX = event.getX();
            if (startX - endX > 20) {//下一张
                index = index + 1 < texts.length ? ++index : 0;
                textSwitcher.setInAnimation(this,android.R.anim.fade_in);
                textSwitcher.setOutAnimation(this,android.R.anim.fade_out);
                textSwitcher.setText(texts[index]);
            } else if (endX - startX>20) {//上一张
                index = index - 1 <= 0 ? texts.length - 1 : --index;
                textSwitcher.setInAnimation(this,android.R.anim.fade_in);
                textSwitcher.setOutAnimation(this,android.R.anim.fade_out);
                textSwitcher.setText(texts[index]);
            }

        }


        return true;
    }
}

三：使用ViewFlipper切换任意View

1.需要在布局文件中使用ViewFlipper组件，同时该组件中可以嵌套布局，来存放所需切换的View；
2.可以直接重写onTouchEvent(MotionEvent event)方法，来实现滑动控制；

布局文件代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_view_flipper_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.nuc.rxk.highui2.ViewFlipperTest">

    <ViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/a" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/c" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/d" />
        </LinearLayout>

    </ViewFlipper>
</RelativeLayout>

主类中代码：

public class ViewFlipperTest extends Activity {

    private ViewFlipper viewFlipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_flipper_test);

        viewFlipper= (ViewFlipper) findViewById(R.id.viewFlipper);


    }

    private float startX=0.0f;
    private float endX=0.0f;

    /**
     * 重写Activity中的屏幕触摸事件
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action=event.getAction();
        if(action==MotionEvent.ACTION_DOWN){
            startX=event.getX();
        }else if(action==MotionEvent.ACTION_UP){
            endX=event.getX();
            if(startX>endX){//下一张
                viewFlipper.setInAnimation(this,android.R.anim.fade_in);
                viewFlipper.setOutAnimation(this,android.R.anim.fade_out);
                viewFlipper.showNext();

            }else if(endX>startX){//上一张
                viewFlipper.setOutAnimation(this,android.R.anim.fade_out);
                viewFlipper.setInAnimation(this,android.R.anim.fade_in);
                viewFlipper.showPrevious();
            }
        }
        return super.onTouchEvent(event);
    }
}