Android中實現滑動翻頁—使用ViewFlipper(dp和px之間進行轉換)

Android中dp和px之間進行轉換
 
在xml佈局文件中,我們既可以設置px,也可以設置dp(或者dip)。一般情況下,我們都會選擇使用dp,這樣可以保證不同屏幕分辨率的機器上佈局一致。但是在代碼中,如何處理呢?很多控件的方法中都只提供了設置px的方法,例如setPadding,並沒有提供設置dp的方法。這個時候,如果需要設置dp的話,就要將dp轉換成px了。

以下是一個應用類,方便進行px和dp之間的轉換。

import android.content.Context;  
 
  
 
public class DensityUtil {  
 
  
 
    /** 
     * 根據手機的分辨率從 dp 的單位 轉成爲 px(像素) 
     */  
 
    public static int dip2px(Context context, float dpValue) {  
 
        final float scale = context.getResources().getDisplayMetrics().density;  
 
        return (int) (dpValue * scale + 0.5f);  
 
    }  
 
  
 
    /** 
     * 根據手機的分辨率從 px(像素) 的單位 轉成爲 dp 
     */  
 
    public static int px2dip(Context context, float pxValue) {  
 
        final float scale = context.getResources().getDisplayMetrics().density;  
 
        return (int) (pxValue / scale + 0.5f);  
 
    }  
 
}


 

有一些場景,我們需要向用戶展示一系列的頁面。比如我們正在開發一個看漫畫的應用,可能就需要向用戶展示一張一張的漫畫圖片,用戶使用手指滑動屏幕,可以在前一幅漫畫和後一幅漫畫之間切換。這個時候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)具體的實現

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

public class ViewFlipperActivity extends Activity implements OnGestureListener {  
 
      
 
    private static final int FLING_MIN_DISTANCE = 100;  
 
    private ViewFlipper flipper;  
 
    private GestureDetector detector;  
 
  
 
    @Override  
 
    protected void onCreate(Bundle savedInstanceState) {  
 
        super.onCreate(savedInstanceState);  
 
        setContentView(R.layout.viewflipper);  
 
        // 註冊一個GestureDetector  
 
        detector = new GestureDetector(this);  
 
        flipper = (ViewFlipper) findViewById(R.id.ViewFlipper);  
 
        ImageView image1 = new ImageView(this);  
 
        image1.setBackgroundResource(R.drawable.image1);  
 
        // 增加第一個view  
 
        flipper.addView(image1);  
 
        ImageView image2 = new ImageView(this);  
 
        image2.setBackgroundResource(R.drawable.image2);  
 
        // 增加第二個view  
 
        flipper.addView(image2);  
 
    }  
 
  
 
    @Override  
 
    public boolean onTouchEvent(MotionEvent event) {  
 
        // 將觸屏事件交給手勢識別類處理  
 
        return this.detector.onTouchEvent(event);  
 
    }  
 
  
 
    @Override  
 
    public boolean onDown(MotionEvent e) {  
 
        return false;  
 
    }  
 
  
 
    @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() > FLING_MIN_DISTANCE) {  
 
            //設置View進入和退出的動畫效果  
 
            this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,  
 
                    R.anim.left_in));  
 
            this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
 
                    R.anim.left_out));  
 
            this.flipper.showNext();  
 
            return true;  
 
        }  
 
        if (e1.getX() - e2.getX() < -FLING_MIN_DISTANCE) {  
 
            this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,  
 
                    R.anim.right_in));  
 
            this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,  
 
                    R.anim.right_out));  
 
            this.flipper.showPrevious();  
 
            return true;  
 
        }  
 
        return false;  
 
    }  
 
}  
 

在這段代碼裏,創建了兩個IamgeView(用來顯示圖片),加入到了ViewFlipper中。程序運行後,當用手指在屏幕上向左滑動,會顯示前一個圖片,用手指在屏幕上向右滑動,會顯示下一個圖片。實現滑動切換的主要代碼都在onFling()方法中,用戶按下觸摸屏,快速移動後鬆開,就會觸發這個事件。在這段代碼示例中,對手指滑動的距離進行了計算,如果滑動距離大於100像素,就做切換動作,否則不做任何切換動作。

可以看到,onFling()方法有四個參數,e1和e2上面代碼用到了,比較好理解。參數velocityX和velocityY是做什麼用的呢?velocityX和velocityY實際上是X軸和Y軸上的移動速度,單位是像素/秒。結合這兩個參數,可以判斷滑動的速度,從而做更多的處理。

爲了顯示出滑動的效果,這裏調用了ViewFlipper的setInAnimation()和setOutAnimation()方法設置了View進入和退出的動畫。對於動畫的使用,這裏不再贅述,也不再給出具體的XML文件代碼了。

 
另外,在上面的代碼基礎上說些額外的話題。

在Xml佈局文件中,我們既可以設置像素px,也可以設置dp(或者dip)。

一般情況下,我們都會選擇使用dp,這樣可以保證不同屏幕分辨率的手機上佈局一致。但是在代碼中,一般是無法直接使用dp的。

拿上面的代碼爲例,代碼中定義了滑動的距離閥值爲100像素。這就會導致不同分辨率的手機上效果有差別。比如在240X320的機型上,和在480X800的機型上,想要切換View,需要手指滑動的距離是不同的。所以,一般情況下,建議在代碼中,也不要用像素,也用dp。

那麼既然無法直接用dp,就需要從px轉換成dp了。

---------------------------------------------------------------------------------------------------------------------------------------------------

補充,還有一種實現方法:

package com.testflip;

import com.testflip.R;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.ViewFlipper;

public class TestFlip extends Activity 
{
	private ImageView imageView;
	private ViewFlipper flipper;
	float startX;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		imageView = new ImageView(this);
		imageView.setBackgroundResource(R.drawable.icon);
		
		
		flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper01);
		flipper.addView(addTextView("step 1"));
		flipper.addView(addTextView("step 2"));
		flipper.addView(addTextView("step 3"));
		flipper.addView(addTextView("step 4"));
		flipper.addView(addTextView("step 5"));
		flipper.addView(imageView);
	}

	private View addTextView(String text) 
	{
		TextView tv = new TextView(this);
		tv.setText(text);
		tv.setGravity(1);
		return tv;
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event) 
	{
		switch (event.getAction()) 
		{
			case MotionEvent.ACTION_DOWN:
				startX = event.getX();
				break;
				
			case MotionEvent.ACTION_UP:	
				if (event.getX() > startX) 
				{ 
					Log.v("am10", "向右滑動");
					this.flipper.setInAnimation(this, R.anim.push_right_in);
					this.flipper.setOutAnimation(this, R.anim.push_right_out);
					this.flipper.showNext();
				} 
				else if (event.getX() < startX) 
				{ 
					Log.v("am10", "向左滑動");
					this.flipper.setInAnimation(this, R.anim.push_left_in);
					this.flipper.setOutAnimation(this, R.anim.push_left_out);
					this.flipper.showPrevious();
				}
				break;
		}
		return super.onTouchEvent(event);
	}
}


轉自:http://greatverve.cnblogs.com/archive/2012/01/19/android-ViewFlipper.html

發佈了6 篇原創文章 · 獲贊 16 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章