圖片滾動的幾種常用組件的使用

圖片滾動的幾種常用組件的使用

寫在前面：屏幕切換指的是在同一個Activity內屏幕見的切換 ，最長見的情況就是在一個FrameLayout內有多個頁面，比如一個系統設置頁面；一個個性化設置頁面。一個比較典型的例子就是安裝QQ之後出現的相關功能介紹的頁面切換。其實他們是同一個Activity的。







本文參考自：http://blog.csdn.net/sunboy_2050/article/details/7420567



今天介紹第一種：ViewFlipper。



有個android.widget.ViewAnimator類繼承至FrameLayout ，ViewAnimator類的作用是爲FrameLayout裏面的View切換提供動畫效果。該類有如下幾個和動畫相關的函數：
l setInAnimation：設置View進入屏幕時候使用的動畫，該函數有兩個版本，一個接受單個參數，類型爲 android.view.animation.Animation；一個接受兩個參數，類型爲Context和int，分別爲Context對象和定義 Animation的resourceID。









ViewFilpper 是Android官方提供的一個View容器類，繼承於ViewAnimator類，用於實現頁面切換，也可以設定時間間隔，讓它自動播放。
又ViewAnimator繼承至於FrameLayout的，所以ViewFilpper的Layout裏面可以放置多個View， 繼承關係如下：








首先：本例中主要用到的兩個類：ViewFlipper和GestureDetector.OnGestureListener 實現自動播放和手勢滑屏事件



其次：在本例中用到的API的相關參考：



一、自動播放

ViewFlipper控件，是ImageView的容器，用於添加顯示的圖片資源，主要功能有兩個：添加顯示View和自動播放View

通過實現父類android.view.ViewGroup的addView(View child, ViewGroup.LayoutParams params)添加View資源，即圖片和填充樣式

啓動自動播放View，可以通過設置如下三個成員函數實現：

1、 setAutoStart(true)，設置是否自動播放功能，true爲自動播放，false爲不自動播放，開啓自動播放設爲true

2、 setFlipInterval(int milliseconds)，設置View播放的時間間隔，如3000（3秒）

3、 startFlipping()，開始自動播放

停止自動播放View，設置成員函數如下：

1、 stopFlipping()，停止自動播放

2、 setAutoStart(false)，停止自動播放，設爲false


二、手勢滑屏

手勢滑動屏幕動畫，是通過android.view.GestureDetector 類檢測各種手勢事件實現的，該類有兩個回調接口（Interface）

A、GestureDetector.OnDoubleTapListener，用來通知DoubleTap雙擊事件，類似於鼠標的雙擊事件，接口三個抽象回調函數如下

1、onDoubleTap(MotionEvent e)：DoubleTap雙擊手勢事件後通知（觸發）

2、onDoubleTapEvent(MotionEvent e)：DoubleTap雙擊手勢事件之間通知（觸發），包含down、up和move事件（這裏指的是在雙擊之間發生的事件，例如在同一個地方雙擊會產生DoubleTap手勢，而在DoubleTap手勢裏面還會發生down和up事件，這兩個事件由該函數通知）

3、onSingleTapConfirmed(MotionEvent e)：用來判定該次點擊是SingleTap而不是DoubleTap，如果連續點擊兩次就是DoubleTap手勢；那麼如果只點擊一次，系統等待一段時間後沒有收到第二次點擊則判定該次點擊爲SingleTap而不是DoubleTap，此時觸發的就是SingleTapConfirmed事件


B、GestureDetector.OnGestureListener，用來通知普通的手勢事件（down、longPress、scroll、up等），接口具體的六個抽象回調函數如下

1、onDown(MotionEvent e)：down事件，表示按下事件

2、onSingleTapUp(MotionEvent e)：一次點擊up事件，表示按下後的擡起事件

3、onShowPress(MotionEvent e)：down事件發生而move或則up還沒發生前觸發該事件，此事件一般用於通知用戶press按擊事件已發生

4、onLongPress(MotionEvent e)：長按事件，down事件後up事件前的一段時間間隔後（由系統分配，也可自定義），如果仍然按住屏幕則視爲長按事件

5、onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)：滑動手勢事件，例如scroll事件後突然up，fling的速度大小由e每秒x和y改變大小決定

6、onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：在屏幕上拖動事件，即down按下點——scroll拖動——up擡起點的move移動事件



isFlipping： 用來判斷View切換是否正在進行


setFilpInterval：設置View之間切換的時間間隔


startFlipping：使用上面設置的時間間隔來開始切換所有的View，切換會循環進行


stopFlipping: 停止View切換



setOutAnimation: 設置View退出屏幕時候使用的動畫，參數setInAnimation函數一樣。


showNext： 調用該函數來顯示FrameLayout裏面的下一個View。


showPrevious： 調用該函數來顯示FrameLayout裏面的上一個View。


本示例的滑動屏幕動畫，僅用到了上面的GestureDetector.OnGestureListener及其onFling事件 ，具體實現步驟如下：

