Android仿zaker用手向上推動的特效開發(fā)【推動門效果】(附demo源碼下載)

更新時間：2016年07月08日 10:23:44 作者：manymore13

這篇文章主要介紹了Android仿zaker用手向上推動的特效,結合完整實例形式分析了Android滑動切換效果的實現(xiàn)步驟與相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了Android仿zaker用手向上推動的特效開發(fā)。分享給大家供大家參考，具體如下：

最近在商店下載了zaker ，閑暇時拿來看看新聞！發(fā)現(xiàn)每次打開軟件進入主界面時有個界面，需要你把它往上滑到一定距離才能進入到主界面。每次進入軟件時它的背景可能不一樣，在往上撥的時候你會看見主界面，好似向上推的門一樣！打開它你就可以看到外面的世界。與窗簾有點不同的是在你沒有拉開足夠距離時，它會俏皮的關閉自己不讓你看到外面的美景。

說這么多想像起來挺模糊的，那讓我們看看實際效果圖，我現(xiàn)在打開zaker截兩張圖如下所示

左邊一張是不做任何操作時的效果，右邊一張是界面跟著手往上滑的效果，在滑的時候你會發(fā)現(xiàn)即將進入的界面，當你沒有滑到一定的距離松開手后窗簾會慢慢關閉，在合閉的時候有個彈動的效果。非常棒！

正如你看到的圖片內(nèi)容，今天是國慶節(jié)，在這里祝大家節(jié)日快樂！所以你每次打開的時候圖片可能不一樣。這個效果看起來有點像Android里面講的TranslateAnimation動畫，我覺得用Animation動畫應該很難實現(xiàn)出這種效果(當然有用animation實現(xiàn)zaker這種效果的大?？梢耘c我們分享下)。QQ里也有這么個功能的界面，只不過QQ的是展示一張圖片兩到三秒后再進入主界面。

下面開始實現(xiàn)這種效果推動們效果。

根據(jù)效果我實現(xiàn)出一個類，方便與需要用的筒靴使用。代碼中有注釋

package com.manymore13.scrollerdemo;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.Interpolator;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Scroller;
public class PullDoorView extends RelativeLayout {
 private Context mContext;
 private Scroller mScroller;
 private int mScreenWidth = 0;
 private int mScreenHeigh = 0;
 private int mLastDownY = 0;
 private int mCurryY;
 private int mDelY;
 private boolean mCloseFlag = false;
 private ImageView mImgView;
 public PullDoorView(Context context) {
  super(context);
  mContext = context;
  setupView();
 }
 public PullDoorView(Context context, AttributeSet attrs) {
  super(context, attrs);
  mContext = context;
  setupView();
 }
 @SuppressLint("NewApi")
 private void setupView() {
  // 這個Interpolator你可以設置別的 我這里選擇的是有彈跳效果的Interpolator
  Interpolator polator = new BounceInterpolator();
  mScroller = new Scroller(mContext, polator);
  // 獲取屏幕分辨率
  WindowManager wm = (WindowManager) (mContext
    .getSystemService(Context.WINDOW_SERVICE));
  DisplayMetrics dm = new DisplayMetrics();
  wm.getDefaultDisplay().getMetrics(dm);
  mScreenHeigh = dm.heightPixels;
  mScreenWidth = dm.widthPixels;
  // 這里你一定要設置成透明背景,不然會影響你看到底層布局
  this.setBackgroundColor(Color.argb(0, 0, 0, 0));
  mImgView = new ImageView(mContext);
  mImgView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
    LayoutParams.MATCH_PARENT));
  mImgView.setScaleType(ImageView.ScaleType.FIT_XY);// 填充整個屏幕
  mImgView.setImageResource(R.drawable.bg1); // 默認背景
  addView(mImgView);
 }
 // 設置推動門背景
 public void setBgImage(int id) {
  mImgView.setImageResource(id);
 }
 // 設置推動門背景
 public void setBgImage(Drawable drawable) {
  mImgView.setImageDrawable(drawable);
 }
 // 推動門的動畫
 public void startBounceAnim(int startY, int dy, int duration) {
  mScroller.startScroll(0, startY, 0, dy, duration);
  invalidate();
 }
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  int action = event.getAction();
  switch (action) {
  case MotionEvent.ACTION_DOWN:
   mLastDownY = (int) event.getY();
   System.err.println("ACTION_DOWN=" + mLastDownY);
   return true;
  case MotionEvent.ACTION_MOVE:
   mCurryY = (int) event.getY();
   System.err.println("ACTION_MOVE=" + mCurryY);
   mDelY = mCurryY - mLastDownY;
   // 只準上滑有效
   if (mDelY < 0) {
    scrollTo(0, -mDelY);
   }
   System.err.println("------------- " + mDelY);
   break;
  case MotionEvent.ACTION_UP:
   mCurryY = (int) event.getY();
   mDelY = mCurryY - mLastDownY;
   if (mDelY < 0) {
    if (Math.abs(mDelY) > mScreenHeigh / 2) {
     // 向上滑動超過半個屏幕高的時候 開啟向上消失動畫
     startBounceAnim(this.getScrollY(), mScreenHeigh, 450);
     mCloseFlag = true;
    } else {
     // 向上滑動未超過半個屏幕高的時候 開啟向下彈動動畫
     startBounceAnim(this.getScrollY(), -this.getScrollY(), 1000);
    }
   }
   break;
  }
  return super.onTouchEvent(event);
 }
 @Override
 public void computeScroll() {
  if (mScroller.computeScrollOffset()) {
   scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
   Log.i("scroller", "getCurrX()= " + mScroller.getCurrX()
     + "  getCurrY()=" + mScroller.getCurrY()
     + " getFinalY() = " + mScroller.getFinalY());
   // 不要忘記更新界面
   postInvalidate();
  } else {
   if (mCloseFlag) {
    this.setVisibility(View.GONE);
   }
  }
 }
}

