Android仿zaker用手向上推動(dòng)的特效開發(fā)【推動(dòng)門效果】(附demo源碼下載)
本文實(shí)例講述了Android仿zaker用手向上推動(dòng)的特效開發(fā)。分享給大家供大家參考,具體如下:
最近在商店下載了zaker ,閑暇時(shí)拿來看看新聞!發(fā)現(xiàn)每次打開軟件進(jìn)入主界面時(shí)有個(gè)界面,需要你把它往上滑到一定距離才能進(jìn)入到主界面。每次進(jìn)入軟件時(shí)它的背景可能不一樣,在往上撥的時(shí)候你會(huì)看見主界面,好似向上推的門一樣!打開它你就可以看到外面的世界。與窗簾有點(diǎn)不同的是在你沒有拉開足夠距離時(shí),它會(huì)俏皮的關(guān)閉自己不讓你看到外面的美景。
說這么多想像起來挺模糊的,那讓我們看看實(shí)際效果圖,我現(xiàn)在打開zaker截兩張圖 如下所示
左邊一張是不做任何操作時(shí)的效果,右邊一張是界面跟著手往上滑的效果,在滑的時(shí)候你會(huì)發(fā)現(xiàn)即將進(jìn)入的界面,當(dāng)你沒有滑到一定的距離松開手后窗簾會(huì)慢慢關(guān)閉,在合閉的時(shí)候有個(gè)彈動(dòng)的效果。非常棒!
正如你看到的圖片內(nèi)容,今天是國(guó)慶節(jié),在這里祝大家節(jié)日快樂!所以你每次打開的時(shí)候圖片可能不一樣。這個(gè)效果看起來有點(diǎn)像Android里面講的TranslateAnimation動(dòng)畫,我覺得用Animation動(dòng)畫應(yīng)該很難實(shí)現(xiàn)出這種效果(當(dāng)然有用animation實(shí)現(xiàn)zaker這種效果的大??梢耘c我們分享下)。QQ里也有這么個(gè)功能的界面,只不過QQ的是展示一張圖片兩到三秒后再進(jìn)入主界面。
下面開始實(shí)現(xiàn)這種效果 推動(dòng)們效果。
根據(jù)效果我實(shí)現(xiàn)出一個(gè)類,方便與需要用的筒靴使用。代碼中有注釋
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() { // 這個(gè)Interpolator你可以設(shè)置別的 我這里選擇的是有彈跳效果的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; // 這里你一定要設(shè)置成透明背景,不然會(huì)影響你看到底層布局 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);// 填充整個(gè)屏幕 mImgView.setImageResource(R.drawable.bg1); // 默認(rèn)背景 addView(mImgView); } // 設(shè)置推動(dòng)門背景 public void setBgImage(int id) { mImgView.setImageResource(id); } // 設(shè)置推動(dòng)門背景 public void setBgImage(Drawable drawable) { mImgView.setImageDrawable(drawable); } // 推動(dòng)門的動(dòng)畫 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; // 只準(zhǔn)上滑有效 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) { // 向上滑動(dòng)超過半個(gè)屏幕高的時(shí)候 開啟向上消失動(dòng)畫 startBounceAnim(this.getScrollY(), mScreenHeigh, 450); mCloseFlag = true; } else { // 向上滑動(dòng)未超過半個(gè)屏幕高的時(shí)候 開啟向下彈動(dòng)動(dòng)畫 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具有滾動(dòng)效果,就像ListView一樣,它的內(nèi)容是可以滑動(dòng)的,ViewGroup繼承View,所以Relativelayout可以做到滑動(dòng)效果,另外向下彈動(dòng)效果是用到Scroller類,而在構(gòu)造Scroller類時(shí)加入BounceInterpolator,你也可以加入別的插值器。其實(shí)Scroller只是一個(gè)輔助View滑動(dòng)的一個(gè)類,幫助View存儲(chǔ)滑動(dòng)數(shù)據(jù)的類,當(dāng)view滑動(dòng)時(shí),你可以從scroller中取出滑動(dòng)數(shù)據(jù),而真實(shí)滑動(dòng)運(yùn)動(dòng)效果其實(shí)是利用scrollTo瞬間達(dá)到目的地,View結(jié)合scroller以及scroller就可以實(shí)現(xiàn)這種推動(dòng)門的效果。
運(yùn)行Demo程序 查看效果
上面的圖片是模擬器上運(yùn)行的截圖,看起來有點(diǎn)卡。其實(shí)在真機(jī)上測(cè)試的很流暢。zaker的效果基本是這個(gè)樣子。
如果你想使用這個(gè)類的話,想實(shí)現(xiàn)這種效果的話,那么請(qǐng)滿足下面兩個(gè)條件。
1. PullDoorView match_parent占據(jù)全屏 像下面這樣整個(gè)項(xiàng)目父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="上滑可以進(jìn)入首頁(yè)" android:textColor="#ffffffff" android:textSize="18sp" /> </com.manymore13.scrollerdemo.PullDoorView>
因?yàn)镻ullDoorView是一個(gè)RelativeLayout,所以你可以發(fā)揮自己的想象在里面添加任何View或者ViewGroup,上面XML中我添加了一個(gè)button和一個(gè)textView,我想這兩個(gè)View你可以再上面的動(dòng)態(tài)圖片中應(yīng)該看到了。另外PullDoorView可以根據(jù)需要更換背景圖片
你可以 PullDoorView.setBgImage(圖片)
好了就寫這么多,仿zaker用手向上推動(dòng)的效果的實(shí)現(xiàn)到此為止。
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《Android控件用法總結(jié)》、《Android視圖View技巧總結(jié)》、《Android文件操作技巧匯總》、《Android操作SQLite數(shù)據(jù)庫(kù)技巧總結(jié)》、《Android操作json格式數(shù)據(jù)技巧總結(jié)》、《Android數(shù)據(jù)庫(kù)操作技巧總結(jié)》、《Android編程之a(chǎn)ctivity操作技巧總結(jié)》、《Android編程開發(fā)之SD卡操作方法匯總》、《Android開發(fā)入門與進(jìn)階教程》及《Android資源操作技巧匯總》
希望本文所述對(duì)大家Android程序設(shè)計(jì)有所幫助。
- Android仿QQ聊天撒花特效 很真實(shí)
- Android波紋擴(kuò)散效果之仿支付寶咻一咻功能實(shí)現(xiàn)波紋擴(kuò)散特效
- Android實(shí)現(xiàn)圖片文字輪播特效
- Android編程中圖片特效處理方法小結(jié)
- Android實(shí)現(xiàn)Activity界面切換添加動(dòng)畫特效的方法
- Android系統(tǒng)聯(lián)系人全特效實(shí)現(xiàn)(上)分組導(dǎo)航和擠壓動(dòng)畫(附源碼)
- Android圖片特效:黑白特效、圓角效果、高斯模糊
- Android 圖片特效處理的方法實(shí)例
- Android自定義View制作動(dòng)態(tài)炫酷按鈕實(shí)例解析
- Android自定義View實(shí)現(xiàn)豎直跑馬燈效果案例解析
- Android中View的炸裂特效實(shí)現(xiàn)方法詳解
相關(guān)文章
Android設(shè)置鈴聲實(shí)現(xiàn)代碼
這篇文章主要介紹了Android設(shè)置鈴聲實(shí)現(xiàn)代碼,以實(shí)例形式分析了Android中鈴聲設(shè)置的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10巧用ViewPager實(shí)現(xiàn)駕考寶典做題翻頁(yè)效果
本文主要介紹巧用ViewPager實(shí)現(xiàn)駕考寶典做題翻頁(yè)效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03Android獲取arrays.xml里的數(shù)組字段值實(shí)例詳解
這篇文章主要介紹了Android獲取arrays.xml里的數(shù)組字段值實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04Android中ScrollView實(shí)現(xiàn)滑動(dòng)距離監(jiān)聽器的方法
ScrollView相信對(duì)每位Android開發(fā)者們來說都不陌生,所以這篇文章給大家主要介紹了Android中ScrollView實(shí)現(xiàn)滑動(dòng)距離監(jiān)聽器的方法,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10Android實(shí)現(xiàn)九宮格解鎖的實(shí)例代碼
本篇文章主要介紹了Android九宮格解鎖的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07Android SpringAnimation彈性動(dòng)畫解析
這篇文章主要為大家詳細(xì)介紹了Android SpringAnimation彈性動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Android List(集合)中的對(duì)象以某一個(gè)字段排序案例
這篇文章主要介紹了Android List(集合)中的對(duì)象以某一個(gè)字段排序案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Android編程設(shè)置全屏的方法實(shí)例詳解
這篇文章主要介紹了Android編程設(shè)置全屏的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android設(shè)置全屏的兩種常見技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11解決Android Studio Design界面不顯示layout控件的問題
這篇文章主要介紹了解決Android Studio Design界面不顯示layout控件的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03