Android UI之ImageSwitcher && TextSwitcher 实现图文翻页

ImageViewSwitch是Android中控制图片展示效果的一个控件，如：幻灯片效果

ImageViewSwitcher 粗略的理解就是ImageView的选择器。

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

在使用ImageViewSwitcher 时需要注册工厂类。

 

实现如下：

布局如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xiyou.com.imageswitcher.MainActivity">
    <ImageSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageSwitcher"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

 

public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory,View.OnTouchListener {
   private ImageSwitcher switcher;
    private int []images = {
            R.mipmap.aa,
            R.mipmap.bb,
            R.mipmap.cc,
            R.mipmap.dd,
            R.mipmap.ee
    };
    private int index ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        switcher= (ImageSwitcher) findViewById(R.id.imageSwitcher);
        switcher.setOnTouchListener(this);
        switcher.setFactory(this);//设置工厂
    }
    @Override
    public View makeView() {
        ImageView iv = new ImageView(this);
        iv.setImageResource(images[0]);
        return iv;
    }
    float StartX= 0.0f;
    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<images.length?++index:0;
                switcher.setInAnimation(this,android.R.anim.fade_in);//图片进入时动画
                switcher.setOutAnimation(this,android.R.anim.fade_out);//图片退出时动画
                System.out.println("index------->"+index);
                switcher.setImageResource(images[index]);
            } else if (EndX-StartX>20){ // 上一张
                index=index-1>=0?--index:images.length-1;
                switcher.setInAnimation(this,android.R.anim.fade_out);//图片进入时动画
                switcher.setOutAnimation(this,android.R.anim.fade_in);//图片退出时动画
                switcher.setImageResource(images[index]);
            }
            System.out.println(">>>>>>>>"+index);

        }
        return true;
    }
}

实现上面的的效果，需要实现View.OnTouchListener接口，需要注册  switcher.setOnTouchListener(this);  

 

TextViewSwitcher 的使用与ImageViewSwitch 使用类似，代码如下：

public class MainActivity2 extends AppCompatActivity implements ViewSwitcher.ViewFactory ,View.OnTouchListener{
   private TextSwitcher textSwitcher;
    private String []text= {"床前明月光，疑是地上霜","举头望明月，低头思故乡","离离原上草，一岁一枯荣"};
    private int index;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main2);
        textSwitcher=(TextSwitcher) findViewById(R.id.textSwitcher);
        textSwitcher.setOnTouchListener(this);
        textSwitcher.setFactory(this);
    }
    @Override
    public View makeView() {
        TextView tv = new TextView(this);
        tv.setText(text[index]);
        return tv;
    }
    float StartX= 0.0f;
    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<text.length?++index:0;
                textSwitcher.setInAnimation(this, android.R.anim.fade_in);
                textSwitcher.setOutAnimation(this, android.R.anim.fade_out);
                System.out.println("index------->"+index);
                textSwitcher.setText(text[index]);
            } else if (EndX-StartX>20){ 
                index=index-1>=0?--index:text.length-1;
                textSwitcher.setInAnimation(this,android.R.anim.fade_out);
                textSwitcher.setOutAnimation(this,android.R.anim.fade_in);
                textSwitcher.setText(text[index]);
            }
            System.out.println(">>>>>>>>"+index);

        }
        return true;
        }
    }