Android優(yōu)質(zhì)索尼滾動(dòng)相冊(cè)
雖然索尼手機(jī)賣(mài)的不怎么樣,但是有些東西還是做的挺好的,工業(yè)設(shè)計(jì)就不用說(shuō)了,索尼的相冊(cè)的雙指任意縮放功能也是尤其炫酷。其桌面小部件滾動(dòng)相冊(cè)我覺(jué)得也挺好的,比谷歌原生的相冊(cè)墻功能好多了,網(wǎng)上搜了一下也沒(méi)發(fā)現(xiàn)有人寫(xiě)這個(gè),于是,下面就介紹下我的高A貨。
首先是效果圖:
主要手勢(shì)操作有:
1.上/下滿速移動(dòng),可以上滑/下滑一張圖片
2.上/下快讀移動(dòng),則根據(jù)滑動(dòng)速度,上滑/下滑多張圖片
3.單擊則請(qǐng)求系統(tǒng)圖庫(kù)展示該圖片
該小部件的主要優(yōu)點(diǎn):在屏幕內(nèi)的小范圍內(nèi)提供一個(gè)很好的圖片選擇/瀏覽部件,尤其是切換圖片時(shí)有很強(qiáng)的靠近/遠(yuǎn)離動(dòng)畫(huà)感,增加好感。
代碼分析
剛開(kāi)始想這個(gè)小部件的時(shí)候以為是利用多個(gè)ImageView疊加實(shí)現(xiàn)的效果,例如谷歌原生的該部件就是利用多個(gè)ImageView疊加形成的,但是效果遠(yuǎn)比不上這個(gè)。但覺(jué)得通過(guò)多個(gè)ImageView疊加可能會(huì)沒(méi)這么流暢,性能上也不好。該效果本身也比較規(guī)律,應(yīng)該可以通過(guò)一個(gè)View來(lái)實(shí)現(xiàn),達(dá)到更好的性能。于是通過(guò)View Hierarchy分析,sony這個(gè)果然是通過(guò)一個(gè)View實(shí)現(xiàn)的,于是通過(guò)如下方式這個(gè)小部件。
代碼主要由三個(gè)部分組成:
•RollImageView:實(shí)際的View
•CellCalculater:用來(lái)實(shí)時(shí)計(jì)算每張圖片的繪制區(qū)域以及透明度,這個(gè)是本小部件的核心部件。接口定義如下:
/** * get all rects for drawing image * @return */ public Cell[] getCells(); /** * * @param distance the motion distance during the period from ACTION_DOWN to this moment * @return 0 means no roll, positive number means roll forward and negative means roll backward */ public int setStatus(float distance); /** * set the dimen of view * @param widht * @param height */ public void setDimen(int widht, int height); /** * set to the status for static */ public void setStatic();
•ImageLoader:用來(lái)加載圖片,提供Bitmap給RollImageView繪制。接口定義如下:
/** * the images shown roll forward */ public void rollForward(); /** * the images shown roll backward */ public void rollBackward(); /** * get bitmaps * @return */ public Bitmap[] getBitmap(); /** * use invalidate to invalidate the view * @param invalidate */ public void setInvalidate(RollImageView.InvalidateView invalidate); /** * set the dimen of view * @param width * @param height */ public void setDimen(int width, int height); /** * the image path to be show * @param paths */ public void setImagePaths(List<String> paths); /** * get large bitmap while static */ public void loadCurrentLargeBitmap();
下面分析每個(gè)部分的核心代碼。
RollImageView
View的主要職責(zé)是draw各個(gè)bitmap以及響應(yīng)用戶的手勢(shì)操作,相對(duì)比較簡(jiǎn)單。
繪制部分就是把從ImageLoader獲得的的各個(gè)Bitmap按照從CellCalculater中獲得的繪制區(qū)域以及透明度繪制到屏幕上,目前本代碼實(shí)現(xiàn)的比較簡(jiǎn)單,沒(méi)有考慮不同尺寸的圖片需要進(jìn)行一些更加協(xié)調(diào)的顯示方式,比如像ImageView.ScaleType中定義的一些顯示方式?! ?nbsp;
@Override public void onDraw(Canvas canvas) { super.onDraw(canvas); Bitmap[] bitmaps = mImageLoader.getBitmap(); Cell[] cells = mCellCalculator.getCells(); //得到每張Image的顯示區(qū)域與透明度 canvas.translate(getWidth() / 2, 0); for (int i = SHOW_CNT - 1; i >= 0; i--) { //從最底層的Image開(kāi)始繪制 Bitmap bitmap = bitmaps[i]; Cell cell = cells[i]; if (bitmap != null && !bitmap.isRecycled()) { mPaint.setAlpha(cell.getAlpha()); LOG("ondraw " + i + bitmap.getWidth() + " " + cell.getRectF() + " alpha " + cell.getAlpha()); canvas.drawBitmap(bitmap, null, cell.getRectF(), mPaint); } } }
手勢(shì)部分采用了GestureListener,主要代碼如下:
@Override public boolean onTouchEvent(MotionEvent event) { if (event.getPointerCount() > 1) { return false; } mGestureDetector.onTouchEvent(event); switch (event.getAction()) { case MotionEvent.ACTION_UP: //這里主要用于處理沒(méi)有觸發(fā)Fling事件時(shí),使界面保持沒(méi)有移動(dòng)的狀態(tài) if(!mIsFling){ if(mRollResult == CellCalculator.ROLL_FORWARD){ mImageLoader.rollForward(); } else if (mRollResult == CellCalculator.ROLL_BACKWARD && !mScrollRollBack){ mImageLoader.rollBackward(); } LOG("OnGestureListener ACTION_UP setstatic " ); mCellCalculator.setStatic(); mImageLoader.loadCurrentLargeBitmap(); } break; default: break; } return true; } //緩慢拖動(dòng) @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { mScrollDistance += distanceY; if(mScrollDistance > 0 && !mScrollRollBack){ mImageLoader.rollBackward(); mScrollRollBack = true; } else if(mScrollDistance < 0 && mScrollRollBack){ mImageLoader.rollForward(); mScrollRollBack = false; } LOG("OnGestureListener onScroll " + distanceY + " all" + mScrollDistance); mRollResult = mCellCalculator.setStatus(-mScrollDistance); invalidate(); return true; } //快速拖動(dòng) @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if (Math.abs(velocityY) > MIN_FLING) { LOG("OnGestureListener onFling " + velocityY); if (mExecutorService == null) { mExecutorService = Executors.newSingleThreadExecutor(); } mIsFling = true; mExecutorService.submit(new FlingTask(velocityY)); } return true; } //利用一個(gè)異步任務(wù)來(lái)處理滾動(dòng)多張Images private class FlingTask implements Runnable { float mVelocity; float mViewHeight; int mSleepTime; boolean mRollBackward; FlingTask(float velocity) { mRollBackward = velocity < 0 ? true : false; mVelocity = Math.abs(velocity / 4); mViewHeight = RollImageView.this.getHeight() / 2; mSleepTime = (int)(4000 / Math.abs(velocity) * 100); //the slower velocity of fling, the longer interval for roll } @Override public void run() { int i = 0; try{ while (mVelocity > mViewHeight) { mCellCalculator.setStatus(mRollBackward ? -mViewHeight : mViewHeight); mHandler.sendEmptyMessage(MSG_INVALATE); //determines the count of roll. The using of mViewHeight has no strictly logical mVelocity -= mViewHeight; if (((i++) & 1) == 0) { //roll forward once for every two setStatus if(mRollBackward){ mImageLoader.rollBackward(); }else { mImageLoader.rollForward(); } } Thread.sleep(mSleepTime); } mCellCalculator.setStatic(); mImageLoader.loadCurrentLargeBitmap(); mHandler.sendEmptyMessage(MSG_INVALATE); } catch(Exception e){ } finally{ } } }
CellCalculater分析
首先闡明下向前移動(dòng)/向后移動(dòng)的概念。需要顯示的圖片路徑存儲(chǔ)為一個(gè)List,假設(shè)顯示在最前的圖片的索引為index,則當(dāng)前顯示的圖片為[index,index+3],向前則表示index加1,向后則表示index減1.
CellCalculater的計(jì)算情形主要在于用戶通過(guò)手勢(shì)操作,表達(dá)了需要向前或者向后移動(dòng)一張圖片的意圖。在View中能夠獲取到的只是手勢(shì)移動(dòng)的距離,所以在CellCalculater中需要對(duì)傳進(jìn)來(lái)的移動(dòng)距離進(jìn)行處理,輸出移動(dòng)結(jié)果。在我的實(shí)現(xiàn)中,當(dāng)移動(dòng)距離超過(guò)圖片高度一半的時(shí)候,就表示顯示的圖片需要移動(dòng)一位,否則當(dāng)手勢(shì)操作結(jié)束的時(shí)候就設(shè)置為static狀態(tài)。主要代碼如下:
public DefaultCellCalculator(int showCnt){ mCnt = showCnt; mCells = new Cell[mCnt]; mAlphas = new float[mCnt]; STATIC_ALPHA = new int[mCnt]; STATIC_ALPHA[mCnt - 1] = 0; //最后一張圖的透明度為0 int alphaUnit = (255 - FIRST_ALPHA) / (mCnt - 2); for(int i = mCnt - 2; i >= 0; i--){ //定義靜態(tài)時(shí)每張圖的透明度 STATIC_ALPHA[i] = FIRST_ALPHA + (mCnt - 2 - i) * alphaUnit; } } @Override public Cell[] getCells() { return mCells; } //用戶手勢(shì)移動(dòng),distance表示移動(dòng)距離,正負(fù)值分別意味著需要向前/向后移動(dòng) @Override public int setStatus(float distance) { if(distance > 0){ return calculateForward(distance); } else if(distance < 0){ return calculateBackward(distance); } else{ initCells(); } return 0; } //設(shè)置RollImageView的尺寸,從而計(jì)算合適的顯示區(qū)域 @Override public void setDimen(int widht, int height) { mViewWidth = widht; mViewHeight = height; mWidhtIndent = (int)(WIDHT_INDENT * mViewWidth); mWidths = new int[mCnt]; for(int i = 0; i < mCnt; i++){ mWidths[i] = mViewWidth - i * mWidhtIndent; } //每張圖片的高度。 //假如顯示四張圖,那么在上面會(huì)有三個(gè)高度落差,然后最底部保留一個(gè)高度落差,所以是mcnt-1 mImageHeight = mViewHeight - (mCnt - 1) * HEIGHT_INDENT; LOG("mImageHeight " + mImageHeight); initCells(); } //靜態(tài)時(shí),即用戶手勢(shì)操作結(jié)束時(shí) @Override public void setStatic() { initCells(); } //用戶有需要向前移動(dòng)一位的趨勢(shì) private int calculateForward(float status){ float scale = status / mImageHeight; LOG("scale " + scale + " mImageHeight " + mImageHeight + " status " + status); for(int i = 1; i < mCnt; i++){ mCells[i].setWidth(interpolate(scale * 3, mWidths[i], mWidths[i - 1])); // *3 使得后面的寬度快速增大,經(jīng)驗(yàn)值 mCells[i].moveVertical(interpolate(scale * 10, 0, HEIGHT_INDENT)); //*10使得后面的圖片迅速向前,向前的動(dòng)畫(huà)感更強(qiáng) mCells[i].setAlpha((int)interpolate(scale, STATIC_ALPHA[i], STATIC_ALPHA[i - 1])); } mCells[0].moveVertical(status); mCells[0].setAlpha((int)interpolate(scale, 255, 0)); if(status >= mImageHeight / 3){ return ROLL_FORWARD; } else { return 0; } } //用戶有需要向后移動(dòng)一位的趨勢(shì) private int calculateBackward(float status){ float scale = Math.abs(status / mImageHeight); for(int i = 1; i < mCnt; i++){ mCells[i].setWidth(interpolate(scale, mWidths[i - 1], mWidths[i])); mCells[i].moveVertical(-scale * HEIGHT_INDENT); mCells[i].setAlpha((int)interpolate(scale, STATIC_ALPHA[i - 1], STATIC_ALPHA[i])); } mCells[0].resetRect(); mCells[0].setWidth(mWidths[0]); mCells[0].setHeight(mImageHeight); mCells[0].moveVertical(mImageHeight + status); mCells[0].setAlpha((int)interpolate(scale, 0, 255)); if(-status >= mImageHeight / 3){ return ROLL_BACKWARD; } else { return 0; } } /** * status without move */ private void initCells(){ int top = -HEIGHT_INDENT; for(int i = 0; i < mCnt; i++){ RectF rectF = new RectF(0,0,0,0); rectF.top = top + (mCnt - 1 - i) * HEIGHT_INDENT; rectF.bottom = rectF.top + mImageHeight; mCells[i] = new Cell(rectF, STATIC_ALPHA[i]); mCells[i].setWidth(mWidths[i]); } } //計(jì)算差值 private float interpolate(float scale, float start, float end){ if(scale > 1){ scale = 1; } return start + scale * (end - start); }
ImageLoader分析
ImageLoader其實(shí)比較簡(jiǎn)單,主要有如下兩點(diǎn):
•響應(yīng)手勢(shì)操作,處理對(duì)應(yīng)的向前/向后移動(dòng)時(shí)的Bitmap請(qǐng)求
•當(dāng)手勢(shì)還在操作時(shí),應(yīng)該加載小圖,等手勢(shì)操作結(jié)束之后,應(yīng)該加載大圖。因?yàn)橹挥芯徛苿?dòng)時(shí),需要清晰顯示,而快速移動(dòng)時(shí),顯示小圖即可,所以需要加載當(dāng)前index以及向前向后一張圖即可。
//加載當(dāng)前index以及向前向后三張大圖 @Override public void loadCurrentLargeBitmap() { for(int i = mCurrentIndex - 1; i < mCurrentIndex + 2; i++){ if(i >= 0 && i < mImagesCnt - 1){ mBitmapCache.getLargeBitmap(mAllImagePaths[i]); } } } //index向前移動(dòng)一位 @Override public void rollForward() { LOG("rollForward"); mCurrentIndex++; if(mCurrentIndex > mImagesCnt - 1){ mCurrentIndex = mImagesCnt - 1; } setCurrentPaths(); } //index向后移動(dòng)一位 @Override public void rollBackward() { LOG("rollBackward"); mCurrentIndex--; if(mCurrentIndex < 0){ mCurrentIndex = 0; } setCurrentPaths(); } @Override public Bitmap[] getBitmap() { if(mCurrentPaths != null){ LOG("getBitmap paths nut null"); for(int i = mCurrentIndex, j = 0; j < mShowCnt; j++, i++){ if(i >= 0 && i < mImagesCnt){ mCurrentBitmaps[j] = mBitmapCache.getBimap(mAllImagePaths[i]); } else{ mCurrentBitmaps[j] = mBitmapCache.getBimap(NO_PATH); } } } return mCurrentBitmaps; }
最后,所有源代碼:https://github.com/willhua/RollImage
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android APK優(yōu)化工具Zipalign詳解
- Android樣式的開(kāi)發(fā):layer-list實(shí)例詳解
- Android 逆向?qū)W習(xí)詳解及實(shí)例
- Android自定義圓形倒計(jì)時(shí)進(jìn)度條
- AndroidSDK Support自帶夜間、日間模式切換詳解
- Android 動(dòng)態(tài)高斯模糊效果教程
- 利用Android中BitmapShader制作自帶邊框的圓形頭像
- Android中使用ViewStub實(shí)現(xiàn)布局優(yōu)化
- Android ViewPager實(shí)現(xiàn)Banner循環(huán)播放
- Android Zipalign工具優(yōu)化Android APK應(yīng)用
相關(guān)文章
Android的App啟動(dòng)時(shí)白屏的問(wèn)題解決辦法
這篇文章主要介紹了Android的App啟動(dòng)時(shí)白屏的問(wèn)題相關(guān)資料,在App啟動(dòng)的第一次的時(shí)候白屏?xí)欢螘r(shí)間,這里提供了解決辦法,需要的朋友可以參考下2017-08-08Flutter中嵌入Android 原生TextView實(shí)例教程
這篇文章主要給大家介紹了關(guān)于Flutter中嵌入Android 原生TextView的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09Android App實(shí)現(xiàn)監(jiān)聽(tīng)軟鍵盤(pán)按鍵的三種方式
本篇文章主要介紹Android App實(shí)現(xiàn)監(jiān)聽(tīng)軟鍵盤(pán)按鍵的三種方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03Android常見(jiàn)的幾種內(nèi)存泄漏小結(jié)
本篇文章主要介紹了Android常見(jiàn)的幾種內(nèi)存泄漏小結(jié)。詳細(xì)的介紹了內(nèi)存泄漏的原因及影響和解決方法,有興趣的可以了解一下。2017-03-03Android自定義view仿微信刷新旋轉(zhuǎn)小風(fēng)車(chē)
這篇文章主要介紹了Android自定義view仿微信刷新旋轉(zhuǎn)小風(fēng)車(chē),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12Android側(cè)滑菜單控件DrawerLayout使用詳解
這篇文章主要為大家詳細(xì)介紹了Android側(cè)滑菜單控件DrawerLayout的使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android實(shí)現(xiàn)購(gòu)物車(chē)添加商品特效
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)購(gòu)物車(chē)添加商品特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06Android Socket實(shí)現(xiàn)多個(gè)客戶端聊天布局
這篇文章主要為大家詳細(xì)介紹了Android Socket實(shí)現(xiàn)多個(gè)客戶端聊天布局,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android實(shí)現(xiàn)App中導(dǎo)航Tab欄懸浮的功能
相信大家在玩手機(jī)的過(guò)程中應(yīng)該會(huì)注意到很多的app都有這種功能,比如說(shuō)外賣(mài)達(dá)人常用的“餓了么”。所以這篇文章給大家分享了Android如何實(shí)現(xiàn)app中的導(dǎo)航Tab欄懸浮的功能,有需要的朋友們可以參考借鑒。2016-10-10