[github高级控件]带你走近-自定义标签云

在项目中经常遇到一些标签云的效果，比如城市的选择，景点类型选择，酒店房型选择这些常见使用标签云效果就比较好了。

今天一步步的写一个标签云view，借鉴于github上TagCloudView

1.准备工作

attr.xml

<resources><declare-styleable name="TagTextViewStyle"><attr name="t_textSize" format="dimension"/><attr name="t_textColor" format="color"/><attr name="t_itemBorder" format="dimension"/><attr name="t_viewBorder" format="dimension"/><attr name="t_tagBackground" format="reference"/><attr name="t_singleLine" format="boolean"/><attr name="t_imageWidth" format="dimension"/><attr name="t_imageHeight" format="dimension"/><attr name="t_rightArrow" format="integer"/><attr name="t_showArrow" format="boolean"/><attr name="t_showMore" format="boolean"/><attr name="t_moreTextStr" format="string"/><attr name="t_moreTextWidth" format="dimension"/></declare-styleable></resources>

然后定义一个TagTextView，继承与ViewGroup，接下来就从attr中获取这些属性

 TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.TagTextViewStyle, defStyleAttr, defStyleAttr);mTextSize = typedArray.getDimensionPixelSize(R.styleable.TagTextViewStyle_t_textSize, 12);//更多属性自行实现...

2.重写onMeasure

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//1，计算子view//2，计算tag view 实际需要高度//3，根据高度设置}

计算子view

MeasureSpec封装了父布局传递给子布局的布局要求，每个MeasureSpec代表了一组宽度和高度的要求。一个MeasureSpec由size和mode组成，它有三种模式：UNSPECIFIED(未指定),父元素部队自元素施加任何束缚，子元素可以得到任意想要的大小；EXACTLY(完全)，父元素决定自元素的确切大小，子元素将被限定在给定的边界里而忽略它本身大小；AT_MOST(至多)，子元素至多达到指定大小的值

这里不指定具体的mode和size作特殊处理，只是使用到size和mode

      //计算 ViewGroup 上级容器为其推荐的宽高int widthMode = MeasureSpec.getMode(widthMeasureSpec);int heightMode = MeasureSpec.getMode(heightMeasureSpec);mWidthSize = MeasureSpec.getSize(widthMeasureSpec);mHeightSize = MeasureSpec.getSize(heightMeasureSpec);// 计算出所有的childView的宽和高  measureChildren(widthMeasureSpec, heightMeasureSpec);

measureChildren一行代码就计算了所以的childview的宽，高，这里不具体分析，可以自行查看源码分析measureChildren原理。

计算TagTextView的高度并确定item的位置

如果所有标签没有超过1行，那么TagTextView的高度就是item的高度；如果超过一行，那么高度h=item高度*行数+所有间距

