前言
“人怕出名猪怕壮，树大招风，高处不胜寒”。前段时间因王健林在一次访谈中说到：“先定一个小目标，比方说，我先挣它一个亿！” 。之后一段时间引起一阵骚动，对于王健林来说可能真的是个小目标，但对我们这些人来说那是天方夜谭。因王健林的一个小目标，随后便是携程推出的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功能，需求是仿作微信图片选择器，所以在此把它分享出来，如果有描述错误的地方，获取有什么不对的地方，大家可以留言。当然网上也有各种更样的例子，但是我希望，如果大家也像我一样遇到类似的需求可以直接拿去用，分享出来也算是给自己攒点人品〜
网友评论