从零开始水安卓——高级UI组件4（ViewFlipper）

目录

 

ViewFlipper

概述

补充

实现

activity_main.xml

MainActivity

---

ViewFlipper

概述

感觉应该接在上一篇上，又成功多水了一篇文章

ImageSwitcher和TextSwitcher可以简单理解为切换图片和文字

而这个ViewFlipper实现的效果有点类似，它是切换整个视图（屏幕切换）

继承自ViewAnimator

补充

在ImageSwitcher和TextSwitcher对动画效果也有一定的提及如：

setInAnimation

setOutAnimation

再介绍两个相关方法

showNext() 显示FrameLayout里的下一个View

showPrevious 显示FrameLayou里的上一个View

实现

activity_main.xml

首先还是布局的配置，和前面两个的不太一样，在布局中需要把各个视图先定义好。

即在ViewFlipper中写若干个布局...每一个布局都相当于一个界面...

测试的话就简单的用图片来测试了...自备图片资源文件(加什么都可以）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/a1"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/a2"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/a3"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/a4"/>
        </LinearLayout>
    </ViewFlipper>

</android.support.constraint.ConstraintLayout>

 

MainActivity

首先还是绑定组件，既然要滑动离不开OnTouch，实际上Activity也有OnTouchEvent事件，所以这里选择了重写Activity的OnTouchEvent方法。

然后float startX,endX 不能少

onTouch和之前类似，需要注意的是，这里自定义了四个动画（xml文件，定义好存放于res/目录下，建个anim文件夹）

in_leftright.xml（从左到右进，含义下面类似，不赘述）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="-100%p"
        android:toXDelta="0">
    </translate>
</set>

in_rightleft.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="100%p"
        android:toXDelta="0">
    </translate>
</set>

out_rightleft.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:toXDelta="100%p">
    </translate>
</set>

out_leftright.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:toXDelta="100%p">
    </translate>
</set>

代码比较短，根据英文含义大概也能看出意思，不是本文的重点，就跳过这四个代码的分析了。

然后通过

setOutAnimation和setInAnimation

使用我们写好的动画...

然后viewFlipper.showNext()

然后是上一页的话....把动画取反，showNext?showPrevious

代码如下:

package com.example.viewflipper;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper = findViewById(R.id.viewFlipper);
    }
    float startX,endX;
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        if(action==MotionEvent.ACTION_DOWN){
            startX = event.getX();
        }else if(action==MotionEvent.ACTION_UP) {
            if(startX>endX){
                viewFlipper.setInAnimation(this,R.anim.in_rightleft);
                viewFlipper.setOutAnimation(this,R.anim.out_rightleft);
                viewFlipper.showNext();
            }else if(endX>startX){
                viewFlipper.setInAnimation(this,R.anim.in_leftright);
                viewFlipper.setOutAnimation(this,R.anim.out_leftright);
                viewFlipper.showPrevious();
            }
        }
        return super.onTouchEvent(event);
    }
}

效果的话..依旧不太好测试..HaHa 勉强放一张切换过程中的图吧