先看看效果
開源中國的Android客戶端的返回按鈕就是這樣子的,剛開始看的時候感覺好酷,然后就看源碼,找著找著發現其實是Android封裝好了的一個控件DrawerArrowDrawable,但是這個只是在Android5.0才加入的,于是乎就看了一下這個控件的源碼,發現很容易就能摳出來單獨用。于是,我用摳出來的DrawerArrowDrawable寫了個demo: https://github.com/brian512/TestDrawerArrowDrawable
當然我也把該控件加入到我的 CodeBlog客戶端 里面了:
mArrowDrawable = new DrawerArrowDrawable(this); mArrowDrawable.setColor(getResources().getColor(R.color.white)); mTitleBar.setLeftDrawable(mArrowDrawable); sm.setOnScrollListener(new OnScrollListener() { @Override public void onScroll(float percentOpen) { mArrowDrawable.setProgress(percentOpen); } });
對,用起來就是這么簡單。其實,這個控件就是需要不斷的調用setProgress(percentOpen)來更新繪制的進度,然后在draw(Canvas canvas)方法里面根據percentOpen計算當前應該繪制的位置和圖形:
final float rotation = lerp(0, ARROW_HEAD_ANGLE, mProgress * 2 - 1); final float upStartX = Math.round(mSize/2 * Math.cos(rotation)); final float upStartY = Math.round(mSize/2 * Math.sin(rotation)); // 設置線條起點 mPath.moveTo(mOffsetLeft mSize/2 - upStartX, mOffsetTop mSize - upStartY); // 設置線條需要繪制的dx、dy,也就是在x軸的偏移量和在y軸的偏移量 mPath.rLineTo(2 * upStartX, upStartY * 2); mPath.moveTo(mOffsetLeft mSize/2 - upStartX, mOffsetTop mSize upStartY); mPath.rLineTo(2 * upStartX, upStartY * -2);
其中,mProgress為傳入的percentOpen值,即進度;ARROW_HEAD_ANGLE為線條旋轉最大角度;也就是說,這個類只能用于三杠和圖標的切換動作(其實旋轉角度及進度的計算是固定的,但是可以設置gap,size等參數實現其他類似的效果,但是變化不會太大),當然這個思路還是可以借鑒的:根據滑動的百分比來同步更新過度控件,其實在微信頁面滑動切換時下面tab漸隱漸顯的效果也是這個思路,當然還可以衍生出很多其他好玩的東西。更新一個效果:
這個效果就是根據動畫更新傳過來的插入值來更新mArrowDrawable的狀態
alphaAnimator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float value = http://www.tuicool.com/articles/(Float)animation.getAnimatedValue(); mArrowDrawable.setProgress(value); } });
Tags: 開源 安卓開發
文章來源:http://www.jianshu.com/p/00461fbfbcaf