Android自定义控件入门到精通--Text文本

已于 2023-06-25 15:39:15 修改
阅读量491 收藏 1
点赞数
分类专栏： Android自定义控件入门到精通 文章标签： android
于 2021-06-22 16:09:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jhone_csdn/article/details/118109380
版权

《Android自定义控件入门到精通》文章索引 ☞ https://blog.csdn.net/Jhone_csdn/article/details/118146683

《Android自定义控件入门到精通》所有源码 ☞ https://gitee.com/zengjiangwen/Code

文章目录

Text

drawText(String text, float x, float y, Paint paint)

不知道大家有没有这样的经历，在绘制文字的时候，总是把握不住绘制的精确位置，比如，我想在矩形中，居中绘制"Android"

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(2);
        mPaint.setTextSize(14);
        mPaint.setColor(Color.YELLOW);
        Rect rect = new Rect(10, 10, 120, 60);
        canvas.drawRect(rect, mPaint);
        //获取文字宽度
        float textWidth = mPaint.measureText("Android");
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        //获取文字高度
        float textHeight=fontMetrics.bottom-fontMetrics.top;
        float x= rect.left+(rect.width()-textWidth)/2;
        float y=rect.top+(rect.height()-textHeight)/2;
        canvas.drawText("Android",x,y,mPaint);
    }

我们预测drawText()中的x、y为开始绘制的坐标，即猜测以上代码可以实现文字水平垂直居中，但现实往往会打脸：

在这里插入图片描述

水平是居中了，但这个垂直居中有点让人摸不着头脑啊！

在前几篇中，我们绘制各种图形，都是以左上角为起始点开始绘制，为啥到了文字绘制这，不灵了呢？

还记得小学时候抄过的字母吗？

在这里插入图片描述

本子上每行的四条线，特别是红线是不是记忆尤新？

同样的，Android中Text的绘制也有对应的四条线

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(1);
        mPaint.setColor(Color.YELLOW);
        mPaint.setTextSize(48);//设置文字大小为12像素
        String text = "abcdefghijklmnopqrst";
        float textWidth = mPaint.measureText(text);
        int x = 100, y = 100;
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        float top = fontMetrics.top;
        float ascent = fontMetrics.ascent;
        float descent = fontMetrics.descent;
        float bottom = fontMetrics.bottom;
        mPaint.setColor(Color.YELLOW);
        canvas.drawLine(x, top + y, x + textWidth, top + y, mPaint);
        mPaint.setColor(Color.RED);
        canvas.drawLine(x, ascent + y, x + textWidth, ascent + y, mPaint);
        mPaint.setColor(Color.RED);
        canvas.drawLine(x, y, x + textWidth, y, mPaint);
        mPaint.setColor(Color.WHITE);
        canvas.drawLine(x, descent + y, x + textWidth, descent + y, mPaint);
        mPaint.setColor(Color.GREEN);
        canvas.drawLine(x, bottom + y, x + textWidth, bottom + y, mPaint);
        mPaint.setColor(Color.WHITE);
        canvas.drawText(text, x, y, mPaint);
    }

在这里插入图片描述

可以看到，y的坐标就是作业本上的红线，我们称之为基线（baseLine）

  • fontMetrics.top：基线到top线的距离,为负数
  • fontMetrics.ascent：基线到ascent线的距离，为负数
  • fontMetrics.descent：基线到descent线的距离，为正数
  • fontMetrics.bottom：基线到bottom线的距离，为正数

我们可以明确下以下几个知识点：

  • 文字的字高=descent-ascent
  • 文字的行高=bottom-top
  • 文字的宽度可以通过Paint.measureText(text)计算
  • 文字绘制的起点(x,y)为基点，基点的y坐标称为基线
  • 文字的基线=垂直中线+(字高/2-bottom)

在这里插入图片描述

明白了这些，我们再来居中绘制我们的"Android"

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(1);
        mPaint.setColor(Color.YELLOW);
        Rect rect = new Rect(10, 10, 120, 60);
        canvas.drawRect(rect, mPaint);
        mPaint.setTextSize(12);//设置文字大小为12像素
        String text = "Android";
        float textWidth = mPaint.measureText(text);
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        float top = fontMetrics.top;
        float bottom = fontMetrics.bottom;
        float baseLineX = (rect.right - rect.left - textWidth) / 2 + rect.left;
        float offset = (bottom - top) / 2 - bottom;//文字中间到基线的距离
        float baseLineY = (rect.bottom - rect.top) / 2 + offset + rect.top;
        canvas.drawText(text, baseLineX, baseLineY, mPaint);
    }

在这里插入图片描述
baseY=-(fontMetrics.bottom+fontMetrics.top)/2

Paint.setTextAlign(Paint.Align)