View中的scrollTo函數(shù)，使View具有滾動效果，就像ListView一樣，它的內(nèi)容是可以滑動的，ViewGroup繼承View，所以Relativelayout可以做到滑動效果，另外向下彈動效果是用到Scroller類，而在構造Scroller類時加入BounceInterpolator，你也可以加入別的插值器。其實Scroller只是一個輔助View滑動的一個類，幫助View存儲滑動數(shù)據(jù)的類，當view滑動時，你可以從scroller中取出滑動數(shù)據(jù)，而真實滑動運動效果其實是利用scrollTo瞬間達到目的地，View結合scroller以及scroller就可以實現(xiàn)這種推動門的效果。

運行Demo程序查看效果

上面的圖片是模擬器上運行的截圖，看起來有點卡。其實在真機上測試的很流暢。zaker的效果基本是這個樣子。

如果你想使用這個類的話，想實現(xiàn)這種效果的話，那么請滿足下面兩個條件。

1. PullDoorView match_parent占據(jù)全屏像下面這樣整個項目父ViewGroup可以用Framelayout

2.PullDoorView 必須要放在界面的最上面使其可以獲取touch事件

<com.manymore13.scrollerdemo.PullDoorView
  android:id="@+id/myImage"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#ddd" >
  <Button
   android:id="@+id/btn_above"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:text="第二層" />
  <TextView
   android:id="@+id/tv_hint"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:layout_centerHorizontal="true"
   android:layout_marginBottom="10dp"
   android:text="上滑可以進入首頁"
   android:textColor="#ffffffff"
   android:textSize="18sp" />
 </com.manymore13.scrollerdemo.PullDoorView>

因為PullDoorView是一個RelativeLayout，所以你可以發(fā)揮自己的想象在里面添加任何View或者ViewGroup，上面XML中我添加了一個button和一個textView，我想這兩個View你可以再上面的動態(tài)圖片中應該看到了。另外PullDoorView可以根據(jù)需要更換背景圖片
你可以 PullDoorView.setBgImage(圖片)
好了就寫這么多，仿zaker用手向上推動的效果的實現(xiàn)到此為止。

完整實例代碼點擊此處本站下載。