1、Activity實現android.view.GestureDetector.OnGestureListener 監聽接口，並聲明gestureDetector = new GestureDetector(this); 用於監聽手勢事件

2、在Activity的成員函數onTouchEvent(MotionEvent event)中，註冊GestureDetector.OnGestureListener手勢監聽的gestureDetector.onTouchEvent(event);事件接口

3、在GestureDetector.OnGestureListener回調函數onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) 中，實現滑屏動畫







最後是代碼部分：



首先貼出圖片分別從左邊和右邊進入屏幕對應的動畫



三、屏幕漸變效果

1、 當手勢從左向右滑動時，圖片是左進右出

if (e2.getX() - e1.getX() > 120) ，即up終點（e2）與down起點（e1）的滑動距離大於120，來檢測從左向右滑動事件

push_left_in.xml —— 左進漸變效果



Java代碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="100%p"
android:toXDelta="0" />

<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="100%p"
android:toXDelta="0" />

<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>
push_left_out.xml —— 右出漸變效果

Java代碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="0"
android:toXDelta="-100%p" />

<alpha
android:duration="1500"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="0"
android:toXDelta="-100%p" />

<alpha
android:duration="1500"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>

2、 當手勢從右向左滑動時，圖片是右進左出

if (e2.getX() - e1.getX() < -120) ，即up終點（e2）與down起點（e1）的滑動距離小於-120，來檢測從右向左滑動事件

push_right_in.xml —— 右進漸變效果

Java代碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="-100%p"
android:toXDelta="0" />

<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="-100%p"
android:toXDelta="0" />

<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set> push_right_out.xml —— 右出漸變效果

Java代碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="0"
android:toXDelta="100%p" />

<alpha
android:duration="1500"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="0"
android:toXDelta="100%p" />

<alpha
android:duration="1500"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set> 其中，android:duration表示漸變持續時間；translate表示位移變換；alpha表示透明度變換


translate

android:fromXDelta="-100%p" android:toXDelta="0" 表示圖片從左進入，從不可見到可見

android:fromXDelta="0" android:toXDelta="100%p" 表示圖片從右滑出，從可見到不可見


alpha

android:fromAlpha="1.0" android:toAlpha="0.1" 表示圖片從不透明（1.0）到透明（0.1）

android:fromAlpha="0.1" android:toAlpha="1.0" 表示圖片從透明（0.1）到不透明（1.0）





主要的代碼部分：



佈局文件：

Java代碼
<?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/viewflipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

</LinearLayout>

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

</LinearLayout>

Activity部分：

Java代碼
import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class ImageScroll extends Activity implements
android.view.GestureDetector.OnGestureListener {
// 要滾動的圖片資源
private int[] imgs = { R.drawable.a1, R.drawable.a2, R.drawable.a3,
R.drawable.a4, R.drawable.a5 };
// 手勢識別和圖片播放的容器
private GestureDetector gestureDetector;
private ViewFlipper viewFlipper;
private Activity mActivity;

@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.scroll);
super.onCreate(savedInstanceState);
// 初始化
viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
mActivity = this;
gestureDetector = new GestureDetector(this);// 聲明檢測手勢
// 把圖片資源天教導viewFlipper中
for (int i = 0; i < imgs.length; i++) {
ImageView iv = new ImageView(this);
iv.setImageResource(imgs[i]);
iv.setScaleType(ImageView.ScaleType.FIT_XY);
viewFlipper.addView(iv);
}
/*
* 啓動自動播放View，可以通過設置如下三個成員函數實現： 1、
* setAutoStart(true)，設置是否自動播放功能，true爲自動播放，false爲不自動播放，開啓自動播放設爲true 2、
* setFlipInterval(int milliseconds)，設置View播放的時間間隔，如3000（3秒） 3、
* startFlipping()，開始自動播放 停止自動播放View，設置成員函數如下： 1、 stopFlipping()，停止自動播放
* 2、 setAutoStart(false)，停止自動播放，設爲false
*/
// 這裏設置爲自動播放
viewFlipper.setAutoStart(false);
// viewFlipper.setFlipInterval(2000);
if (viewFlipper.isAutoStart() && viewFlipper.isFlipping()) {
viewFlipper.startFlipping();
}
}

// onFling(MotionEvent e1, MotionEvent e2, float velocityX, float
// velocityY)：滑動手勢事件，例如scroll事件後突然up，fling的速度大小由e每秒x和y改變大小決定
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
if (e1.getX() - e2.getX() > 120)// 從左向右邊滑動
{
Animation rInAnimation = AnimationUtils.loadAnimation(mActivity,
R.anim.push_right_in);
Animation rOutAnimation = AnimationUtils.loadAnimation(mActivity,
R.anim.push_right_out);
viewFlipper.setInAnimation(rInAnimation);
viewFlipper.setOutAnimation(rOutAnimation);
viewFlipper.showNext();
viewFlipper.showPrevious();
return true;
} else if (e2.getX() - e1.getX() > 120)// 從右向左滑動
{
Animation lInAnim = AnimationUtils.loadAnimation(mActivity,
R.anim.push_left_in); // 向左滑動左側進入的漸變效果（alpha 0.1 -> 1.0）
Animation lOutAnim = AnimationUtils.loadAnimation(mActivity,
R.anim.push_left_out); // 向左滑動右側滑出的漸變效果（alpha 1.0 -> 0.1）

viewFlipper.setInAnimation(lInAnim);
viewFlipper.setOutAnimation(lOutAnim);
viewFlipper.showNext();
return true;
}
return true;
}