这里实现2中模式：多行模式和单行模式
先介绍怎么实现多行模式

 private int getMultiTotalHeight(int totalWidth, int totalHeight) {int childWidth;int childHeight;//遍历所有的子viewfor (int i = 0; i < getChildCount(); i++) {View child = getChildAt(i);childWidth = child.getMeasuredWidth();childHeight = child.getMeasuredHeight();//总的宽度 = 所有子view宽+item间距totalWidth += childWidth + mItemBorder;//设置第一行高度 因为layout t = totalHeight - childHeight//要让totalHeight - childHeight不为负数 所以先设置一行高度if (i == 0) {totalHeight = childHeight + mItemBorder;}//2种情况所有item宽度大于viewgroup宽度，这时候需要换行；不大于viewgroup宽度，继续//所有的totalWidth=item宽度+之间的边距，加上左边第一个item与viewGroup边距mViewBorder，加上右边mItemBorder边距，大于viewGroup的宽，需要换行if (totalWidth + mItemBorder + mViewBorder > mWidthSize) {totalWidth = mItemBorder;//换行设置间距//高度 = 原高度 + item高度 + item间距totalHeight += childHeight + mItemBorder;//layout确定子view在view group中的位置child.layout(totalWidth + mViewBorder,totalHeight - childHeight,totalWidth + childWidth + mViewBorder,totalHeight);totalWidth += childWidth;} else {//横排：起始 间隔viewboder距离开始，到总的width（items+item间距）+view间距//竖排：起始 离顶部viewboder间距开始，到总的heightchild.layout(totalWidth - childWidth + mViewBorder,totalHeight - childHeight,totalWidth + mViewBorder,totalHeight);}}return totalHeight + mItemBorder;}

设置高度

 //子view计算的宽，高度去决定测量的宽高值setMeasuredDimension(mWidthSize, heightMode == MeasureSpec.EXACTLY ? mHeightSize : totalHeight);

做完上面的步骤，view的测量，布局都已经完成，接下来只需要把item view放进来。

添加item到ViewGroup

 public void setTags(List<String> tagDatas) {if (tagDatas == null) {return;}mTags = tagDatas;//先清空所有的viewremoveAllViews();String tag;for (int i = 0; i < mTags.size(); i++) {tag = tagDatas.get(i);//加载布局文件TextView tagView = (TextView) mInflater.inflate(R.layout.layout_item, null);tagView.setText(tag);tagView.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextSize);tagView.setBackgroundResource(mTagBackground);tagView.setTextColor(mTextColor);LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);tagView.setLayoutParams(params);／/添加viewaddView(tagView);  }//刷新postInvalidate();}

多行显示tag就在这里写完了，运行，看下标签云的效果

写完多行模式，接下来写单行模式，我们会问，多行模式下不超过viewgroup宽度不就是单行吗，为什么还要定义单行模式？
这里的单行模式是指不管有多少item都值显示单行，超出的item不显示，用”…”代替。

单行模式与多行模式基本类似，主要区别在于获取totalHeight和addView部分。接下来对这两个部分进行实现。

单行模式实现

初始化单行模式view

 private void initSingleLineView(int widthMeasureSpec, int heightMeasureSpec) {//判断是否是单行模式if (!mSingleLine) {return;}//是否显示向右箭头if (mShowArrow) {mArrowIv = new ImageView(getContext());mArrowIv.setImageResource(mArrowResId);mArrowIv.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));mArrowIv.setScaleType(ImageView.ScaleType.CENTER_INSIDE);measureChild(mArrowIv, widthMeasureSpec, heightMeasureSpec);mArrowIconWidth = mArrowIv.getMeasuredWidth();mImageHeight = mArrowIv.getMeasuredHeight();addView(mArrowIv);}//是否显示更多itemif (mShowMore) {mMoreTextTv = (TextView) mInflater.inflate(R.layout.layout_item, null);mMoreTextTv.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextSize);mMoreTextTv.setTextColor(mTextColor);mMoreTextTv.setBackgroundResource(mTagBackground);@SuppressLint("DrawAllocation")LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);mMoreTextTv.setLayoutParams(layoutParams);mMoreTextTv.setText(mMoreTextStr == null || mMoreTextStr.equals("") ? "..." : mMoreTextStr);measureChild(mMoreTextTv, widthMeasureSpec, heightMeasureSpec);mMoreTextWidth = mMoreTextTv.getMeasuredWidth();addView(mMoreTextTv);}}

计算单行模式高度及确定位置2

单行模式看起来代码比较多，其实并不复杂，只是比多行模式多了一个arrow icon和查看更多item

private int getSingleTotalHeight(int totalWidth, int totalHeight) {int childWidth;int childHeight = 0;totalWidth += mViewBorder;//设置左边距//上图红色边框的总宽度int textTotalWidth = getTextTotalWidth();//items 总宽度小于 viewgroup - 箭头图片width 不用显示更多itemif (textTotalWidth < mWidthSize - mArrowIconWidth) {mMoreTextStr = null;mMoreTextWidth = 0;}//计算item中宽度并确定布局for (int i = 0; i < getChildCount(); i++) {View child = getChildAt(i);childWidth = child.getMeasuredWidth();childHeight = child.getMeasuredHeight();if (i == 0) {totalWidth += childWidth;totalHeight = childHeight + mViewBorder;} else {totalWidth += childWidth + mItemBorder;}//左边距+items宽+item边距+更多item宽+arrow icon宽+右边距 < viewgroup宽if (mViewBorder + totalWidth + mItemBorder +   mMoreTextWidth + mArrowIconWidth+ mViewBorder  < mWidthSize) {//横排：起始 间隔mItemBorder距离开始，到总的width（items+item间距）+mItemBorder间距//竖排：起始 离顶部viewboder间距开始，到总的heightchild.layout(totalWidth - childWidth + mItemBorder,totalHeight - childHeight,totalWidth + mItemBorder,totalHeight);} else {//超出部分不显示 ，前面已经加上了，所以这里需要减去totalWidth -= childWidth + mViewBorder;break;}}//更多itemif (mMoreTextTv != null) {//起始位置 从最后一个item+item边距位置x开始 //结束位置 x+moretextWidthmMoreTextTv.layout(mViewBorder+ totalWidth + mItemBorder,totalHeight - childHeight,totalWidth + mViewBorder + mItemBorder + mMoreTextWidth,totalHeight);}totalHeight += mViewBorder;//箭头 与上面类似if (mArrowIv != null) {mArrowIv.layout(mWidthSize - mArrowIconWidth - mViewBorder,(totalHeight - mImageHeight) / 2,mWidthSize - mViewBorder,(totalHeight - mImageHeight) / 2 + mImageHeight);}return totalHeight;}

这样单行模式也就完成了，剩下的就是加入监听事件，优化等，功能扩展，这里不多介绍

完整demo下载地址：TagTextView