前言
以前的導航頁總是使用viewPager配套fragment來實現的,某天一個妹子說其實導航頁也可以使用ViewFilpper 來實現,哈哈確實不錯,前段時間就用ViewFilpper 實現了京東快報,然後呢那時候對ViewFilpper 也隨便了解了下,不過那個直接是xml實現的,這裏不表了,接着看今天實現的漸變視差導航頁。
ViewFilpper
ViewFilpper 是Android官方提供的一個View容器類,繼承於ViewAnimator類,用於實現頁面切換,也可以設定時間間隔,讓它自動播放。 又ViewAnimator繼承至於FrameLayout的,所以ViewFilpper的Layout裏面可以放置多個View viewFlipper的學習使用 viewFlipper的學習使用,可做引導頁。
實現思路
- Activity實現android.view.GestureDetector.OnGestureListener 監聽接口,並聲明gestureDetector = new GestureDetector(this); 用於監聽手勢事件
- 在Activity的成員函數onTouchEvent(MotionEvent event)中,註冊GestureDetector.OnGestureListener手勢監聽事件接口
- 在GestureDetector.OnGestureListener回調函數onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) 中,實現滑屏動畫
效果
看圖確實有點卡,截屏的確實沒有辦法。
代碼講解
懶得多扯淡看代碼:
###activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ViewFlipper
android:id="@+id/viewflipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<LinearLayout
android:id="@+id/dot_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:orientation="horizontal" />
</RelativeLayout>
佈局是不是非常的簡單,我去實現功能也是比較簡單
##MainActivity.java
package com.losileeya.flipguidemaster;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewFlipper;
public class MainActivity extends AppCompatActivity implements
android.view.GestureDetector.OnGestureListener {
private int[] imgs = { R.drawable.hpw1, R.drawable.hpw2, R.drawable.hpw3,
R.drawable.hpw4, R.drawable.hpw5 };
private GestureDetector gestureDetector = null;
private ViewFlipper viewFlipper = null;
private LinearLayout dot_layout;
private Activity mActivity = null;
private ImageView[] images;
private int index = 0;
private boolean isrunning = false;
private Handler handler = new Handler(){
public void handleMessage(android.os.Message msg) {
showNext();
//延時,循環調用handler
if(isrunning){
handler.sendEmptyMessageDelayed(0, 3000);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mActivity = this;
init();
viewFlipper.setAutoStart(true); // 設置自動播放功能(點擊事件,前自動播放)
viewFlipper.setFlipInterval(3000);//3秒鐘自動滑動下
// 滾動時,自動切換白點
if (viewFlipper.isAutoStart() && !viewFlipper.isFlipping()) {
viewFlipper.startFlipping();
isrunning=true;
handler.sendEmptyMessageDelayed(0,3000);
}
}
/**
* 初始化
*/
private void init() {
viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
dot_layout = (LinearLayout) findViewById(R.id.dot_layout);
//初始化白點
initDot(0);
gestureDetector = new GestureDetector(this); // 聲明檢測手勢事件
for (int i = 0; i < imgs.length; i++) { // 添加圖片源
//把圖片加入到FlipperView裏面
ImageView iv = new ImageView(this);
iv.setImageResource(imgs[i]);
iv.setScaleType(ImageView.ScaleType.FIT_XY);
viewFlipper.addView(iv, new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));
}
}
private void initDot(int select) {
images = new ImageView[imgs.length];//設置小白點數目爲圖片的數目
dot_layout.removeAllViews();//先清空裏面的所有白點
for (int i = 0; i < imgs.length; i++) {
ImageView localImageView = new ImageView(this);
LinearLayout.LayoutParams localLayoutParams = new LinearLayout.LayoutParams(
-2, -2);
localLayoutParams.leftMargin = 30;//設置白點間的邊距
localImageView.setLayoutParams(localLayoutParams);
localImageView.setImageResource(R.drawable.dot_bg);
//根據是否選中來確定顯示圖片
if (i == select)
localImageView.setEnabled(true);
else
localImageView.setEnabled(false);
images[i] = localImageView;
dot_layout.addView(localImageView);//把所有白點添加到父佈局裏面
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// viewFlipper.stopFlipping(); // 點擊事件後,停止自動播放
// viewFlipper.setAutoStart(false);
// isrunning=false;
return gestureDetector.onTouchEvent(event); // 註冊手勢事件
}
/**
* 滑動手勢事件,例如scroll事件後突然up,fling的速度大小由e每秒x和y改變大小決定
* 實現滑屏動畫
* @param e1
* @param e2
* @param velocityX
* @param velocityY
* @return
*/
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
if (e2.getX() - e1.getX() > 120) { // 從左向右滑動(左進右出)
showPrevious();
return true;
} else if (e2.getX() - e1.getX() < -120) { // 從右向左滑動(右進左出)
showNext();
return true;
}
return true;
}
/**
* down事件發生而move或則up還沒發生前觸發該事件,
* 此事件一般用於通知用戶press按擊事件已發生
* @param e
*/
public void onShowPress(MotionEvent e) {
}
/**
* 一次點擊up事件,表示按下後的擡起事件
* @param e
* @return
*/
public boolean onSingleTapUp(MotionEvent e) {
return false;
}
/**
*
* 在屏幕上拖動事件,即down按下點——scroll拖動——up擡起點的move移動事件 本示例的滑動屏幕動畫,
* 僅用到了上面的GestureDetector.OnGestureListener及其onFling事件
* @param e1
* @param e2
* @param distanceX
* @param distanceY
* @return
*/
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
return false;
}
/**
* 長按事件,down事件後up事件前的一段時間間隔後(由系統分配,也可自定義),
* 如果仍然按住屏幕則視爲長按事件
* @param e
*/
@Override
public void onLongPress(MotionEvent e) {
}
/**
* down事件,表示按下事件
* @param e
* @return
*/
@Override
public boolean onDown(MotionEvent e) {
return false;
}
/**
* 下一個頁面
*/
private void showNext() {
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();
if (index < imgs.length - 1) {
index++;
} else {
index = 0;
}
initDot(index);
}
/**
* 上一個頁面
*/
private void showPrevious() {
Animation rInAnim = AnimationUtils.loadAnimation(mActivity,
R.anim.push_right_in); // 向右滑動左側進入的漸變效果(alpha 0.1 -> 1.0)
Animation rOutAnim = AnimationUtils.loadAnimation(mActivity,
R.anim.push_right_out); // 向右滑動右側滑出的漸變效果(alpha 1.0 -> 0.1)
viewFlipper.setInAnimation(rInAnim);
viewFlipper.setOutAnimation(rOutAnim);
viewFlipper.showPrevious();
if (index >= 1) {
index--;
} else {
index = imgs.length - 1;
}
initDot(index);
}
}
1、 setAutoStart(true),設置是否自動播放功能,true爲自動播放,false爲不自動播放,開啓自動播放設爲true
2、 setFlipInterval(int milliseconds),設置View播放的時間間隔,如3000(3秒)
3、 startFlipping(),開始自動播放 停止自動播放View,
設置成員函數如下:
1、 stopFlipping(),停止自動播放
2、 setAutoStart(false),停止自動播放,設爲false
從代碼 可以看出:就是把圖片加入到ViewFlipper,然後呢設置手勢的監聽,通過onFling方法來處理ViewFlipper裏面的圖片切換,並且利用showPrevious()和showNext()來切換場景,然後通過index來標記滑到的頁數,並且通過index來顯示白色點的高亮和灰色。漸變的效果其實就是切入切出動畫透明度的變化,通過handle來處理index的自動改變實現自動切換。
總結
ViewFilpper 的使用就到這裏了,主要也是ViewFilpper加了動畫並且能夠自動滾動,然後如果不加手勢監聽的話就無法監聽onFling()方法,從而無法使用手指來控制,或許裏面存在問題,請大家指出來好了,寫這個的目的也就是爲了更加了解ViewFilpper,覺得還行的點個贊,幫忙頂一下,也是很久沒有寫博客了思路有點亂。
demo 傳送門:FlipGuideMaster.rar