竖排文本控件

迈不过友情╰ 2022-06-11 06:20 281阅读 0赞

## 源码：https://github.com/lybeat/PlumbTextView ##

## PlumbTextView ##

PlumbTextView是一个竖排列的文本控件。你可以很容易使用它定义多种竖排文本风格。

## Feature ##

1.  将文本竖直排列；
2.  可以设置文本的列距和字距；
3.  可以添加一个正则表达式去分割文本。PlumbTextView会在正则表达式所包含的字符处换列，并且其中的字符不会显示在PlumbTextView中；
4.  可以在每一列文本的坐标添加一跟竖线；
5.  可以为文本设置字体风格和第三方字体。

## Screenshot ##

![plumb\_textview.gif][plumb_textview.gif]

## Gradle Dependency ##

compile 'cc.sayaki.widget:plumb-textview:1.0.1'

## Usage ##

你可以很容易的使用PlumbTextView，就像使用TextView那样。只需要在xml或者Java代码中设置你想要的属性效果就行了。

<cc.sayaki.widget.PlumbTextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:paddingBottom="30dp"
          android:paddingTop="30dp"
          sayaki:columnSpacing="20dp"
          sayaki:leftLine="true"
          sayaki:leftLineColor="@color/colorAccent"
          sayaki:leftLinePadding="4dp"
          sayaki:letterSpacing="6dp"
          sayaki:regex="[，。？！]"
          sayaki:text="@string/text"
          sayaki:textColor="@color/colorAccent"
          sayaki:textSize="16sp"
          sayaki:textStyle="bold|italic" />

## Thinking ##

接下来讲讲PlumbTextView的实现思路。  
思路很简单，主要就是在绘制完一个字符之后，将下次绘制的位置垂直向下移动一个字符的高度（包括字符本身的高度和两个字符之间的字距）。只是垂直绘制文字很简单，不过处理换列是一个比较麻烦的地方。

PlumbTextView有两种换列情况：

1.  单列文本超过了PlumbTextView可以显示的内容高度；
2.  提供了正则表达式，PlumbTextView会在正则表达式中所包含的字符处换列。

首先测量PlumbTextView自身的高度

if (heightMode == MeasureSpec.EXACTLY) { 
           height = heightSize;
       } else { 
           if (!TextUtils.isEmpty(regex)) { 
               height = 0;
               String[] texts = text.toString().split(regex);
               for (String s : texts) { 
                   height = Math.max(height, getDesiredHeight(s));
               }
               height += letterSpacing;
           } else { 
               height = getDesiredHeight(text.toString());
           }
           if (height > heightSize) { 
               height = heightSize;
           }
       }

根据换列规则拆分文本

if (!TextUtils.isEmpty(regex)) { 
           String[] texts = text.toString().split(regex);
           for (String s : texts) { 
               getFormatTexts(s);
           }
       } else { 
           getFormatTexts(text.toString());
       }
        
       // 获取拆分后的文本
       private void getFormatTexts(String s) { 
           int contentHeight = height - getPaddingTop() - getPaddingBottom();
           if (getDesiredHeight(s) > contentHeight) { 
               int count = contentHeight / charHeight;
               int i = 0;
               // 有的文本拆分过后可能仍然大于控件可显示的高度，需要再拆分
               for (; i < getDesiredHeight(s) / contentHeight; i++) { 
                   formatTexts.add(s.substring(i * count, (i + 1) * count));
               }
               // 最后一列文本不满一列
               if (getDesiredHeight(s) % contentHeight != 0) { 
                   formatTexts.add(s.substring(i * count, s.length()));
               }
           } else { 
               formatTexts.add(s);
           }
       }

测量PlumbTextView的宽度

if (widthMode == MeasureSpec.EXACTLY) { 
           width = widthSize;
       } else { 
           if (!TextUtils.isEmpty(regex)) { 
               width = columnWidth * formatTexts.size();
           } else { 
               width = columnWidth * (getDesiredHeight(text.toString())
                       / (height - getPaddingTop() - getPaddingBottom()) + 1);
           }
           if (width > widthSize) { 
               width = widthSize;
           }
       }

上述操作均在onMeasure方法中，因此为了避免多次测量造成拆分后的文本重复，在每次拆分之前先清空formatTexts。

现在已经获得了按列拆分好的文本了，要绘制就变得简单了。

@Override
       protected void onDraw(Canvas canvas) { 
           float x = width - getPaddingLeft() - getPaddingRight();
           float y = getPaddingTop();
           for (int i = 0; i < formatTexts.size(); i++) { 
               // 换列
               x = i == 0 ? width - columnWidth + columnSpacing : x - columnWidth;
               // 绘制每一列文本
               for (int j = 0; j < formatTexts.get(i).length(); j++) { 
                   // 向下移动绘制点
                   y = j == 0 ? charHeight - letterSpacing + getPaddingTop() : y + charHeight;
                   canvas.drawText(formatTexts.get(i), j, j + 1, x, y, textPaint);
               }
               if (leftLine) { 
                   // 在每列文本之后绘制竖线
                   canvas.drawLine(x - leftLinePadding, getPaddingTop(),
                           x - leftLinePadding, y + letterSpacing, leftLinePaint);
               }
           }
       }

[plumb_textview.gif]: /images/20220611/6fdc66cf367d4612aba07bababd5017c.png