Android自定義控件ViewGroup實現(xiàn)標(biāo)簽云（四）

更新時間：2021年06月23日 15:28:20 作者：總李寫代碼

這篇文章主要為大家詳細介紹了Android自定義控件ViewGroup實現(xiàn)標(biāo)簽云的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言：

前面幾篇講了自定義控件繪制原理Android自定義控件基本原理詳解（一），Android自定義控件之自定義屬性（二），Android自定義控件之自定義組合控件（三），常言道：“好記性不如爛筆頭，光說不練假把式！??！”，作為一名學(xué)渣就是因為沒有遵循這句名言才淪落于此，所以要謹遵教誨，注重理論與實踐相結(jié)合，今天通過自定義ViewGroup來實現(xiàn)一下項目中用到的標(biāo)簽云。

需求背景：

公司需要實現(xiàn)一個知識點的標(biāo)簽顯示，每個標(biāo)簽的長度未知，如下圖所示

基本繪制流程：

繪制原理這里不再介紹大致介紹下繪制流程
•構(gòu)造函數(shù)獲取自定義屬性
•onMeasure()方法，測量子控件的大小
•onLayout()方法，對子控件進行布局

1.）自定義屬性

 <declare-styleable name="TagsLayout">
  <attr name="tagVerticalSpace" format="dimension" />
  <attr name="tagHorizontalSpace" format="dimension" />
</declare-styleable>

2.）構(gòu)造函數(shù)中獲取自定義屬性值

private int childHorizontalSpace;
 private int childVerticalSpace;

 public TagsLayout(Context context, AttributeSet attrs) {
  super(context, attrs);
  TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.TagsLayout);
  if (attrArray != null) {
   childHorizontalSpace = attrArray.getDimensionPixelSize(R.styleable.TagsLayout_tagHorizontalSpace, 0);
   childVerticalSpace = attrArray.getDimensionPixelSize(R.styleable.TagsLayout_tagVerticalSpace, 0);
   attrArray.recycle();
  }
 }

3.）onMeasure函數(shù)測量子控件大小，然后設(shè)置當(dāng)前控件大小

 /**
  * 負責(zé)設(shè)置子控件的測量模式和大小 根據(jù)所有子控件設(shè)置自己的寬和高
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  // 獲得它的父容器為它設(shè)置的測量模式和大小
  int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
  int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
  int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
  int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
  // 如果是warp_content情況下，記錄寬和高
  int width = 0;
  int height = 0;
  /**
   * 記錄每一行的寬度，width不斷取最大寬度
   */
  int lineWidth = 0;
  /**
   * 每一行的高度，累加至height
   */
  int lineHeight = 0;

  int count = getChildCount();
  int left = getPaddingLeft();
  int top = getPaddingTop();
  // 遍歷每個子元素
  for (int i = 0; i < count; i++) {
   View child = getChildAt(i);
   if (child.getVisibility() == GONE)
    continue;
   // 測量每一個child的寬和高
   measureChild(child, widthMeasureSpec, heightMeasureSpec);
   // 得到child的lp
   MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
   // 當(dāng)前子空間實際占據(jù)的寬度
   int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin + childHorizontalSpace;
   // 當(dāng)前子空間實際占據(jù)的高度
   int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin + childVerticalSpace;
   /**
    * 如果加入當(dāng)前child，則超出最大寬度，則的到目前最大寬度給width，類加height 然后開啟新行
    */
   if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
    width = Math.max(lineWidth, childWidth);// 取最大的
    lineWidth = childWidth; // 重新開啟新行，開始記錄
    // 疊加當(dāng)前高度，
    height += lineHeight;
    // 開啟記錄下一行的高度
    lineHeight = childHeight;
    child.setTag(new Location(left, top + height, childWidth + left - childHorizontalSpace, height + child.getMeasuredHeight() + top));
   } else {// 否則累加值lineWidth,lineHeight取最大高度
    child.setTag(new Location(lineWidth + left, top + height, lineWidth + childWidth - childHorizontalSpace + left, height + child.getMeasuredHeight() + top));
    lineWidth += childWidth;
    lineHeight = Math.max(lineHeight, childHeight);
   }
  }
  width = Math.max(width, lineWidth) + getPaddingLeft() + getPaddingRight();
  height += lineHeight;
  sizeHeight += getPaddingTop() + getPaddingBottom();
  height += getPaddingTop() + getPaddingBottom();
  setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height);
 }

通過遍歷所有子控件調(diào)用measureChild函數(shù)獲取每個子控件的大小，然后通過寬度疊加判斷是否換行，疊加控件的高度，同時記錄下當(dāng)前子控件的坐標(biāo)，這里記錄坐標(biāo)引用了自己寫的一個內(nèi)部類Location.java

 /**
  * 記錄子控件的坐標(biāo)
  */
 public class Location {
  public Location(int left, int top, int right, int bottom) {
   this.left = left;
   this.top = top;
   this.right = right;
   this.bottom = bottom;
  }

  public int left;
  public int top;
  public int right;
  public int bottom;

 }

