最近项目的需求:需要一个View可以清晰的展现出员工的名字,并且可以进行添加或删除员工,本来打算Github找一个,但最近看了 Android开发艺术探索 看完了自定View的章节一直没有动手写一个,终于现在写完了..

先看demo效果图:

效果图

Android自带的LineLayout只支持水平或者垂直布局不支持自动换行这点相信都知道,只要解决LineLayout不会自动换行和确定每个子View应该显示的位置,基本就算解决问题了.

有了解过自定义View都知道主要有两个方法:

• onMeasure() --- 测量 (测量View的宽高)
• onLayout() --- 布局 (把View显示在想要的位置)

看一眼上面的效果图,简单的说onMeasure就是计算出整个ViewGrop()在屏幕中所占的大小.onLayout是控制每个蓝色的标签在整个View的位置.

onMeasure宽高应该是多少,该怎么样测量?

逻辑是这样的: 以上面的gif图为例,标签的第一行从"陈奕迅"到"权志龙"一共能塞下5个标签,并且仔细看会发现"权志龙"的标签的右边还有剩下了一小部分空间,但是多出来空间不足以塞下一个标签"周星驰"所以只能加多一行了,到了第二行的最后一个标签"赵又廷"又发现剩下的空间塞不下"吴孟达"了只能再加多一行...一直到最后一行的一共需要4行才能刚好够塞下所有标签.

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    measureChildren(widthMeasureSpec, heightMeasureSpec);

    //rows表示的是行数,默认为1
    int rows = 1;
    // lineWidth当前行累计的总宽度
    int lineWidth = 0;
    //eachHeight表示的是当前行的高度(注意是当前行)
    int eachHeight ;

        //有N个子View就for循环执行N次
     for (int i = 0; i < childCount; i++) {
        //获取第N个子View
        final View childView = getChildAt(i);
        //获取第N个子View的布局参数
        LinearLayout.LayoutParams childViewLayoutParams= (LayoutParams) childView.getLayoutParams();
        //获取子View的布局参数 距离左右边缘的大小
        int left=childViewLayoutParams.leftMargin;
        int right=childViewLayoutParams.rightMargin;
        /*这里比较重要,只要for循环不是执行到最后一次,就用当前子View的(高度或宽度)和下一个子View
          的(高度或宽度)进行比较,把较大的值用(childViewMaxHeight或childViewmaxWidth)记录下来.*/
        if(i!=childCount-1){
            childViewMaxHeight=getChildAt(i).getMeasuredHeight()<getChildAt(i+1).getMeasuredHeight()?getChildAt(i+1).getMeasuredHeight():childViewMaxHeight;
            childViewmaxWidth=getChildAt(i).getMeasuredWidth()<getChildAt(i+1).getMeasuredWidth()?getChildAt(i+1).getMeasuredWidth():childViewmaxWidth;           
        }
        //如果当前行的总宽度+当前子View的宽度+子View距离左右边缘的大小>当前屏幕的宽度
        if(lineWidth+getChildAt(i).getMeasuredWidth() + left+right>=widthSpecSize){ 
            //说明需要加一行,所以rows++
            rows++;
            lineWidth=left;
        }
        //当前行的总宽度+=当前子View的宽度+距离左右间距大小
        lineWidth += (getChildAt(i).getMeasuredWidth()  + left+right);
        //每行的高度 = 当前行的最高高度
        eachHeight = childViewMaxHeight +top_bottom_margin ;
   
        if (childCount == 0) {
            //如果一个子View都没有宽度和高度设置为0即可
            setMeasuredDimension(0, 0);
        } else if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecpMode == MeasureSpec.AT_MOST) {
            //如果宽高的属性都是wrap_content,宽度是行的总宽度,高度是标签的 高度*行数
            setMeasuredDimension(lineWidth, rows * eachHeight + top_bottom_margin);
        } else if (widthSpecMode == MeasureSpec.AT_MOST) {
            //如果高度和宽度的属性都是march_parent,
            setMeasuredDimension(lineWidth, heightSpecpSize);
        } else if (heightSpecpMode == MeasureSpec.AT_MOST) {
            //如果高度的属性是wrap_content的用下面的测量方式
            //宽度是屏幕的大小,高度是标签的(高度*行数)
            setMeasuredDimension(widthSpecSize,  rows * eachHeight + top_bottom_margin);
        }
    }

