Android UI基礎之ViewFillper實現屏幕切換

 ViewFillper 的簡單使用

Android程序設計中,有時需要實現屏幕切換的動畫效果,這時可以使用ImageSwitcher實現, 但是其比較單一, 而ViewFillper 則比較靈活。可以將文本與視圖同時顯示。屏幕切換指的是在同一個Activity內屏幕間的切換,最常見的情況就是在一個FrameLayout內有多個頁面,比如系統設置頁面,或一個個性化設置頁面

ViewFillper類的繼承關係:

extends ViewAnimator

java.lang.Object

   

android.view.View

 

   

android.view.ViewGroup

 

 

   

android.widget.FrameLayout

 

 

 

   

android.widget.ViewAnimator

 

 

 

 

   

android.widget.ViewFlipper

該類提供了幾個與動畫相關的函數

setInAnimation:設置View進入屏幕時候使用的動畫,該函數有兩個版本,一個接受單個參數,類型爲android.view.animation.Animation;一個接受兩個參數,類型爲Contextint,分別爲Context對象和定義AnimationresourceID。  

 setOutAnimation: 設置View退出屏幕時候使用的動畫,參數setInAnimation函數一樣。

showNext: 調用該函數來顯示FrameLayout裏面的下一個View

showPrevious: 調用該函數來顯示FrameLayout裏面的上一個View

首先要定義每一個動畫的屬相

Inightleft.xml (從左到右進入屏幕)

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

outeftright.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" />

</set>

inrightleft.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" />

</set>

outrightleft.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" />

</set>

Activity_main.xml

<?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.viewfillperuse.MainActivity">
    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:scaleType="centerCrop"
                android:layout_height="match_parent"
                android:src="@drawable/a"
                />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/b"
                />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:scaleType="centerCrop"
                android:layout_height="match_parent"
                android:src="@drawable/c"
                />
        </LinearLayout>
        </ViewFlipper>>
</RelativeLayout>

具體實現如下:

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;

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

    float StertX = 0.0f;
    float EndX = 0.0f;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        if (action == MotionEvent.ACTION_DOWN) {
            StertX = event.getX();
        } else if (action == MotionEvent.ACTION_UP) {
            if (StertX > EndX) {
                viewFlipper.setInAnimation(this, R.anim.inightleft);
                viewFlipper.setOutAnimation(this, R.anim.outrightleft);
                viewFlipper.showNext();// 展示下一個
            } else if (EndX > StertX) {
                viewFlipper.setInAnimation(this, R.anim.inleftright);
                viewFlipper.setOutAnimation(this, R.anim.outleftrigt);
                viewFlipper.showPrevious();//展示 上一張
            }
        }
        return super.onTouchEvent(event);
    }
}

運行後通過點擊屏幕可以實現切換,當然動畫的時間可以在動畫屬性的文件中進行修改。

效果如下:

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章