Android 仿微信圖片選擇器效果

前言

“人怕出名豬怕壯,樹大招風,高處不勝寒”。前段時間因王健林在一次訪談中說到:“先定一個小目標,比方說,我先掙它一個億!” 。之后一段時間引起一陣騷動,對于王健林來說可能真的是個小目標,但對我們這些人來說那是天方夜譚。因王健林的一個小目標,隨后便是攜程推出的996(早9點到晚9點、一周工作6天)工作制。這件事也引起了很多創業公司模仿,我廠就是其中之一。中秋前產品需標決定出一個bbs功能(即像微信可以發說說,評論,點贊),本來這些都是國慶后的計劃,就因996的推出這些需求全都提早在中秋前完成。好了,說了這么多廢話其實就是想抱怨一下。相信很多人都用過微信,像微信的圖片選擇器功能,在此我也把開發bbs實寫的圖片選擇器功能分享下,方便日后用到,也希望能幫助能用到的同學一點思路。


思路:

◆ 選擇圖片(支持多選)

◆ 拍照上傳

◆ 能即時添加刪除選中的圖片

◆ 發表說說

技術介紹

1.google? list(Lists.newArrayList)

2.采用 picasso 加載圖片

3.采用butterknife 注解

4.自定義控件 DragGridView

5.自定義控件 SquareLayout


難點(自定義DragGridView)介紹

DragGridView是繼承GridView的,用于顯示圖片及添加刪除。這里主要講解幾個重要的方法,這些是自定義控件必須去了解的。相信大家都知道自定義控件要重寫幾個方法:構造方法(必須實三個參數的),dispatchTouchEvent,onTouchEvent。

View的dispatchTouchEvent和onTouchEvent

探討Android事件傳遞機制前,明確android的兩大基礎控件類型:View和ViewGroup。View即普通的控件,沒有子布局的,如Button、TextView. ViewGroup繼承自View,表示可以有子控件,如Linearlayout、Listview這些。而事件即MotionEvent,最重要的有3個:

(1)MotionEvent.ACTION_DOWN ?按下View,是所有事件的開始

(2)MotionEvent.ACTION_MOVE ? 滑動事件

(3)MotionEvent.ACTION_UP ? ? ? 與down對應,表示抬起

對于View來說,事件傳遞機制有兩個函數:dispatchTouchEvent負責分發事件,在dispatchTouchEvent里又會調用onTouchEvent表示執行事件,或者說消費事件,事件傳遞的入口是View的dispatchTouchEvent()函數:

@Override

public boolean dispatchTouchEvent(MotionEvent ev) {

switch(ev.getAction()) {

caseMotionEvent.ACTION_DOWN:

//使用Handler延遲dragResponseMS執行mLongClickRunnable

if(isDrag&& getChildCount() >3) {

mHandler.postDelayed(mLongClickRunnable,dragResponseMS);

}

mDownX= (int) ev.getX();

mDownY= (int) ev.getY();

//根據按下的X,Y坐標獲取所點擊item的position

mDragPosition= pointToPosition(mDownX,mDownY);

if(mDragPosition== AdapterView.INVALID_POSITION) {

return super.dispatchTouchEvent(ev);

}

//根據position獲取該item所對應的View

mStartDragItemView= getChildAt(mDragPosition- getFirstVisiblePosition());

//下面這幾個距離大家可以參考我的博客上面的圖來理解下

mPoint2ItemTop=mDownY-mStartDragItemView.getTop();

mPoint2ItemLeft=mDownX-mStartDragItemView.getLeft();

mOffset2Top= (int) (ev.getRawY() -mDownY);

mOffset2Left= (int) (ev.getRawX() -mDownX);

//獲取DragGridView自動向上滾動的偏移量,小于這個值,DragGridView向下滾動

mDownScrollBorder= getHeight() /4;

//獲取DragGridView自動向下滾動的偏移量,大于這個值,DragGridView向上滾動

mUpScrollBorder= getHeight() *3/4;

//開啟mDragItemView繪圖緩存

mStartDragItemView.setDrawingCacheEnabled(true);

//獲取mDragItemView在緩存中的Bitmap對象

mDragBitmap= Bitmap.createBitmap(mStartDragItemView.getDrawingCache());

//這一步很關鍵,釋放繪圖緩存,避免出現重復的鏡像

mStartDragItemView.destroyDrawingCache();

if(onChanageListener!=null) {

isDrag=onChanageListener.onDown(mDragPosition);

}

break;

caseMotionEvent.ACTION_MOVE:

intmoveX = (int) ev.getX();

intmoveY = (int) ev.getY();

//如果我們在按下的item上面移動,只要不超過item的邊界我們就不移除mRunnable

if(!isTouchInItem(mStartDragItemView,moveX,moveY)) {

mHandler.removeCallbacks(mLongClickRunnable);

}

break;

caseMotionEvent.ACTION_UP:

mHandler.removeCallbacks(mLongClickRunnable);

mHandler.removeCallbacks(mScrollRunnable);

break;

}

return super.dispatchTouchEvent(ev);

}