4.)onLayout函數(shù)對所有子控件重新布局

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int count = getChildCount();
  for (int i = 0; i < count; i++) {
   View child = getChildAt(i);
   if (child.getVisibility() == GONE)
    continue;
   Location location = (Location) child.getTag();
   child.layout(location.left, location.top, location.right, location.bottom);
  }
 }

這里直接遍歷所有子控件調(diào)用子控件的layout函數(shù)進行布局。

如何使用：

1）.布局問自己中直接引用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:lee="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <com.whoislcj.views.TagsLayout
  android:id="@+id/image_layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="10dp"
  lee:tagHorizontalSpace="10dp"
  lee:tagVerticalSpace="10dp" />

</LinearLayout>

2）.代碼添加標(biāo)簽

TagsLayout imageViewGroup = (TagsLayout) findViewById(R.id.image_layout);
 ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
  String[] string={"從我寫代碼那天起，我就沒有打算寫代碼","從我寫代碼那天起","我就沒有打算寫代碼","沒打算","寫代碼"};
  for (int i = 0; i < 5; i++) {
   TextView textView = new TextView(this);
   textView.setText(string[i]);
   textView.setTextColor(Color.WHITE);
   textView.setBackgroundResource(R.drawable.round_square_blue);
   imageViewGroup.addView(textView, lp);
  }

具體效果

3.）最后附上TagsLayout全部代碼

public class TagsLayout extends ViewGroup {
 private int childHorizontalSpace;
 private int childVerticalSpace;

 public TagsLayout(Context context, AttributeSet attrs) {
  super(context, attrs);
  TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.TagsLayout);
  if (attrArray != null) {
   childHorizontalSpace = attrArray.getDimensionPixelSize(R.styleable.TagsLayout_tagHorizontalSpace, 0);
   childVerticalSpace = attrArray.getDimensionPixelSize(R.styleable.TagsLayout_tagVerticalSpace, 0);
   attrArray.recycle();
  }
 }

 /**
  * 負責(zé)設(shè)置子控件的測量模式和大小 根據(jù)所有子控件設(shè)置自己的寬和高
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  // 獲得它的父容器為它設(shè)置的測量模式和大小
  int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
  int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
  int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
  int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
  // 如果是warp_content情況下，記錄寬和高
  int width = 0;
  int height = 0;
  /**
   * 記錄每一行的寬度，width不斷取最大寬度
   */
  int lineWidth = 0;
  /**
   * 每一行的高度，累加至height
   */
  int lineHeight = 0;

  int count = getChildCount();
  int left = getPaddingLeft();
  int top = getPaddingTop();
  // 遍歷每個子元素
  for (int i = 0; i < count; i++) {
   View child = getChildAt(i);
   if (child.getVisibility() == GONE)
    continue;
   // 測量每一個child的寬和高
   measureChild(child, widthMeasureSpec, heightMeasureSpec);
   // 得到child的lp
   MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
   // 當(dāng)前子空間實際占據(jù)的寬度
   int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin + childHorizontalSpace;
   // 當(dāng)前子空間實際占據(jù)的高度
   int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin + childVerticalSpace;
   /**
    * 如果加入當(dāng)前child，則超出最大寬度，則的到目前最大寬度給width，類加height 然后開啟新行
    */
   if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
    width = Math.max(lineWidth, childWidth);// 取最大的
    lineWidth = childWidth; // 重新開啟新行，開始記錄
    // 疊加當(dāng)前高度，
    height += lineHeight;
    // 開啟記錄下一行的高度
    lineHeight = childHeight;
    child.setTag(new Location(left, top + height, childWidth + left - childHorizontalSpace, height + child.getMeasuredHeight() + top));
   } else {// 否則累加值lineWidth,lineHeight取最大高度
    child.setTag(new Location(lineWidth + left, top + height, lineWidth + childWidth - childHorizontalSpace + left, height + child.getMeasuredHeight() + top));
    lineWidth += childWidth;
    lineHeight = Math.max(lineHeight, childHeight);
   }
  }
  width = Math.max(width, lineWidth) + getPaddingLeft() + getPaddingRight();
  height += lineHeight;
  sizeHeight += getPaddingTop() + getPaddingBottom();
  height += getPaddingTop() + getPaddingBottom();
  setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height);
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int count = getChildCount();
  for (int i = 0; i < count; i++) {
   View child = getChildAt(i);
   if (child.getVisibility() == GONE)
    continue;
   Location location = (Location) child.getTag();
   child.layout(location.left, location.top, location.right, location.bottom);
  }
 }

 /**
  * 記錄子控件的坐標(biāo)
  */
 public class Location {
  public Location(int left, int top, int right, int bottom) {
   this.left = left;
   this.top = top;
   this.right = right;
   this.bottom = bottom;
  }

  public int left;
  public int top;
  public int right;
  public int bottom;

 }
}

總結(jié)：

至此有關(guān)簡單的自定義控件已經(jīng)介紹的差不多了，項目中很復(fù)雜的控件現(xiàn)在涉及的比較少，以后用到之后再做記錄。

您可能感興趣的文章: