android - 滑動效果之ViewFlipper與ViewPager與Gallery

1、ViewFlipper

1）View切換的控件—ViewFlipper介紹

ViewFilpper類繼承於ViewAnimator類。而ViewAnimator類繼承於FrameLayout。

查看ViewAnimator類的源碼可以看出此類的作用主要是為其中的View切換提供動畫效果。該類有如下幾個和動畫相關的方法。

setInAnimation：設置View進入屏幕時候使用的動畫。該方法有兩個重載方法，即可以直接傳入Animation對象，也可以傳入定義的Animation文件的resourceID。

setOutAnimation：設置View退出屏幕時候使用的動畫。使用方法和setInAnimation方法一樣。

showNext：調用該方法可以顯示FrameLayout里面的下一個View。

showPrevious：調用該方法可以來顯示FrameLayout里面的上一個View。

查看ViewFlipper的源碼可以看到，ViewFlipper主要用來實現View的自動切換。該類提供了如下幾個主要的方法。

setFilpInterval：設置View切換的時間間隔。參數為毫秒。

startFlipping：開始進行View的切換，時間間隔是上述方法設置的間隔數。切換會循環進行。

stopFlipping：停止View切換。

setAutoStart：設置是否自動開始。如果設置為“true”，當ViewFlipper顯示的時候View的切換會自動開始。

一般情況下，我們都會使用ViewFilpper類實現View的切換，而不使用它的父類ViewAnimator類。

2）實現滑動—GestureDetector介紹

如果想要實現滑動翻頁的效果，就要了解另外一個類：android.view.GestureDetector類。GestureDetector類中可以用來檢測各種手勢事件。該類有兩個回調接口，分別用來通知具體的事件。

GestureDetector.OnDoubleTapListener：用來通知DoubleTap事件，類似於PC上面的鼠標的雙擊事件。

GestureDetector.OnGestureListener：用來通知普通的手勢事件，該接口有六個回調方法，具體的可以查看API。這里想要實現滑動的判斷，就需要用到其中的onFling()方法。

3）具體的實現

下面的代碼片段詳細說明了如何實現滑動翻頁。

<?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/viewFlipper1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/b" />
         <ImageView
            android:id="@+id/imageView2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/c" />
          <ImageView
            android:id="@+id/imageView3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/d" />
          <ImageView
            android:id="@+id/imageView4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/f" />
         <ImageView
            android:id="@+id/imageView5"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/g" />
    </ViewFlipper>

</LinearLayout>

