Android仿zaker用手向上推動的特效開發(fā)【推動門效果】(附demo源碼下載)
本文實例講述了Android仿zaker用手向上推動的特效開發(fā)。分享給大家供大家參考,具體如下:
最近在商店下載了zaker ,閑暇時拿來看看新聞!發(fā)現(xiàn)每次打開軟件進入主界面時有個界面,需要你把它往上滑到一定距離才能進入到主界面。每次進入軟件時它的背景可能不一樣,在往上撥的時候你會看見主界面,好似向上推的門一樣!打開它你就可以看到外面的世界。與窗簾有點不同的是在你沒有拉開足夠距離時,它會俏皮的關閉自己不讓你看到外面的美景。
說這么多想像起來挺模糊的,那讓我們看看實際效果圖,我現(xiàn)在打開zaker截兩張圖 如下所示

左邊一張是不做任何操作時的效果,右邊一張是界面跟著手往上滑的效果,在滑的時候你會發(fā)現(xiàn)即將進入的界面,當你沒有滑到一定的距離松開手后窗簾會慢慢關閉,在合閉的時候有個彈動的效果。非常棒!
正如你看到的圖片內容,今天是國慶節(jié),在這里祝大家節(jié)日快樂!所以你每次打開的時候圖片可能不一樣。這個效果看起來有點像Android里面講的TranslateAnimation動畫,我覺得用Animation動畫應該很難實現(xiàn)出這種效果(當然有用animation實現(xiàn)zaker這種效果的大??梢耘c我們分享下)。QQ里也有這么個功能的界面,只不過QQ的是展示一張圖片兩到三秒后再進入主界面。
下面開始實現(xiàn)這種效果 推動們效果。
根據效果我實現(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函數,使View具有滾動效果,就像ListView一樣,它的內容是可以滑動的,ViewGroup繼承View,所以Relativelayout可以做到滑動效果,另外向下彈動效果是用到Scroller類,而在構造Scroller類時加入BounceInterpolator,你也可以加入別的插值器。其實Scroller只是一個輔助View滑動的一個類,幫助View存儲滑動數據的類,當view滑動時,你可以從scroller中取出滑動數據,而真實滑動運動效果其實是利用scrollTo瞬間達到目的地,View結合scroller以及scroller就可以實現(xiàn)這種推動門的效果。
運行Demo程序 查看效果

上面的圖片是模擬器上運行的截圖,看起來有點卡。其實在真機上測試的很流暢。zaker的效果基本是這個樣子。
如果你想使用這個類的話,想實現(xiàn)這種效果的話,那么請滿足下面兩個條件。
1. PullDoorView match_parent占據全屏 像下面這樣整個項目父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可以根據需要更換背景圖片
你可以 PullDoorView.setBgImage(圖片)
好了就寫這么多,仿zaker用手向上推動的效果的實現(xiàn)到此為止。
完整實例代碼點擊此處本站下載。
更多關于Android相關內容感興趣的讀者可查看本站專題:《Android控件用法總結》、《Android視圖View技巧總結》、《Android文件操作技巧匯總》、《Android操作SQLite數據庫技巧總結》、《Android操作json格式數據技巧總結》、《Android數據庫操作技巧總結》、《Android編程之activity操作技巧總結》、《Android編程開發(fā)之SD卡操作方法匯總》、《Android開發(fā)入門與進階教程》及《Android資源操作技巧匯總》
希望本文所述對大家Android程序設計有所幫助。
- Android仿QQ聊天撒花特效 很真實
- Android波紋擴散效果之仿支付寶咻一咻功能實現(xiàn)波紋擴散特效
- Android實現(xiàn)圖片文字輪播特效
- Android編程中圖片特效處理方法小結
- Android實現(xiàn)Activity界面切換添加動畫特效的方法
- Android系統(tǒng)聯(lián)系人全特效實現(xiàn)(上)分組導航和擠壓動畫(附源碼)
- Android圖片特效:黑白特效、圓角效果、高斯模糊
- Android 圖片特效處理的方法實例
- Android自定義View制作動態(tài)炫酷按鈕實例解析
- Android自定義View實現(xiàn)豎直跑馬燈效果案例解析
- Android中View的炸裂特效實現(xiàn)方法詳解
相關文章
Android獲取arrays.xml里的數組字段值實例詳解
這篇文章主要介紹了Android獲取arrays.xml里的數組字段值實例詳解的相關資料,需要的朋友可以參考下2017-04-04
Android中ScrollView實現(xiàn)滑動距離監(jiān)聽器的方法
ScrollView相信對每位Android開發(fā)者們來說都不陌生,所以這篇文章給大家主要介紹了Android中ScrollView實現(xiàn)滑動距離監(jiān)聽器的方法,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10
Android List(集合)中的對象以某一個字段排序案例
這篇文章主要介紹了Android List(集合)中的對象以某一個字段排序案例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
解決Android Studio Design界面不顯示layout控件的問題
這篇文章主要介紹了解決Android Studio Design界面不顯示layout控件的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03

