诸葛计划

【原创】QQ个性标签实现

2020-08-30 06:58    作者:诸葛计划

  很像废话吧,不是的。除了字体,我们还能看到文字有竖向排行有横向排列,而且没有规律。

  假设我们只有一个标签文字,可以选择自定义View(当然可以选择自定义ViewGroup),然后随机标签文字的left和top,文字大小从30sp开始,然后在onDraw里面绘制矩形,在矩形里面绘制文字。

  绘制第一个标签文字之后,我们想绘制第二个标签文字,如果我们还在当前的View里面去随机一个Rect,可能会和第一个标签重合,那怎么办?我们想到了裁剪,看下图:

  沿着标签我们可以将View切成Rect①、Rect②、Rect③、Rect④,这个时候我们分别将四块矩形看成新的View去绘制一个标签文字。

  第一个标签绘制完成之后,继续在这个标签的右边重复绘制第一个标签大小的标签,一直到Rect剩余的空间不足以绘制一个当前的大小的标签。

  第一个标签绘制完成之后,继续在这个标签的下边重复绘制第一个标签大小的标签,一直到Rect剩余的空间不足以绘制一个当前的大小的标签。

  Rect高大于宽,标签适合竖向排列,竖向排列考虑起来比较简单,不需要随机一个位置开始竖向,就从Rect的Left开始排列,看起来整齐,看图:

  第一个标签绘制完成之后,继续在标签的右边重复绘制第一个标签大小的标签,一直到Rect右边剩余的空间不足以绘制一个当前的大小的标签,然后将剩下的空间切成Rect①和Rect②,重复以上步骤。

  很清楚的看到,是一个递归函数,一开始就是递归的结束条件。注意里面的切割Rect的方法,pLeft、pTop、pRight、pBottom代表父Rect的边界,cLeft、cTop、cRight、cBottom代表Tag的边界。里面有一个很巧妙的记录进入条件时候的TextSize,目的是让下一次递归还继续进入这个条件下,也就做到了重复绘制相同大小的Tag的目的。

  但是在textWidth = rectWidth这个条件下记录TextSize却容易造成最后一个Tag绘制不出来,导致留白区域大,有一点瑕疵,但是整体目的达到了。

诸葛计划