欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义控件ViewGroup实现标签云(四)

程序员文章站 2024-03-05 12:50:24
前言: 前面几篇讲了自定义控件绘制原理android自定义控件基本原理详解(一) ,android自定义控件之自定义属性(二) ,android自定义控件之自定义组合...

前言:

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

需求背景:

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

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

具体效果

 Android自定义控件ViewGroup实现标签云(四)

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;

 }
}

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

上一篇: Java接口与内部类 练习

下一篇: