快捷導(dǎo)航

ANDROID中使用VIEWFLIPPER類實(shí)現(xiàn)屏幕切換（關(guān)于坐標(biāo)軸的問(wèn)題已補(bǔ)充更改）

更新時(shí)間：2016年11月29日 08:24:40 作者：潘侯爺

本篇文章主要介紹了ANDROID中使用VIEWFLIPPER類實(shí)現(xiàn)屏幕切換，具有一定的參考價(jià)值，有興趣的可以了解一下。

屏幕切換指的是在同一個(gè)Activity內(nèi)屏幕間的切換，ViewFlipper繼承了Framelayout類，ViewAnimator類的作用是為FrameLayout里面的View切換提供動(dòng)畫(huà)效果。如下動(dòng)圖：

該類有如下幾個(gè)和動(dòng)畫(huà)相關(guān)的函數(shù)：

setInAnimation：設(shè)置View進(jìn)入屏幕時(shí)候使用的動(dòng)畫(huà)，該函數(shù)有兩個(gè)版本，一個(gè)接受單個(gè)參數(shù)，類型為android.view.animation.Animation；一個(gè)接受兩個(gè)參數(shù)，類型為Context和int，分別為Context對(duì)象和定義Animation的resourceID。
setOutAnimation: 設(shè)置View退出屏幕時(shí)候使用的動(dòng)畫(huà)，參數(shù)setInAnimation函數(shù)一樣。
showNext：調(diào)用該函數(shù)來(lái)顯示FrameLayout里面的下一個(gè)View。
showPrevious：調(diào)用該函數(shù)來(lái)顯示FrameLayout里面的上一個(gè)View。

下面通過(guò)坐標(biāo)軸的形式為大家演示動(dòng)畫(huà)實(shí)現(xiàn)方式：

由上圖可知，以屏幕左下角為數(shù)學(xué)坐標(biāo)軸的原點(diǎn)，屏幕下邊框?yàn)閄軸，左邊框?yàn)閅軸，當(dāng)前屏幕顯示為圖二，如果要看圖一，則需要圖一由左至右(相對(duì)屏幕而言)進(jìn)入屏幕，圖一X軸初始坐標(biāo)為-100%p，移動(dòng)到屏幕位置時(shí)圖一X軸變?yōu)?（因?yàn)楸敬窝菔緸闄M向滑動(dòng)，所以不涉及Y軸）；同理圖三要進(jìn)入屏幕，則需由右至左，X軸由100%p變?yōu)?.清楚了坐標(biāo)位置，我們要實(shí)現(xiàn)四種動(dòng)畫(huà)效果，就會(huì)很簡(jiǎn)單，下面代碼（需建立在res目錄下自建的anim文件夾下）演示四種動(dòng)畫(huà)效果：

in_leftright.xml——從左到右進(jìn)入屏幕：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate
    android:duration="500"
    android:fromXDelta="-100%p"
    android:toXDelta="0"/>
</set>
out_leftright.xml——從左到右出去屏幕：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate
    android:duration="500"
    android:fromXDelta="0"
    android:toXDelta="100%p"/>
</set>

in_rightleft.xml——從右到左進(jìn)入屏幕：

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

</set>

out_rightleft.xml——從右到左出去屏幕：

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

動(dòng)畫(huà)效果建立完成，建立

Layout中view_layout.xml布局文件（本次直接將定義動(dòng)畫(huà)的三張圖片直接通過(guò)LinearLayOut布局到ViewFlipper中）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <ViewFlipper
    android:id="@+id/vf"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/sample_1" />
    </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="@mipmap/sample_2" />
    </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="@mipmap/sample_3" />
    </LinearLayout>
  </ViewFlipper>
</LinearLayout>

Activity中Java功能實(shí)現(xiàn)代碼：

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ViewFlipper;
/**
 * Created by panchengjia on 2016/11/28.
 */
public class FlipperActivity extends AppCompatActivity implements View.OnTouchListener{
  private ViewFlipper vf;
  float startX;//聲明手指按下時(shí)X的坐標(biāo)
  float endX;//聲明手指松開(kāi)后X的坐標(biāo)
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.viewflipper_layout);
    vf= (ViewFlipper) findViewById(R.id.vf);
    vf.setOnTouchListener(this);
  }
  @Override
  public boolean onTouch(View v, MotionEvent event) {
    //判斷捕捉到的動(dòng)作為按下，則設(shè)置按下點(diǎn)的X坐標(biāo)starX
    if(event.getAction()==MotionEvent.ACTION_DOWN){
      startX=event.getX();
      //判斷捕捉到的動(dòng)作為抬起，則設(shè)置松開(kāi)點(diǎn)X坐標(biāo)endX
    }else if(event.getAction()==MotionEvent.ACTION_UP){
      endX=event.getX();
      //由右到左滑動(dòng)屏幕，X值會(huì)減小，圖片由屏幕右側(cè)進(jìn)入屏幕
      if(startX>endX){
        //進(jìn)出動(dòng)畫(huà)成對(duì)
        vf.setInAnimation(this,R.anim.in_rightleft);
        vf.setOutAnimation(this,R.anim.out_rightleft);
        vf.showNext();//顯示下個(gè)view
        //由左到右滑動(dòng)屏幕，X值會(huì)增大，圖片由屏幕左側(cè)進(jìn)入屏幕
      }else if(startX<endX){
        vf.setInAnimation(this,R.anim.in_leftright);
        vf.setOutAnimation(this,R.anim.out_leftright);
        vf.showPrevious();//顯示上個(gè)view
      }
    }
    return true;
  }
}

在練習(xí)這里時(shí)，動(dòng)畫(huà)的顯示效果方式困擾了我好久，這才想到了通過(guò)坐標(biāo)軸的形式體現(xiàn)動(dòng)畫(huà)實(shí)現(xiàn)原理，畫(huà)成的那一瞬間，整個(gè)人頓似醍醐灌頂，忍不住想要寫(xiě)成博文分享給大家，共勉！

后續(xù)更改補(bǔ)充：發(fā)文后，好友提醒在安卓開(kāi)發(fā)中Android屏幕坐標(biāo)系統(tǒng)，不同于一般數(shù)學(xué)模型，原點(diǎn)應(yīng)該位于左上角且Y軸向下遞增，經(jīng)過(guò)查閱資料，確實(shí)如此，現(xiàn)更改坐標(biāo)軸如下：