文本的对齐方式

    public enum Align {
        LEFT    (0),//基点左对齐
        CENTER  (1),//基点居中对齐
        RIGHT   (2);//基点又对齐
    }

啥意思呢，我们直接看例子

Align.LEFT

在这里插入图片描述

Align.CENTER

在这里插入图片描述

Align.RIGHT

在这里插入图片描述

drawTextOnPath(String text, Path path, float hOffset,float vOffset, Paint paint)

沿着路劲绘制文本

  • path：一条路径
  • hOffset：水平偏移量
  • vOffset：垂直偏移量
    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(2);
        Path path = new Path();
        path.moveTo(40, 100);
        path.lineTo(600, 100);
        canvas.drawPath(path, mPaint);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setLetterSpacing(0.3f);
        mPaint.setTextSize(20);
        canvas.drawTextOnPath("深圳市腾讯计算机技术有限公司", path, 30, 60, mPaint);
    }

在这里插入图片描述

理解了hOffset和vOffset，我们在来看看这个

mPaint.setColor(Color.RED);//设置画笔颜色
mPaint.setStyle(Paint.Style.STROKE);//设置画笔描边
mPaint.setStrokeWidth(10);//设置线宽
mPaint.setLetterSpacing(0.3f);//设置字间距

Path path=new Path();//新建一个路径
path.addCircle(400,400,100, Path.Direction.CW);//在路径上添加一个圆,CW:顺时针

Matrix matrix=new Matrix();//新建一个Matrix矩阵，用来旋转路径
matrix.setRotate(90,400,400);//路径旋转90度
path.transform(matrix);

canvas.drawPath(path,mPaint);

String text="深圳市腾讯计算机技术有限公司";
mPaint.setStyle(Paint.Style.FILL);
mPaint.setTextSize(20);
canvas.drawTextOnPath(text,path,130,30,mPaint);

在这里插入图片描述

大家有疑惑吧，path.transform(matrix)这个用来干啥的，一个圆形路径，转来转去不是一样吗？那去掉这个代码来看看效果：

在这里插入图片描述

我们再调下hOffset的值，来达到第一个效果：

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(Color.RED);//设置画笔颜色
        mPaint.setStyle(Paint.Style.STROKE);//设置画笔描边
        mPaint.setStrokeWidth(10);//设置线宽
        mPaint.setLetterSpacing(0.3f);//设置字间距

        Path path=new Path();//新建一个路径
        path.addCircle(160,160,100, Path.Direction.CW);//在路径上添加一个圆

//        Matrix matrix=new Matrix();//新建一个Matrix矩阵，用来旋转路径
//        matrix.setRotate(90,160,160);//路径旋转90度
//        path.transform(matrix);
        canvas.drawPath(path,mPaint);

        String text="深圳市腾讯计算机技术有限公司";
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(20);
        canvas.drawTextOnPath(text,path,300,30,mPaint);
    }

在这里插入图片描述

发现了吧，“公司”这两个字重叠了，如果hOffset的值继续调大，可能就是这么个效果

在这里插入图片描述

结论：文字超出路径（圆周长）的范围是会重叠在一起显示！

这时候，我们再来看看hOffset和vOffset两个值在这个例子中是在什么位置：

在这里插入图片描述

  • hOffset指的是0的位置到文字起点的位置（在圆周长400的位置）
  • vOffset指的是文字与圆弧垂直方向的距离
  • hOffset=400，再加上文本的长度，已经超出了圆周长，所以后面的文字重叠了

所以，我们需要旋转路径，改变它的起点。

整个例子的代码

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(Color.RED);//设置画笔颜色
        mPaint.setStyle(Paint.Style.STROKE);//设置画笔描边
        mPaint.setStrokeWidth(10);//设置线宽
        mPaint.setLetterSpacing(0.3f);//设置字间距

        Path path = new Path();//新建一个路径
        path.addCircle(160, 160, 100, Path.Direction.CW);//在路径上添加一个圆

        Matrix matrix=new Matrix();//新建一个Matrix矩阵，用来旋转路径
        matrix.setRotate(90,160,160);//路径旋转90度
        path.transform(matrix);
        canvas.drawPath(path, mPaint);

        String text = "深圳市腾讯计算机技术有限公司";
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(20);
        canvas.drawTextOnPath(text, path, 130, 30, mPaint);

        String text1 = "南山总部";
        Path path1 = new Path();
        path1.addCircle(160, 160, 100, Path.Direction.CCW);
        canvas.drawTextOnPath(text1, path1, 420, -20, mPaint);

        //画五角星
        double arcAngle = (72 * Math.PI) / 180;
        float pointX[] = new float[5], pointY[] = new float[5];
        //以五角星中心点为（0，0），定义五角星右下角一个角点（40，40），通过这个点来计算五角星的其它点坐标
        pointX[0] = 40;
        pointY[0] = 40;
        for (int i = 1; i < 5; i++) {
            pointX[i] = (int) (pointX[i - 1] * Math.cos(arcAngle) - pointY[i - 1] * Math.sin(arcAngle));
            pointY[i] = (int) (pointY[i - 1] * Math.cos(arcAngle) + pointX[i - 1] * Math.sin(arcAngle));
        }

        Path star = new Path();
        star.moveTo(pointX[0], pointY[0]);
        for (int i = 0; i < 5; i += 2) {
            star.lineTo(pointX[i], pointY[i]);
        }
        for (int i = 1; i < 5; i += 2) {
            star.lineTo(pointX[i], pointY[i]);
        }
        //将五角星的中心点移动到我们圆心的位置
        canvas.translate(160, 160);
        canvas.drawPath(star, mPaint);
    }

