步步為營_Android開發課[30]_使用者介面之ViewFlipper

標籤：viewflippe   效果   開發   滑動   執行個體   

Focus on technology, enjoy life！—— QQ：804212028
瀏覽連結：http://blog.csdn.net/y18334702058/article/details/44624305

• 主題：使用者介面之ViewFlipper
  -
  ViewFlipper多視圖切換（執行個體）
  實現效果：
  左右滑動，類比歡迎介面的圖片切換。

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"     android:layout_height="fill_parent"    android:orientation="vertical">    <ViewFlipper         android:id="@+id/viewFlipper"        android:layout_width="fill_parent"         android:layout_height="fill_parent">        <!-- 第一個頁面 -->        <LinearLayout             android:layout_width="fill_parent"            android:layout_height="fill_parent"             android:gravity="center">            <ImageView                 android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:src="@drawable/a1" />        </LinearLayout>        <!-- 第二個頁面 -->        <LinearLayout             android:layout_width="fill_parent"            android:layout_height="fill_parent"             android:gravity="center">            <ImageView                 android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:src="@drawable/a2"                android:gravity="center" />        </LinearLayout>        <!-- 第三個頁面 -->        <LinearLayout             android:layout_width="fill_parent"            android:layout_height="fill_parent"             android:gravity="center">            <ImageView                 android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:src="@drawable/a3"                android:gravity="center" />        </LinearLayout>        <!-- 第四個頁面 -->        <LinearLayout             android:layout_width="fill_parent"            android:layout_height="fill_parent"             android:gravity="center">            <ImageView                 android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:src="@drawable/a4"                android:gravity="center" />        </LinearLayout>    </ViewFlipper></LinearLayout>

在res檔案下建立anim檔案，再在anim檔案下建立四個動畫布局。

left_to_right_in.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>

left_to_right_out.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" /></set>

right_to_left_in.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>

right_to_left_out.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" /></set>

MainActivity.java:

import android.app.Activity;import android.os.Bundle;import android.view.MotionEvent;import android.widget.ViewFlipper;public class MainActivity extends Activity {    ViewFlipper viewFlipper = null;    float startX;    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        init();    }    private void init() {        viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFlipper);    }    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {        case MotionEvent.ACTION_DOWN:            startX = event.getX();            break;        case MotionEvent.ACTION_UP:            if (event.getX() > startX) { // 向右滑動                viewFlipper.setInAnimation(this, R.anim.left_to_right_in);                viewFlipper.setOutAnimation(this, R.anim.left_to_right_out);                viewFlipper.showNext();            } else if (event.getX() < startX) { // 向左滑動                viewFlipper.setInAnimation(this, R.anim.right_to_left_in);                viewFlipper.setOutAnimation(this, R.anim.right_to_left_out);                viewFlipper.showPrevious();            }            break;        }        return super.onTouchEvent(event);    }}

Focus on technology, enjoy life！—— QQ：804212028
瀏覽連結：http://blog.csdn.net/y18334702058/article/details/44624305

步步為營_Android開發課[30]_使用者介面之ViewFlipper