需要注意的是下面这条判断语句:

if(lineWidth+getChildAt(i).getMeasuredWidth() + left+right>=widthSpecSize){
rows++;
lineWidth=left;
}

因为lineWidth是当前行的第一个标签到最后一个能完整显示的标签所累加的宽度总和,而widthSpecSize是当前手机屏幕宽度,这里的需求是每个标签都需要完整的显示不能超出屏幕的宽度,否者会显示不全,所以只要 [前者加上当前标签的宽度总和>手机屏幕宽度] 说明当前行已经没有足够的位置塞下当前标签了,所以需要加多一行 rows++.

onLayout里面要如何为每个子View显示在合适的位置?

protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //当前子View的left
        int childLeft = 0;
        // childCount子View的个数
        final int childCount = getChildCount();
        //获取第一个子View
      View childView = getChildAt(0);
      //获取第一个子View的布局属性
      LinearLayout.LayoutParams childViewLayoutParams = (LayoutParams) childView.getLayoutParams();
      //获取第一个子View左右距离边缘的大小
      int left = childViewLayoutParams.leftMargin;
      int right = childViewLayoutParams.rightMargin;
      //把子View距离左边缘的值赋值给childLeft(为什么这么做下面会说)
      childLeft = left;
      //初始化当前当前子View的高度
      int currentHeight = 0;
      //判断当前是否是第一行
      boolean firstLine = true;

       //略....
      for (int i = 0; i < childCount; i++) {
          childView = getChildAt(i);
          childViewLayoutParams = (LayoutParams) childView.getLayoutParams();
          left = childViewLayoutParams.leftMargin;
          right = childViewLayoutParams.rightMargin;
          //如果当前子View可见
          if (childView.getVisibility() != View.GONE) {
              //获取当前子View的宽度
              final int childWidth = childView.getMeasuredWidth();
               //如果childLeft+子View的宽度 > 手机屏幕的宽度
              if (childLeft + childWidth + left + right > getMeasuredWidth()) {
                  //childLeft从新开始计算
                  childLeft = left;
                  //currentHeight += 当前行高度最高的子View的高度(childViewMaxHeight在onMeasure申明)
                  currentHeight += childViewMaxHeight + top_bottom_margin;  
                  firstLine = false;
              }
             if (firstLine) {
                  childView.layout(childLeft, top_bottom_margin, childLeft + childWidth, childViewMaxHeight + top_bottom_margin);
              } else {
                  childView.layout(childLeft, currentHeight + top_bottom_margin, childLeft + childWidth, childViewMaxHeight + currentHeight + top_bottom_margin);
              }
              //childLeft进行累加
              childLeft += childWidth + left + right;
          }

      }
  }

onLayout逻辑相比onMeasure比较复杂,但理解了原理之后其实很简单.

先理清几个比较重要的成员变量的含义:

• childLeft
  有过自定义属性经验的人都应该知道确定一个View在屏幕上显示的位置主要由4个参数决定:Left,Top,Right,Bottom这里的childLeft就是每个子View的Left,请注意这里的childLeft的值是动态改变的.
  可以看到onLayout函数中for循环语句的最后一段代码是:

childLeft += childWidth + left + right;

意思是每遍历一个子View就 让 childLeft +=当前子View 的宽度
以下面的图为例:

屏幕快照 2017-08-06 下午9.43.31.png

假设陈奕迅这个子View的宽度是100,如果陈奕迅不想被周星驰挡住那么周星驰的Left至少要大于100

if (childLeft + childWidth + left + right > getMeasuredWidth()) {
                  childLeft = left;
                  currentHeight += childViewMaxHeight + top_bottom_margin;  
                  firstLine = false;
              }

