编写一个竖向排列的textview

在工作中遇到一个需求,就是文字竖向排列,要求可以从右到左横向排列,像中国古代的诗词都是这样排列的,当然对于英文是没有这个需求,所有下面分享一个自己写的开源库,支持中文的竖向排列的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);
        }
}

你可能感兴趣的:(编写一个竖向排列的textview)