onTouchEvent事件消費的監聽

@Override

public boolean onTouchEvent(MotionEvent ev) {

if(isDrag&&mDragImageView!=null) {

switch(ev.getAction()) {

caseMotionEvent.ACTION_MOVE:

moveX= (int) ev.getX();

moveY= (int) ev.getY();

//拖動item

onDragItem(moveX,moveY);

break;

caseMotionEvent.ACTION_UP:

onStopDrag();

isDrag=false;

break;

}

return true;

}

return super.onTouchEvent(ev);

}

以上這是dispatchTouchEvent(),onTouchEvent()處理的邏輯。 如有對事件分發機制不是很了解的同學,推薦看《Android 開發藝術探所》這本書。?


難點(自定義SquareLayout)介紹

相信很多同學在開發的過程中遇到了,Android 原生組件會因為嵌套了多布局,特別是有自定義控件是xml,會遇到原生的組件在顯示的時候顯示不全,這時我們就需要重寫原生的組件onMeasure()方法。SquareLayout就是為了解決這個問題,SquareLayout相對DragGridView來說就非常簡單了,SquareLayout它是直接繼承RelativeLayout。這個比較簡單沒有什么過多的難點,廢話不多說直接看源碼...

packagecom.lp.knightoneadmin.wechatimageselector.view;

importandroid.content.Context;

importandroid.util.AttributeSet;

importandroid.widget.RelativeLayout;

/**

*@Module:

*@Comments: SquareLayout

*@Author: KnightOneAdmin

*@CreateDate: 16/9/11

*@ModifiedBy: KnightOneAdmin

*@ModifiedDate:下午4:02

*@Modified: SquareLayout

*/

public classSquareLayoutextendsRelativeLayout {

publicSquareLayout(Context context,AttributeSet attrs, intdefStyle) {

super(context,attrs,defStyle);

}

publicSquareLayout(Context context,AttributeSet attrs) {

super(context,attrs);

}

publicSquareLayout(Context context) {

super(context);

}

@Override

protected voidonMeasure(intwidthMeasureSpec, intheightMeasureSpec) {

super.onMeasure(widthMeasureSpec,heightMeasureSpec);

intwidth = getMeasuredWidth();

intheight = getMeasuredHeight();

if(height != width) {

// 強制讓高度等于寬度,重新布局

height = width;

heightMeasureSpec = MeasureSpec.makeMeasureSpec(height,MeasureSpec.EXACTLY);

super.onMeasure(widthMeasureSpec,heightMeasureSpec);

}

}

}

哈哈哈,看了一大代碼是不是覺得很煩!!! 哎,沒辦法套路就是這樣,“工欲善其事,必先利其器”對我們這些搞技術的來說,理論知識點也是極其重的。好了,下面來看下,實際效果吧!!!

仿微信圖片選擇器

總結:

項目github地址:

https://github.com/KnightOneAdmin/WeChatImageSelectors

圖片選擇器,我想大家并不陌生,但是處理起來還是有點麻煩的,基于前段時間剛剛做了bbs功能,需求是仿作微信圖片選擇器,所以在此把它分享出來,如果有描述錯誤的地方,獲取有什么不對的地方,大家可以留言。當然網上也有各種更樣的例子,但是我希望,如果大家也像我一樣遇到類似的需求可以直接拿去用,分享出來也算是給自己攢點人品?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容