在这里插入图片描述

drawPosText (char[] text, int index, int count, float[] pos, Paint paint)

drawPosText (String text, float[] pos, Paint paint)

  • char[] text：要绘制的文字数组
  • int index：从第几个文字开始绘制（开始位置的索引）
  • int count：绘制文字的个数，从index开始算
  • float[] pos：给每个文字定位，两个值一组，[x1,y1,x2,y2,x3,y3……]
    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(Color.RED);//设置画笔颜色
        mPaint.setStyle(Paint.Style.FILL);//设置画笔描边
        canvas.drawPosText("安卓天下第一", new float[]{23, 32, 43, 21, 54, 76, 90, 100, 45, 156, 49, 123}, mPaint);
    }

在这里插入图片描述

一鱼浅游
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android设置text按钮,安卓基础控件使用（TextView、Button、ImageView、EditText）
weixin_30127493的博客
05-26 2417
一、文本控件TextView1.布局文件android:text="@string/content"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="@color/green"android:textSize="@dimen/title"android:lines="1...
android中text怎么使用方法,Android 使用TextView的一些技巧
weixin_30225755的博客
05-25 1575
这是我第一次写技术相关的文章，写的不好或者不对的地方，还请各位见谅！TextView 是Android中最基本的一个组件了，主要是为了显示文本内容的，但是在显示文本的过程中，产品总是会提出一些稀奇古怪的效果，what？这不是没事找事嘛，显示一个文本而已 还要搞得这么复杂 丫丫个呸！ 算了 废话不多说，直接敲代码了ps：一些基本的属性这里就不介绍了 直接介绍一些不常用的了 见谅 见谅！1.Text...
Android TextView 使用以及属性(方法)大全
热门推荐
帅次的博客
06-08 3万+
向用户显示文本，并可选择允许他们编辑文本。TextView是一个完整的文本编辑器，但是基类为不允许编辑；其子类EditText允许文本编辑。
Android Text文字详解
Brainbg的博客
06-22 2031
Android Text文字详解1.绘制文字1.1 普通绘写文字1.2 单独指定每个文字的位置1.3 沿路径绘写文字2.字体样式2.1 Paint相关样式2.2 Typeface字体样式参考资料 1.绘制文字 1.1 普通绘写文字 drawText(String text, float x, float y, Paint paint):直接进行文字绘制 drawText(CharSequence...
Android自定义控件——ExpandTextView
顾明伟
01-25 6224
本文介绍一个这样婶儿的TextView，如图： 点击的时候TextView会伸缩，有种Clip的感觉，原理也很简单，就是把两个TextView重叠起来，一个现实固定的行数的文本，另一个现实全部的文本，初始化的时候，容器的高度等于固定文本的高度，完全展开时的高度等于文本显示全的高度，过程用一个动画控制就可以了。下面贴代码： ExpandTextView.java import
Android自定义控件之自定义Text,画出米字格-FenGKun
fengkun123的专栏
11-12 1073
/**  * 带米字的TextView  *   * @author FenGKun  *  */ 创建WordText类
《Android自定义控件入门到实战》源码2018.10
11-23
《Android自定义控件入门到实战》是一本深入讲解Android平台下自定义控件开发的教程，源码2018.10版提供了一套完整的实践案例，帮助开发者从基础到进阶全面掌握自定义控件的制作技巧。这份资料涵盖了从基本的自定义...
Android应用源码之自定义控件入门级demo-IT计算机-毕业设计.zip
04-06
这个"Android应用源码之自定义控件入门级demo"是专为IT计算机专业学生和移动开发App爱好者设计的学习资源，适用于毕业设计和论文研究。通过这个项目，你可以深入理解自定义控件的原理和实现步骤。 首先，我们要了解...
《Android自定义控件入门到实战》源码
08-24
《Android自定义控件入门到实战》源码提供了一套完整的自定义控件学习资源，涵盖了从基础到高级的各种实例，帮助开发者深入理解和实践Android自定义控件的开发。 自定义控件的核心在于扩展Android内置的View或...
Android 文字绘制基础
tmacfrank的博客
06-20 555
调用 Canvas.drawText() 可以在给定的 x、y 坐标使用给定的 Paint 对象绘制出给定的文字。其中 x 就是文字在 x 轴的起始坐标，而 y 则是文字基准线 baseline 的 y 轴坐标。可以从注释中提取出下图信息：需要注意的是，用 decent - accent 求出的是正常文字高度，而 bottom - top 求出的是最大文字高度。
Android Compose Text 文本控件属性详解
金戈鐡馬
04-11 2171
Text 是 Compose 提供的文本显示控件，也是基于 BasicText 而来，下面引用官方文档对 Text 的描述，帮助大家更好理解。​ Compose 提供了基础的BasicText和BasicTextField，它们是用于显示文字以及处理用户输入的主要函数。Compose 还提供了更高级的Text和TextField，它们是遵循 Material Design 准则的可组合项。建议在 Android 平台上使用这些构建块，因为它们的外观和样式非常适合 Android 用户，而且还包括
Android 基础知识4-3.2 EditText（输入框）详解
yyxhzdm的博客
02-26 8107
EditText在开发中也是经常使用的控件，比如，要实现一个登录页面，需要用户输入账号、密码等信息，然后我们或得用户输入的内容，把它交给服务器来判断。因此，这一节我们需要学习如何在布局文件中实现编辑框，然后获得编辑框的内容。EitText是一个非常重要的组件，可以说它是用户和Android应用进行数据传输窗户，有了它就等于有了一扇和Android应用传输的门，通过它用户可以把数据传给Android应用，然后得到我们想要的数据。
【Android】Compose学习之Text
最新发布
Androiddddd的博客
03-30 702
如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
android 如何实现一个自己的TextView
rhtnll的博客
12-11 2401
Android 自绘TextView解决 提前换行 问题，支持 图文混排效果图预览MainActivity.java MTextView.java activity_main.xml
android:text="@string/ ",Android之TextView(文本框)详解
weixin_28954623的博客
06-20 4396
1.基础属性详解：通过下面这个简单的界面，我们来了解几个最基本的属性：布局代码：xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:gravit...
Android View绘制基础
特立独行的博客
08-23 1461
Android View 的绘制流程分为三步：在自定义View的时候一般需要重写父类的onMeasure()、onLayout()、onDraw()三个方法，来完成视图的展示过程。
Android的DrawText详解，Android基础开发与实践
m0_63174618的博客
03-28 1422
（一）调整好心态心态是一个人能否成功的关键，如果不调整好自己的心态，是很难静下心来学习的，尤其是现在这么浮躁的社会，大部分的程序员的现状就是三点一线，感觉很累，一些大龄的程序员更多的会感到焦虑，而且随着年龄的增长，这种焦虑感会越来越强烈，那么唯一的解决办法就是调整好自己的心态，要做到自信、年轻、勤奋。这样的调整，一方面对自己学习有帮助，另一方面让自己应对面试更从容，更顺利。（二）时间挤一挤，制定好计划一旦下定决心要提升自己，那么再忙的情况下也要每天挤一挤时间，切记不可“两天打渔三天晒网”。
android开发中控件大小和字体大小的选择
TonyJiang08的专栏
01-28 5289
1.dp：在控件边距大小的选择中选择dp（density-independent pixel）,这样系统边距就是像素密度无关，在设置边距、内边距或者任何不打算按像素值指定尺寸的情况下，通常都使用dp这种单位。 2.sp：scale-independent pixel, 意为缩放无关像素，它是一种与密度无关的像素，这种像素会受用户偏好设置的影响，通常我们会使用sp来设置屏幕上的字体大小。 3.p
【C语言】控制台窗口图形界面编程（四）：文本输出
C/C++软件工程师、嵌入式软件工程师、物联网研发工程师、C/C++讲师、物联网讲师、嵌入式讲师---欢迎大家一起交流(私信添加博主微信)
05-25 4531
00. 目录 文章目录00. 目录01. FillConsoleOutputAttribute函数02. FillConsoleOutputCharacter函数03. WriteConsoleOutputCharacter函数04. 综合实例 01. FillConsoleOutputAttribute函数 设置指定数量的字符单元格的字符属性，从屏幕缓冲区中的指定坐标开始。 函数声明： 设置指...
Android自定义控件开发大全：从基础到高级
四、Android自定义控件----实现RadioButton单选 RadioButton是Android中的一种基本控件，用于实现单选功能。通过继承RadioButton控件，可以创建一个自定义的RadioButton控件，以满足特定的应用场景。例如，可以添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一鱼浅游

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值