Android ViewFlipper滑動螢幕切換圖片【安卓進化十九】

 

最近看到ViewFlipper和Animation在一起的用法，感覺很好，我就自己寫了一下，感覺灰常好用，效果比gallery的滾動查看圖片好用多了，這個也是實現滾動螢幕切換圖片，但是使用者體驗要好很多！所以我把自己寫的demo分享一下！希望對大家有用，也方便我自己以後查閱！轉載請標明出處：

http://blog.csdn.net/wdaming1986/article/details/6766058

 

        程式一開始介面，第一張圖片：                               向右滑動螢幕切換到第二張圖片：

                           

                             

 

               向右滑動切換第三張圖片：

        向左滑動就又切換到第二張圖片了！

        以此類推！

     

 

 

  代碼奉上：

一、MainActivity。java類檔案：

 

package com.cn.daming; 

 

import android.app.Activity; 

import android.content.Intent; 

import android.graphics.Color; 

import android.graphics.drawable.GradientDrawable; 

import android.graphics.drawable.GradientDrawable.Orientation; 

import android.os.Bundle; 

import android.util.Log; 

import android.view.GestureDetector; 

import android.view.GestureDetector.OnGestureListener; 

import android.view.LayoutInflater; 

import android.view.MotionEvent; 

import android.view.View; 

import android.view.animation.AnimationUtils; 

import android.widget.ViewFlipper; 

 

public class MainActivity extends Activity implements OnGestureListener{ 

     

    private GestureDetector detector; 

    private ViewFlipper flipper; 

    private final int HELPFILP_RESULT = 106; 

    Intent getMainActivity = null; 

    int count = 1; 

      

    @Override 

    public void onCreate(Bundle savedInstanceState) { 

        super.onCreate(savedInstanceState); 

        drawBackground(); 

        LayoutInflater inflater = LayoutInflater.from(this); 

        final View layout = inflater.inflate(R.layout.view_flipper, null); 

        setContentView(layout); 

        flipper = (ViewFlipper) findViewById(R.id.view_flipper); 

        detector = new GestureDetector(this); 

    } 

 

    public void drawBackground() 

    { 

        GradientDrawable grad = new GradientDrawable(  

                   Orientation.TL_BR, 

                   new int[] {Color.rgb(0, 0, 127), 

                           Color.rgb(0, 0, 255), 

                           Color.rgb(127, 0, 255), 

                           Color.rgb(127, 127, 255), 

                           Color.rgb(127, 255, 255), 

                           Color.rgb(255, 255, 255)}  

        );  

 

        this.getWindow().setBackgroundDrawable(grad); 

    } 

     

    @Override 

    public boolean onTouchEvent(MotionEvent event) { 

        return this.detector.onTouchEvent(event); 

    } 

 

    public boolean onDown(MotionEvent arg0) { 

        // TODO Auto-generated method stub 

        return false; 

    } 

 

    public boolean onFling(MotionEvent e1, MotionEvent e2, float arg2, 

            float arg3) { 

        Log.i("Fling", "Fling Happened!"); 

        if (e1.getX() - e2.getX() > 5) { 

            this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, 

                    R.anim.push_left_in)); 

            this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, 

                    R.anim.push_left_out)); 

            if (count < 3) { 

                this.flipper.showNext(); 

                count++; 

            } 

 

            return true; 

        } else if (e1.getX() - e2.getX() < -5) { 

            this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, 

                    R.anim.push_right_in)); 

            this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, 

                    R.anim.push_right_out)); 

            if (count > 1) { 

                this.flipper.showPrevious(); 

                count--; 

            } 

            return true; 

        } 

        return true; 

    } 

 

    public void onLongPress(MotionEvent arg0) { 

        // TODO Auto-generated method stub 

         

    } 

 

    public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2, 

            float arg3) { 

        // TODO Auto-generated method stub 

        return false; 

    } 

 

    public void onShowPress(MotionEvent arg0) { 

        // TODO Auto-generated method stub 

         

    } 

 

    public boolean onSingleTapUp(MotionEvent arg0) { 

        // TODO Auto-generated method stub 

        return false; 

    } 

} 

 

二、view_flipper.xml布局檔案

 

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:id="@+id/layout" android:orientation="horizontal" 

    android:layout_width="fill_parent" android:layout_height="fill_parent" 

    > 

    <ViewFlipper android:id="@+id/view_flipper" 

        android:layout_width="fill_parent" android:layout_height="fill_parent" 

        android:persistentDrawingCache="animation" android:flipInterval="1000" 

        android:inAnimation="@anim/push_left_in" android:outAnimation="@anim/push_left_out"> 

        <LinearLayout android:orientation="horizontal"  

            android:layout_width="fill_parent" android:layout_height="fill_parent"> 

            <ImageView android:id="@+id/view_bg1" android:src="@drawable/bg1" 

                android:layout_width="fill_parent" android:layout_height="fill_parent" 

                > 

            </ImageView> 

        </LinearLayout> 

        <LinearLayout android:orientation="horizontal"  

            android:layout_width="fill_parent" android:layout_height="fill_parent"> 

            <ImageView android:id="@+id/view_bg2" android:src="@drawable/bg2" 

                android:layout_width="fill_parent" android:layout_height="fill_parent" 

                > 

            </ImageView> 

        </LinearLayout> 

        <LinearLayout android:orientation="horizontal" 

            android:layout_width="fill_parent" android:layout_height="fill_parent"> 

            <ImageView android:id="@+id/view_bg3" android:src="@drawable/bg3" 

                android:layout_width="fill_parent" android:layout_height="fill_parent" 

            > 

            </ImageView> 

        </LinearLayout> 

    </ViewFlipper> 

</LinearLayout>  

 

三、anim動畫布局檔案： www.2cto.com

       1、push_left_in.xml布局檔案：

 

<span style="font-size:13px;"><?xml version="1.0" encoding="utf-8"?> 

<set xmlns:android="http://schemas.android.com/apk/res/android"> 

        <translate android:fromXDelta="100%p" android:toXDelta="0" 

                android:duration="500" /> 

        <alpha android:fromAlpha="0.1" android:toAlpha="1.0" 

                android:duration="500" /> 

</set></span> 

 

<strong> 

</strong>  

       2、push_left_out.xml布局檔案

 

<?xml version="1.0" encoding="utf-8"?> 

<set xmlns:android="http://schemas.android.com/apk/res/android"> 

        <translate android:fromXDelta="0" android:toXDelta="-100%p" 

                android:duration="500" /> 

        <alpha android:fromAlpha="1.0" android:toAlpha="0.1" 

                android:duration="500" /> 

</set> 

       3、push_right_in.xml布局檔案

 

<span style="font-size:13px;color:#000000;"><?xml version="1.0" encoding="UTF-8"?> 

<set xmlns:android="http://schemas.android.com/apk/res/android"> 

        <translate android:fromXDelta="-100%p" android:toXDelta="0" 

                android:duration="500" /> 

        <alpha android:fromAlpha="0.1" android:toAlpha="1.0" 

                android:duration="500" /> 

</set></span> 

 

       4、push_right_out.xml布局檔案

 

<?xml version="1.0" encoding="UTF-8"?> 

<set xmlns:android="http://schemas.android.com/apk/res/android"> 

        <translate android:fromXDelta="0" android:toXDelta="100%p" 

                android:duration="500" /> 

        <alpha android:fromAlpha="1.0" android:toAlpha="0.1" 

                android:duration="500" /> 

</set>