Android图片滑动的实现

浏览数：17 / 时间：2015年06月11日

　　初学Android，不得不承认Android在UI效果实现上的强大，完全不在html5之下，不过这还得归功于Android丰富的SDK，以下尝试借助ViewFlipper类来实现通过手势滑动图片的效果，先上Java代码：

package com.example.sportdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnTouchListener, OnGestureListener {
    private ViewFlipper mViewFlipper;
    private GestureDetector mGestureDetector;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mViewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        mGestureDetector = new GestureDetector(this, this);
        mViewFlipper.setOnTouchListener(this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        return mGestureDetector.onTouchEvent(event);
    }
    
    @Override
    public boolean onDown(MotionEvent e) {
        return true;
    }

    @Override
    public void onShowPress(MotionEvent e) {
        
    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2,
            float distanceX, float distanceY) {
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {
        
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2,
            float velocityX, float velocityY) {
        if (e1.getX() > e2.getX()) {  
            showNext();  
        }
        else if (e1.getX() < e2.getX()) {  
            showPrev();  
        }
        
        return false;
    }
    
    private void showPrev() {
        if (mViewFlipper.getChildCount() <= 1) {  
            return;  
        }  

        mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));  
        mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));  
        mViewFlipper.showPrevious();
    }

    private void showNext() {
        if (mViewFlipper.getChildCount() <= 1) {  
            return;  
        }  
        
        mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));  
        mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));  
        mViewFlipper.showNext();    
    }
}

这里强调一点， onDown回调函数要返回true，否则onFling会不被调用。

Xml布局文件：

    <ViewFlipper 
        android:id="@+id/viewFlipper" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" >
        
        <RelativeLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/image01"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:contentDescription="@string/ad_text01"
                android:src="@drawable/image01" />

            <TextView
                android:id="@+id/text01"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/image01"
                android:gravity="center_horizontal"
                android:text="@string/ad_text01" />

        </RelativeLayout>
        
        <RelativeLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:orientation="vertical" >
            
            <ImageView 
                android:id="@+id/image02" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content"
                android:src="@drawable/image02" 
                android:contentDescription="@string/ad_text02" />

            <TextView
                android:id="@+id/text02"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/image02"
                android:gravity="center_horizontal"
                android:text="@string/ad_text02" />

        </RelativeLayout>
        
        <RelativeLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:orientation="vertical" >
            
            <ImageView 
                android:id="@+id/image03" 
                android:layout_width="match_parent" 

                android:layout_height="wrap_content" 
                android:src="@drawable/image03" 
                android:contentDescription="@string/ad_text03" />  

            <TextView
                android:id="@+id/text03"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/image03"
                android:gravity="center_horizontal"
                android:text="@string/ad_text03" />

        </RelativeLayout>
        
        <RelativeLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:orientation="vertical" >
            
            <ImageView 
                android:id="@+id/image04" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content"
                android:src="@drawable/image04" 
                android:contentDescription="@string/ad_text04" />  

            <TextView
                android:id="@+id/text04"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/image04"
                android:gravity="center_horizontal"
                android:text="@string/ad_text04" />

        </RelativeLayout>
    </ViewFlipper>

Xml动画文件：

push_left_in.xml

<?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="600" />
</set>

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="600" />
</set>

push_right_in.xml

<?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="600" />
</set>

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="600" />
</set>