上面这段代码的意思可以这样理解:
假设for循环执行到了第二行的周星驰的时候进行了判断语句的时候, childLeft的值就是权志龙这个标签的 Left,如果childLeft + 当前标签的宽度(这里指周星驰这个标签) > 手机屏幕的宽度,说明周星驰显示不下了,只能换行了,所以currentHeight+= childViewMaxHeight(childViewMaxHeight在onMeasure申明过)这样就不会出现第二行的周星驰把第一行的陈奕迅挡住的情况

if (firstLine) {
                  childView.layout(childLeft, top_bottom_margin, childLeft + childWidth, childViewMaxHeight + top_bottom_margin);
              } else {
                  childView.layout(childLeft, currentHeight + top_bottom_margin, childLeft + childWidth, childViewMaxHeight + currentHeight + top_bottom_margin);
              }

最后要注意的就是上面的代码:
如果是第一行Top就是top_bottom_margin(这里是让每个标签的上下之间有一个间距)
否者如果第二行Top就是取当前标签所在的那一行中子View高度最高的值+top_bottom_margin

基本onLayout需要注意的代码就是这些.

剩下的是添加标签,删除标签,切换删除标签的模式代码,不写解析了.没看懂的可以在下面留言.

private boolean isMutil = false;
private List<View> AllViews;


//添加标签的主要的代码:
public MyLinearLayout addTag(String... tag) {
    for (int i = 0; i < tag.length; i++) {
        if (AllViews == null)
            AllViews = new ArrayList<>();
        TextView tagView=NewTagView(tag[i]);
        addView(tagView);
        if (!AllViews.contains(tagView))
            AllViews.add(tagView);
        MultiRemove(isMutil);
    }
    return this;
}

 private TextView NewTagView(String text) {
    TextView tagView = new TextView(getContext());
    tagView.setTextSize(20);
    tagView.setPadding(30, 20, 30, 20);
    tagView.setTextColor(Color.WHITE);
    tagView.setBackgroundResource(normal_color);
    tagView.setText(text);
    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    lp.setMargins(20, 10, 0, 0);
    tagView.setLayoutParams(lp);
    return tagView;
}


private List<View> selectView;

 //执行移除多个标签的代码:
public void removeMultiTagViews() {
    for (View view : selectView) {
        removeView(view);
        AllViews.remove(view);
    }
}

//切换移除标签的模式(多选后点击删除按钮删除 或 长按某个标签直接删除):
public void ChangeRemoveModel() {
    isMutil = isMutil == false ? true : false;
    MultiRemove(isMutil);
}




private void MultiRemove(boolean isMulti) {

    for (View view : AllViews) {
        final TextView tagView = (TextView) view;
        if (isMulti) {
            tagView.setOnClickListener(null);
            tagView.setOnLongClickListener(new OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    removeView(v);
                    AllViews.remove(v);
                    return false;
                }
            });
        } else {
            if (selectView == null)
                selectView = new ArrayList<>();

            tagView.setOnLongClickListener(null);
            tagView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (selectView.contains(v)) {
                        tagView.setBackgroundResource(normal_color);
                        selectView.remove(v);
                    } else {
                        TextView tagView1 = (TextView) v;
                        tagView1.setBackgroundResource(select_color);
                        selectView.add(v);
                    }
                }
            });
        }
    }
}

调用代码:

    Button add;
    Button remove;
    Button switch_mode;
    EditText tag_content;
    MyLinearLayout tag_layout; //本文的自定义View
    ......
  public void onClick(View v) {
        switch (v.getId()){
            case R.id.add:
                if(tag_content.getText().toString().isEmpty()) {
                    Toast.makeText(MainActivity.this, "请输入tag内容再点击新增TAG", Toast.LENGTH_SHORT).show();
                    return;
                }
                tag_layout.addTag(tag_content.getText().toString());
                tag_content.setText("");               
                break;
            case R.id.remove:
                tag_layout.removeMultiTagViews();
                break;
            case R.id.switch_mode:
                tag_layout.ChangeRemoveModel();

                break;
        }
    }

如果文章有错误的地方希望能指出,避免误导他人.