ANDROID中使用VIEWFLIPPER類實現(xiàn)屏幕切換(關(guān)于坐標軸的問題已補充更改)
屏幕切換指的是在同一個Activity內(nèi)屏幕間的切換,ViewFlipper繼承了Framelayout類,ViewAnimator類的作用是為FrameLayout里面的View切換提供動畫效果。如下動圖:
該類有如下幾個和動畫相關(guān)的函數(shù):
- setInAnimation:設(shè)置View進入屏幕時候使用的動畫,該函數(shù)有兩個版本,一個接受單個參數(shù),類型為android.view.animation.Animation;一個接受兩個參數(shù),類型為Context和int,分別為Context對象和定義Animation的resourceID。
- setOutAnimation: 設(shè)置View退出屏幕時候使用的動畫,參數(shù)setInAnimation函數(shù)一樣。
- showNext: 調(diào)用該函數(shù)來顯示FrameLayout里面的下一個View。
- showPrevious: 調(diào)用該函數(shù)來顯示FrameLayout里面的上一個View。
下面通過坐標軸的形式為大家演示動畫實現(xiàn)方式:
由上圖可知,以屏幕左下角為數(shù)學(xué)坐標軸的原點,屏幕下邊框為X軸,左邊框為Y軸,當前屏幕顯示為圖二,如果要看圖一,則需要圖一由左至右(相對屏幕而言)進入屏幕,圖一X軸初始坐標為-100%p,移動到屏幕位置時圖一X軸變?yōu)?(因為本次演示為橫向滑動,所以不涉及Y軸);同理圖三要進入屏幕,則需由右至左,X軸由100%p變?yōu)?.清楚了坐標位置,我們要實現(xiàn)四種動畫效果,就會很簡單,下面代碼(需建立在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="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——從右到左進入屏幕:
<?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>
動畫效果建立完成,建立
Layout中view_layout.xml布局文件(本次直接將定義動畫的三張圖片直接通過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功能實現(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;//聲明手指按下時X的坐標 float endX;//聲明手指松開后X的坐標 @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) { //判斷捕捉到的動作為按下,則設(shè)置按下點的X坐標starX if(event.getAction()==MotionEvent.ACTION_DOWN){ startX=event.getX(); //判斷捕捉到的動作為抬起,則設(shè)置松開點X坐標endX }else if(event.getAction()==MotionEvent.ACTION_UP){ endX=event.getX(); //由右到左滑動屏幕,X值會減小,圖片由屏幕右側(cè)進入屏幕 if(startX>endX){ //進出動畫成對 vf.setInAnimation(this,R.anim.in_rightleft); vf.setOutAnimation(this,R.anim.out_rightleft); vf.showNext();//顯示下個view //由左到右滑動屏幕,X值會增大,圖片由屏幕左側(cè)進入屏幕 }else if(startX<endX){ vf.setInAnimation(this,R.anim.in_leftright); vf.setOutAnimation(this,R.anim.out_leftright); vf.showPrevious();//顯示上個view } } return true; } }
在練習(xí)這里時,動畫的顯示效果方式困擾了我好久,這才想到了通過坐標軸的形式體現(xiàn)動畫實現(xiàn)原理,畫成的那一瞬間,整個人頓似醍醐灌頂,忍不住想要寫成博文分享給大家,共勉!
后續(xù)更改補充:發(fā)文后,好友提醒在安卓開發(fā)中Android屏幕坐標系統(tǒng),不同于一般數(shù)學(xué)模型,原點應(yīng)該位于左上角且Y軸向下遞增,經(jīng)過查閱資料,確實如此,現(xiàn)更改坐標軸如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android編程基礎(chǔ)之簡單Button事件響應(yīng)綜合提示控件Toast應(yīng)用示例
這篇文章主要介紹了Android編程基礎(chǔ)之簡單Button事件響應(yīng)綜合提示控件Toast應(yīng)用,結(jié)合實例形式分析了Button事件響應(yīng)與Toast提醒的相關(guān)操作技巧,需要的朋友可以參考下2016-10-10Android應(yīng)用中使用ListView來分頁顯示刷新的內(nèi)容
這篇文章主要介紹了Android應(yīng)用中使用ListView來分頁顯示刷新的內(nèi)容的方法,展示了一個點擊按鈕進行刷新的實例以及下拉刷新分頁顯示的要點解析,需要的朋友可以參考下2016-04-04Android中Glide加載圖片并實現(xiàn)圖片緩存
本篇文章主要介紹了Android中Glide加載圖片并實現(xiàn)圖片緩存,這里和大家簡單的分享一下Glide的使用方法以及緩存 ,有興趣的可以了解一下。2017-03-03Android開發(fā)教程之Fragment定義、創(chuàng)建與使用方法詳解【包含Activity通訊,事務(wù)執(zhí)行等】
這篇文章主要介紹了Android開發(fā)教程之Fragment定義、創(chuàng)建與使用方法,詳細介紹了Fragment的概念、功能、定義、創(chuàng)建及使用方法,包括Fragment與Activity通訊,Fragment事務(wù)執(zhí)行及Fragment應(yīng)用示例等,需要的朋友可以參考下2017-11-11Android?Flutter實現(xiàn)創(chuàng)意時鐘的示例代碼
時鐘這個東西很奇妙,總能當做創(chuàng)意實現(xiàn)的入口。這篇文章主要介紹了如何通過Android?Flutter實現(xiàn)一個創(chuàng)意時鐘,感興趣的小伙伴可以了解一下2023-03-03