在工作中遇到一个需求,就是文字竖向排列,要求可以从右到左横向排列,像中国古代的诗词都是这样排列的,当然对于英文是没有这个需求,所有下面分享一个自己写的开源库,支持中文的竖向排列的textvew,可以自定义排列方向,字间距,以及分割符等.项目地址是https://github.com/tenny1225/VerticalTextView
下面是截图
下面说一下主要的流程
1.测量
对于view的测量我们知道重写view中的 onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法就行
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int h = measureHeight(heightMeasureSpec);
//此处修复relativelayout下存在的异常
if (height == -1) {
height = h;
} else {
if (height > h) {
height = h;
}
}
width = measureWidth(widthMeasureSpec);
setMeasuredDimension(width, height);
}
private int measureWidth(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
return (int) measureTextWidth();
}
return result;
}
private int measureHeight(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
result = (int) (getOneWordHeight() * text.length());
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
这里有measureWidth和measureHeight两个自定义方法,主要是为了测试verticaltextview的宽高,如果在布局文件中明确设置宽高,这里我们使用设置的刻度,如果使用了wrap_content,这里我们使用测量的最小值.
2.绘制
调用ondraw方法绘制文字
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//获取一竖行最多绘制文字个数
int oneLineWordCount = getColWordCount();
//获取一个汉字宽高,
float w = getOneWordWidth();
float h = getOneWordHeight();
int colNum = getColNum();
//通过分隔符,获取字符串数组
String[] cutCharArray = cutChars == null ? null : cutChars.split("|");
if (cutCharArray != null) {
//存在分隔符时,绘制时遇到分隔符,不管这一竖行有没有绘制满,都要切换到下一竖行.
String[] textArray = text.split(cutChars);
int stepCol = 0;//stepCol为绘制满或者遇到分割符跳跃的行数
for (int n = 0; n < textArray.length; n++) {
String text = textArray[n];
int currentCol = 0;
for (int i = 0; i < text.length(); i++) {
String str = String.valueOf(text.charAt(i));
//当前行第currentRow个字
int currentRow = i % oneLineWordCount;
if (colNum == 1) {
currentRow = i;
}
if (colNum > 1) {
//当前所在行
currentCol = stepCol + (i / oneLineWordCount);
}
drawText(w, h, currentCol, currentRow, str, canvas);
if (i + 1 == text.length()) {
//一行绘制满,换到下一行
stepCol = currentCol + 1;
}
}
}
} else {
//如果没有分隔符,证明每一竖行填满文字后,在切换下一个竖行继续绘制文字.
int currentCol = 0;
for (int i = 0; i < text.length(); i++) {
String str = String.valueOf(text.charAt(i));
int currentRow = i % oneLineWordCount;
if (colNum == 1) {
currentRow = i;
}
if (colNum > 1) {
currentCol = (i) / oneLineWordCount;
}
drawText(w, h, currentCol, currentRow, str, canvas);
}
}
}
private void drawText(float w, float h, int currentCol, int currentRow, String str, Canvas canvas) {
RectF rectF;
//判断文字是从右向左排列,还是从左向右排列
if (startOrientation == START_LEFT) {
rectF = new RectF(currentCol * w, currentRow * h, currentCol * w + w, currentRow * h + h);
} else {
rectF = new RectF((width - (currentCol + 1) * w), currentRow * h, (width - (currentCol + 1) * w) + w, currentRow * h + h);
}
float baseline = getTextBaseLine(rectF);
paint.setColor(textColor);
paint.setStyle(Paint.Style.FILL);
canvas.drawText(str, rectF.centerX(), baseline, paint);
paint.setColor(lineColor);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(lineWidth);
if (line2TextMargin == -1) {
line2TextMargin = lineWidth * 1f / 2;
}
//判断侧边线是在文字的左边还是右边
if (lineOrientation == RIGHT_LINE) {
Path path = new Path();
path.moveTo(rectF.right - line2TextMargin, rectF.top);
path.lineTo(rectF.right - line2TextMargin, rectF.bottom);
canvas.drawPath(path, paint);
} else if (lineOrientation == LEFT_LINE) {
Path path = new Path();
path.moveTo(rectF.left + line2TextMargin, rectF.top);
path.lineTo(rectF.left + line2TextMargin, rectF.bottom);
canvas.drawPath(path, paint);
}
}
