ImageSwitch和TextSwitcher和ViewFlipper切换

最新推荐文章于 2021-08-18 14:57:45 发布

原创最新推荐文章于 2021-08-18 14:57:45 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

android Studio学习专栏收录该内容

42 篇文章

订阅专栏

博客介绍了图片、文本及屏幕间切换的ViewFlipper类，阐述其几个动画相关函数，如setInAnimation、setOutAnimation等，还提及不同方向进出屏幕的动画xml文件，最后提到了相关java代码。

图片划屏切换

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

public class MainActivity_pswitch extends AppCompatActivity implements ViewSwitcher.ViewFactory,View.OnTouchListener {

    private ImageSwitcher imageSwitcher;
    private int[] images = {R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d};
    private int index;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_pswitch);
        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitch);
        imageSwitcher.setOnTouchListener(this);
        imageSwitcher.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;
                imageSwitcher.setInAnimation(this,android.R.anim.fade_in);
                imageSwitcher.setInAnimation(this,android.R.anim.fade_out);
            }else if(endX-startX>20){//上一张
                index = index-1>=0?--index:images.length-1;
                imageSwitcher.setInAnimation(this,android.R.anim.fade_in);
                imageSwitcher.setInAnimation(this,android.R.anim.fade_out);
            }
            imageSwitcher.setImageResource(images[index]);
        }

        return true;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_pswitch"
    android:padding="16dp">

    <ImageSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageSwitch"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"/>

</RelativeLayout>

文本切换

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.ViewSwitcher;

public class MainActivity_textsw extends AppCompatActivity implements ViewSwitcher.ViewFactory,View.OnTouchListener {

    private TextSwitcher textSwitcher;
    private String[] texts = {"疏星淡月秋千院","愁云恨雨芙蓉面"};
    private int index;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_textsw);
        textSwitcher = (TextSwitcher)findViewById(R.id.textSwitcher);
        textSwitcher.setOnTouchListener(this);
        textSwitcher.setFactory(this);

    }

    @Override
    public View makeView() {
        TextView tv = new TextView(this);
        tv.setText(texts[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<texts.length?++index:0;
                textSwitcher.setInAnimation(this,android.R.anim.fade_in);
                textSwitcher.setInAnimation(this,android.R.anim.fade_out);
            }else if(endX-startX>20){//上一张
                index = index-1>=0?--index:texts.length-1;
                textSwitcher.setInAnimation(this,android.R.anim.fade_in);
                textSwitcher.setInAnimation(this,android.R.anim.fade_out);
            }
            textSwitcher.setText(texts[index]);
        }

        return true;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_textsw"
    android:padding="16dp">

    <TextSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/textSwitcher"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"/>
</RelativeLayout>

屏幕间切换ViewFlipper

该类有几个动画相关函数：

setInAnimation：进入屏幕使用的动画，可以接受单个参数，类型为android.view.animation.Animation;一个接受两个参数，类型为Context和int，分别为context对象和定义Animation的resourceID。

setOutAnimation：设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。

showNext：调用该函数来显示FrameLayout里面的下一个View。

showPrevious：调用该函数来显示FrameLayout里面的上一个View。

in_leftright.xml——从左到右进入屏幕

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />
</set>

out_leftright.xml——从左到右出去屏幕

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:toXDelta="100%p" />
</set>

in_rightleft.xml——从右到左进入屏幕

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

out_rightleft.xml——从右到左出去屏幕

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />
</set>

java代码

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

public class MainActivity_vf extends AppCompatActivity {
    private ViewFlipper viewFlipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_vf);
        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
    }

    float statX,endX;
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int action = event.getAction();
        if(action==MotionEvent.ACTION_DOWN){
            statX = event.getX();
        }else if(action==MotionEvent.ACTION_UP){
            endX = event.getX();
            if(statX>endX){//next
                viewFlipper.setInAnimation(this,R.anim.in_rightleft);
                viewFlipper.setOutAnimation(this,R.anim.out_rightleft);
                viewFlipper.showNext();
            }else if(endX>statX){//pre
                viewFlipper.setInAnimation(this,R.anim.in_leftright);
                viewFlipper.setOutAnimation(this,R.anim.out_leftright);
                viewFlipper.showPrevious();
            }
        }

        return super.onTouchEvent(event);
    }
}