脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android ViewGroup实现标签云

Android自定义控件ViewGroup实现标签云（四）

 更新时间：2021年06月23日 15:28:20   作者：总李写代码  
这篇文章主要为大家详细介绍了Android自定义控件ViewGroup实现标签云的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言：

前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解（一） ，Android自定义控件之自定义属性（二） ，Android自定义控件之自定义组合控件（三） ，常言道：“好记性不如烂笔头，光说不练假把式！！！”，作为一名学渣就是因为没有遵循这句名言才沦落于此，所以要谨遵教诲，注重理论与实践相结合，今天通过自定义ViewGroup来实现一下项目中用到的标签云。

需求背景：

公司需要实现一个知识点的标签显示，每个标签的长度未知，如下图所示

基本绘制流程：

绘制原理这里不再介绍大致介绍下绘制流程
 •构造函数获取自定义属性
 •onMeasure()方法，测量子控件的大小
 •onLayout()方法，对子控件进行布局

1.）自定义属性

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

2.）构造函数中获取自定义属性值 

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函数测量子控件大小，然后设置当前控件大小 

 /**
  * 负责设置子控件的测量模式和大小 根据所有子控件设置自己的宽和高
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  // 获得它的父容器为它设置的测量模式和大小
  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();
   // 当前子空间实际占据的宽度
   int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin + childHorizontalSpace;
   // 当前子空间实际占据的高度
   int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin + childVerticalSpace;
   /**
    * 如果加入当前child，则超出最大宽度，则的到目前最大宽度给width，类加height 然后开启新行
    */
   if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
    width = Math.max(lineWidth, childWidth);// 取最大的
    lineWidth = childWidth; // 重新开启新行，开始记录
    // 叠加当前高度，
    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);
 }

通过遍历所有子控件调用measureChild函数获取每个子控件的大小，然后通过宽度叠加判断是否换行，叠加控件的高度，同时记录下当前子控件的坐标，这里记录坐标引用了自己写的一个内部类Location.java 

 /**
  * 记录子控件的坐标
  */
 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函数对所有子控件重新布局 

 @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);
  }
 }

这里直接遍历所有子控件调用子控件的layout函数进行布局。 

如何使用：

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）.代码添加标签

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();
  }
 }

 /**
  * 负责设置子控件的测量模式和大小 根据所有子控件设置自己的宽和高
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  // 获得它的父容器为它设置的测量模式和大小
  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();
   // 当前子空间实际占据的宽度
   int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin + childHorizontalSpace;
   // 当前子空间实际占据的高度
   int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin + childVerticalSpace;
   /**
    * 如果加入当前child，则超出最大宽度，则的到目前最大宽度给width，类加height 然后开启新行
    */
   if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
    width = Math.max(lineWidth, childWidth);// 取最大的
    lineWidth = childWidth; // 重新开启新行，开始记录
    // 叠加当前高度，
    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);
  }
 }

 /**
  * 记录子控件的坐标
  */
 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;

 }
}

总结：

至此有关简单的自定义控件已经介绍的差不多了，项目中很复杂的控件现在涉及的比较少，以后用到之后再做记录。

您可能感兴趣的文章:

相关文章

  • android studio 项目 ：UI设计高精度实现简单计算器

    android studio 项目 ：UI设计高精度实现简单计算器

    这篇文章主要介绍了android studio 项目 ：UI设计高精度实现简单计算器,自主完成一个简单APP的设计工作，综合应用已经学到的Android UI设计技巧,下面来看看实验实现过程
    2021-12-12
  • Android Handle原理(Looper,Handler和Message)三者关系案例详解

    Android Handle原理(Looper,Handler和Message)三者关系案例详解

    这篇文章主要介绍了Android Handle原理(Looper,Handler和Message三者关系案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • 源码解析Android Jetpack组件之ViewModel的使用

    源码解析Android Jetpack组件之ViewModel的使用

    Jetpack 是一个丰富的组件库，它的组件库按类别分为 4 类，分别是架构（Architecture）、界面（UI）、 行为（behavior）和基础（foundation）。本文将从源码和大家讲讲Jetpack组件中ViewModel的使用
    2023-04-04
  • Android Jetpack- Paging的使用详解

    Android Jetpack- Paging的使用详解

    这篇文章主要介绍了Android Jetpack- Paging的使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-11-11
  • Android自定义View绘制贝塞尔曲线的方法

    Android自定义View绘制贝塞尔曲线的方法

    这篇文章主要为大家详细介绍了Android自定义View绘制贝塞尔曲线的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 详解Android如何实现自定义的动画曲线

    详解Android如何实现自定义的动画曲线

    最近在写动画相关的篇章，经常会用到 Curve 这个动画曲线类，那这个类到底怎么实现的？如果想自己来一个自定义的动画曲线该怎么弄？本文将为大家详细解答
    2022-04-04
  • Android接入ffmpeg库及问题解决方法

    Android接入ffmpeg库及问题解决方法

    这篇文章主要介绍了Android接入ffmpeg库的相关知识，文中提到了交叉编译ffmpeg+libx264+libfdk-aac的问题及问题解决方法,需要的朋友可以参考下
    2022-03-03
  • ASM的tree api对匿名线程的hook操作详解

    ASM的tree api对匿名线程的hook操作详解

    这篇文章主要为大家介绍了ASM的tree api对匿名线程的hook操作详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • Android开发中Activity的生命周期及加载模式详解

    Android开发中Activity的生命周期及加载模式详解

    这篇文章主要介绍了Android开发中Activity的生命周期及加载模式详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-05-05
  • Android实现今日头条订阅频道效果

    Android实现今日头条订阅频道效果

    这篇文章主要为大家详细介绍了Android实现今日头条订阅频道效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-01-01

最新评论