public class ViewFlipperActivity extends Activity implements OnTouchListener, android.view.GestureDetector.OnGestureListener {
    private ViewFlipper flipper;
    GestureDetector mGestureDetector;  
    private int mCurrentLayoutState;  
    private static final int FLING_MIN_DISTANCE = 80;  
    private static final int FLING_MIN_VELOCITY = 150;  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewflipper);
        
        flipper=(ViewFlipper) this.findViewById(R.id.viewFlipper1);
         //注冊一個用於手勢識別的類  
        mGestureDetector = new GestureDetector(this);  
        //給mFlipper設置一個listener  
        flipper.setOnTouchListener(this);  
        mCurrentLayoutState = 0;  
        //允許長按住ViewFlipper,這樣才能識別拖動等手勢  
        flipper.setLongClickable(true);  
        
    }
    /**  
     * 此方法在本例中未用到，可以指定跳轉到某個頁面  
     * @param switchTo  
     */  
    public void switchLayoutStateTo(int switchTo) {  
        while (mCurrentLayoutState != switchTo)   {  
            if (mCurrentLayoutState > switchTo) {  
                mCurrentLayoutState--;  
                flipper.setInAnimation(inFromLeftAnimation());  
                flipper.setOutAnimation(outToRightAnimation());  
                flipper.showPrevious();  
            } else {  
                mCurrentLayoutState++;  
                flipper.setInAnimation(inFromRightAnimation());  
                flipper.setOutAnimation(outToLeftAnimation());  
                flipper.showNext();  
            }  
   
        }  
 
    } 
    /**  
     * 定義從右側進入的動畫效果  
     * @return  
     */  
    protected Animation inFromRightAnimation() {  
        Animation inFromRight = new TranslateAnimation(  
                Animation.RELATIVE_TO_PARENT, +1.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f);  
        inFromRight.setDuration(200);  
        inFromRight.setInterpolator(new AccelerateInterpolator());  
        return inFromRight;  
    }  
   
    /**  
     * 定義從左側退出的動畫效果  
     * @return  
     */  
    protected Animation outToLeftAnimation() {  
        Animation outtoLeft = new TranslateAnimation(  
                Animation.RELATIVE_TO_PARENT, 0.0f,  
                Animation.RELATIVE_TO_PARENT, -1.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f);  
        outtoLeft.setDuration(200);  
        outtoLeft.setInterpolator(new AccelerateInterpolator());  
        return outtoLeft;  
    }  
   
    /**  
     * 定義從左側進入的動畫效果  
     * @return  
     */  
    protected Animation inFromLeftAnimation() {  
        Animation inFromLeft = new TranslateAnimation(  
                Animation.RELATIVE_TO_PARENT, -1.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f);  
        inFromLeft.setDuration(200);  
        inFromLeft.setInterpolator(new AccelerateInterpolator());  
        return inFromLeft;  
    }  
    
    /**  
     * 定義從右側退出時的動畫效果  
     * @return  
     */  
    protected Animation outToRightAnimation() {  
        Animation outtoRight = new TranslateAnimation(  
                Animation.RELATIVE_TO_PARENT, 0.0f,  
                Animation.RELATIVE_TO_PARENT, +1.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f,  
                Animation.RELATIVE_TO_PARENT, 0.0f);  
        outtoRight.setDuration(200);  
        outtoRight.setInterpolator(new AccelerateInterpolator());  
        return outtoRight;  
    }  
    
    public boolean onDown(MotionEvent e) {
        // TODO Auto-generated method stub
        return false;
    }
    /*  
     * 用戶按下觸摸屏、快速移動后松開即觸發這個事件  
     * e1：第1個ACTION_DOWN MotionEvent  
     * e2：最后一個ACTION_MOVE MotionEvent  
     * velocityX：X軸上的移動速度，像素/秒  
     * velocityY：Y軸上的移動速度，像素/秒  
     * 觸發條件 ：  
     * X軸的坐標位移大於FLING_MIN_DISTANCE，且移動速度大於FLING_MIN_VELOCITY個像素/秒  
     */
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {
         if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE  
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {  
                // 當像左側滑動的時候  
                //設置View進入屏幕時候使用的動畫  
                flipper.setInAnimation(inFromRightAnimation());  
                //設置View退出屏幕時候使用的動畫  
                flipper.setOutAnimation(outToLeftAnimation());  
                flipper.showNext();  
            } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE  
                    && Math.abs(velocityX) > FLING_MIN_VELOCITY) {  
                // 當像右側滑動的時候  
                flipper.setInAnimation(inFromLeftAnimation());  
                flipper.setOutAnimation(outToRightAnimation());  
                flipper.showPrevious();  
            }  
            return false;  
    }
    public void onLongPress(MotionEvent e) {
        // TODO Auto-generated method stub
        
    }
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
            float distanceY) {
        // TODO Auto-generated method stub
        return false;
    }
    public void onShowPress(MotionEvent e) {
        // TODO Auto-generated method stub
        
    }
    public boolean onSingleTapUp(MotionEvent e) {
        // TODO Auto-generated method stub
        return false;
    }
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub
          // 一定要將觸屏事件交給手勢識別類去處理（自己處理會很麻煩的）  
        return mGestureDetector.onTouchEvent(event);  
    }
    
    
}

from：http://blog.csdn.net/arui319

2、ViewPager

說明：

ViewPager用於實現多頁面的切換效果，該類存在於Google的兼容包里面，所以在引用時記得在BuilldPath中加入“android-support-v4.jar”

主布局文件

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" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" />
    </android.support.v4.view.ViewPager>

</LinearLayout>

其中ViewPager為多頁顯示控件，PagerTitleStrip用於顯示當前頁面的標題

