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功能，需求是仿作微信图片选择器，所以在此把它分享出来，如果有描述错误的地方，获取有什么不对的地方，大家可以留言。当然网上也有各种更样的例子，但是我希望，如果大家也像我一样遇到类似的需求可以直接拿去用，分享出来也算是给自己攒点人品〜