這段時間一直在忙Android的項目,總算抽出點時間休息一下,准備把一些項目用到的Android經驗分享一下。
在Android開發過程中,經常會碰到Activity之間的切換效果的問題,下面介紹一下如何實現左右滑動的切換效果,首先了解一下Activity切換的實現,從Android2.0開始在Activity增加了一個方法:
public void overridePendingTransition (int enterAnim, int exitAnim)
其中:
enterAnim 定義Activity進入屏幕時的動畫
exitAnim 定義Activity退出屏幕時的動畫
overridePendingTransition 方法必須在startActivity()或者 finish()方法的后面。
Android已經內置了幾種動畫效果,可以見 android.R.anim 類。一般情況下我們需要自己定義屏幕切換的效果。首先我們先了解Activity的位置定義,如下圖:
從上圖可以看出,以手機屏幕下面邊未X軸,屏幕左邊為Y軸,當Activity在X軸值為-100%p時,剛好在屏幕的左邊(位置1),當X軸值為0%p時,剛好再屏幕內(位置2),當X=100%p時剛好在屏幕右邊(位置3)。
清楚了位置后,我們就可以實現左右滑動的切換效果,首先讓要退出的Activity從位置2移動到位置1,同時讓進入的Activity從位置3移動位置2,這樣就能實現從左右切換效果。
實現過程如下,首先定義2個動畫,在 res目錄創建anim目錄, 然后在目錄創建動畫的xml文件:out_to_left.xml (從左邊退出動畫) 、in_from_right.xml(從右邊進入動畫)
out_to_left.xml (從 位置2 移動到 位置1)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="<a href="http://my.oschina.net/asia" class="referer" target="_blank">@android</a> :anim/accelerate_interpolator">
<translate android:fromXDelta="0%p" android:toXDelta="-100%p"
android:duration="500" />
</set>
in_from_right.xml (從 位置3 移動到 位置2)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="<a href="http://my.oschina.net/asia" class="referer" target="_blank">@android</a> :anim/accelerate_interpolator">
<translate android:fromXDelta="100%p" android:toXDelta="0%p"
android:duration="500" />
</set>
注: android:fromXDelta 動畫開始的位置, android:toXDelta 動畫結束的位置,android:duration動畫的時間。
Android 代碼如下:
public class LeftRightSlideActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button button = (Button)findViewById(R.id.button1);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(LeftRightSlideActivity.this, SlideSecondActivity.class);
startActivity(intent);
//設置切換動畫,從右邊進入,左邊退出
overridePendingTransition(R.anim.in_from_right, R.anim.out_to_left);
}
});
}
}
效果圖如下:
雖然左右滑動切換的實現很簡單,但是對於原理的理解很重要,掌握了原理可以充分發揮想象力設計出各種各樣的動畫效果,希望對一些入門的新手有幫助。
以后在慢慢整理一些項目中用到的切換動畫效果。
有一些場景,我們需要向用戶展示一系列的頁面。比如我們正在開發一個看漫畫的應用,可能就需要向用戶展示一張一張的漫畫圖片,用戶使用手指滑動屏幕,可以在前一幅漫畫和后一幅漫畫之間切換。這個時候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了。其實px和dp之間是有公式可以相互轉換的。前面我的博客中(http://blog.csdn.net/arui319/article/details/6777133)已經寫過了,可以直接參考。