主窗口代碼：

PagerTitleDemoActivity.java

package com.ns.pager;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;

public class PagerTitleDemoActivity extends Activity {
    /** Called when the activity is first created. */
    private ViewPager mViewPager;
    private PagerTitleStrip mPagerTitleStrip;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mViewPager = (ViewPager)findViewById(R.id.viewpager);
        mPagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle);
        
        //將要分頁顯示的View裝入數組中
        LayoutInflater mLi = LayoutInflater.from(this);
        View view1 = mLi.inflate(R.layout.view1, null);
        View view2 = mLi.inflate(R.layout.view2, null);
        View view3 = mLi.inflate(R.layout.view3, null);
        
        //每個頁面的Title數據
        final ArrayList<View> views = new ArrayList<View>();
        views.add(view1);
        views.add(view2);
        views.add(view3);
        
        final ArrayList<String> titles = new ArrayList<String>();
        titles.add("tab1");
        titles.add("tab2");
        titles.add("tab3");
        
        //填充ViewPager的數據適配器
        PagerAdapter mPagerAdapter = new PagerAdapter() {
            
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }
            
            @Override
            public int getCount() {
                return views.size();
            }

            @Override
            public void destroyItem(View container, int position, Object object) {
                ((ViewPager)container).removeView(views.get(position));
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return titles.get(position);
            }

            @Override
            public Object instantiateItem(View container, int position) {
                ((ViewPager)container).addView(views.get(position));
                return views.get(position);
            }
        };
        
        mViewPager.setAdapter(mPagerAdapter);
    }
}

運行效果：

from：http://my.oschina.net/fanxiao/blog/40306

3、Gallery

package xiaosi.gallery;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;

public class GalleryActivity extends Activity {
    /** Called when the activity is first created. */
    private Gallery gallery =null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        gallery = (Gallery)findViewById(R.id.gallery);
        //設置圖片適配器
        gallery.setAdapter(new ImageAdapter(this));
        gallery.setSpacing(5);
        
        //設置監聽器
        gallery.setOnItemClickListener(new OnItemClickListener() {
            
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,    long arg3) {
                Toast.makeText(GalleryActivity.this, "點擊了第"+arg2+"張圖片", Toast.LENGTH_LONG).show();
            }
        });
    }
}

class ImageAdapter extends BaseAdapter{
    
    int mGalleryItemBackground;
    private Context context;
    //圖片源數組
    private Integer[] imageInteger={
            R.drawable.a,
            R.drawable.b,
            R.drawable.c,
            R.drawable.d
    };
    public ImageAdapter(Context c){
        context = c;
        TypedArray attr = context.obtainStyledAttributes(R.styleable.HelloGallery);        
        mGalleryItemBackground = attr.getResourceId(R.styleable.HelloGallery_android_galleryItemBackground, 0);        
        attr.recycle();
    }
    // 獲取圖片的個數
    public int getCount() {
        return imageInteger.length;
    }
    // 獲取圖片在庫中的位置  
    public Object getItem(int position) {
        return position;
    }
    // 獲取圖片ID  
    public long getItemId(int position) {
        return position;
    }
    public View getView(int position, View convertView, ViewGroup parent) {
        
        ImageView imageView = new ImageView(context);
        // 給ImageView設置資源
        imageView.setImageResource(imageInteger[position]);
        // 設置顯示比例類型  
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        // 設置布局 圖片120*80 
        imageView.setLayoutParams(new Gallery.LayoutParams(180, 100));
        imageView.setBackgroundResource(mGalleryItemBackground);        
        return imageView;
    }
}

mian.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" >

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:background="?android:galleryItemBackground"/>
</LinearLayout>

創建一個新的XML文件在res/values/目錄下 attrs.xml命名。

這是一個定制的styleable資源,可以應用於一個布局。

 

<?xml version="1.0" encoding="utf-8"?>
<resources>    
    <declare-styleable name="HelloGallery">       
         <attr name="android:galleryItemBackground" />    
    </declare-styleable>
</resources>

 

from：http://blog.csdn.net/sjf0115/article/details/7253430