// 前面設置的是自動播放的情況，當用戶觸摸屏幕的時候設置爲停止播放
@Override
public boolean onTouchEvent(MotionEvent event) {
viewFlipper.stopFlipping(); // 用戶觸摸時候停止自動播放
viewFlipper.setAutoStart(false);// 設置是否自動播放功能，true爲自動播放，false爲不自動播放，開啓自動播放設爲true
return gestureDetector.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) {

}

}

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class ImageScroll extends Activity implements
android.view.GestureDetector.OnGestureListener {
// 要滾動的圖片資源
private int[] imgs = { R.drawable.a1, R.drawable.a2, R.drawable.a3,
R.drawable.a4, R.drawable.a5 };
// 手勢識別和圖片播放的容器
private GestureDetector gestureDetector;
private ViewFlipper viewFlipper;
private Activity mActivity;

@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.scroll);
super.onCreate(savedInstanceState);
// 初始化
viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
mActivity = this;
gestureDetector = new GestureDetector(this);// 聲明檢測手勢
// 把圖片資源天教導viewFlipper中
for (int i = 0; i < imgs.length; i++) {
ImageView iv = new ImageView(this);
iv.setImageResource(imgs[i]);
iv.setScaleType(ImageView.ScaleType.FIT_XY);
viewFlipper.addView(iv);
}
/*
* 啓動自動播放View，可以通過設置如下三個成員函數實現： 1、
* setAutoStart(true)，設置是否自動播放功能，true爲自動播放，false爲不自動播放，開啓自動播放設爲true 2、
* setFlipInterval(int milliseconds)，設置View播放的時間間隔，如3000（3秒） 3、
* startFlipping()，開始自動播放 停止自動播放View，設置成員函數如下： 1、 stopFlipping()，停止自動播放
* 2、 setAutoStart(false)，停止自動播放，設爲false
*/
// 這裏設置爲自動播放
viewFlipper.setAutoStart(false);
// viewFlipper.setFlipInterval(2000);
if (viewFlipper.isAutoStart() && viewFlipper.isFlipping()) {
viewFlipper.startFlipping();
}
}

// onFling(MotionEvent e1, MotionEvent e2, float velocityX, float
// velocityY)：滑動手勢事件，例如scroll事件後突然up，fling的速度大小由e每秒x和y改變大小決定
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
if (e1.getX() - e2.getX() > 120)// 從左向右邊滑動
{
Animation rInAnimation = AnimationUtils.loadAnimation(mActivity,
R.anim.push_right_in);
Animation rOutAnimation = AnimationUtils.loadAnimation(mActivity,
R.anim.push_right_out);
viewFlipper.setInAnimation(rInAnimation);
viewFlipper.setOutAnimation(rOutAnimation);
viewFlipper.showNext();
viewFlipper.showPrevious();
return true;
} else if (e2.getX() - e1.getX() > 120)// 從右向左滑動
{
Animation lInAnim = AnimationUtils.loadAnimation(mActivity,
R.anim.push_left_in); // 向左滑動左側進入的漸變效果（alpha 0.1 -> 1.0）
Animation lOutAnim = AnimationUtils.loadAnimation(mActivity,
R.anim.push_left_out); // 向左滑動右側滑出的漸變效果（alpha 1.0 -> 0.1）

viewFlipper.setInAnimation(lInAnim);
viewFlipper.setOutAnimation(lOutAnim);
viewFlipper.showNext();
return true;
}
return true;
}

// 前面設置的是自動播放的情況，當用戶觸摸屏幕的時候設置爲停止播放
@Override
public boolean onTouchEvent(MotionEvent event) {
viewFlipper.stopFlipping(); // 用戶觸摸時候停止自動播放
viewFlipper.setAutoStart(false);// 設置是否自動播放功能，true爲自動播放，false爲不自動播放，開啓自動播放設爲true
return gestureDetector.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) {

}

}
關於Activity類的代碼實現可以參考如下的步驟：


1、定義圖片資源。然後在ViewFlipper中加載對應的圖片資源：

2、啓動ViewFlippe然後開始動畫播放，這裏有兩個重要的方法。setAutoStart(true)，設置是否自動播放功能，true爲自動播放，false爲不自動播放

3、實現android.view.GestureDetector.OnGestureListener的onFling方法，也是本例中最爲重要的方法。


4.注意在onTouchEvent中註冊屏幕的觸摸事件。