【我的Android进阶之旅】解决TextView的竖线分隔符和文字不对齐，向下偏移的问题

2023-11-03 08:00
文章标签 文字 进阶 android 问题 偏移 解决 向下 竖线 对齐 之旅 textview 分隔符

本文主要是介绍【我的Android进阶之旅】解决TextView的竖线分隔符和文字不对齐，向下偏移的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、问题描述

今天UI小姐姐找到我，说有个界面的问题中的 竖线分隔符 与文本不对齐，有向下偏移的问题，如下所示：

在这里插入图片描述

可以明显看到，这个竖线分隔符 | 与文本不对齐，有明显向下偏移的问题。

<string name="login_problem_phone_and_password">找回密码&#160;&#160;&#160;|&#160;&#160;&#160;手机号已经不再使用？</string>

我是在半角符的情况下，按 shift键 + |\键 即可输出 **|**明显下沉 ，然后在两边加上空格来实现。

UI小姐姐说要我必须想办法使之对齐。好吧，想办法解决吧！

二、解决问题

2.1 使用 ReplacementSpan 尝试解决

首先我查阅到了下面这篇博客，以为有用。

  • 【Android】TextView中不同大小字体如何上下垂直居中？
    https://blog.csdn.net/u010983881/article/details/53995020

但是实际上，这个问题还是没有解决我这个竖线分隔符 | 与文本不对齐，有明显向下偏移的问题。

这篇文章主要是解决TextView中不同大小字体如何上下垂直居中？ 效果图如下

在这里插入图片描述

虽然问题没解决，但是也看到了几个日常疏忽掉的知识点。

2.1.1 ParcelableSpan接口的实现类

在客户端开发中，我们往往需要对一个TextView的文字的部分内容进行特殊化处理，比如加粗、改变颜色、加链接、下划线等。iOS为我们提供了AttributedString，而Android则提供了SpannableString。

在Android的android.text.style包下为我们提供了各种各样的span，如下所示：
在这里插入图片描述
常用的几个Span的意义如下所示：

  • AbsoluteSizeSpan(int size) —— 设置字体大小，参数是绝对数值，相当于Word中的字体大小

  • RelativeSizeSpan(float proportion) —— 设置字体大小，参数是相对于默认字体大小的倍数，比如默认字体大小是x, 那么设置后的字体大小就是x*proportion，这个用起来比较灵活，proportion>1就是放大(zoom in), proportion<1就是缩小(zoom out)

  • ScaleXSpan(float proportion) —— 缩放字体，与上面的类似，默认为1,设置后就是原来的乘以proportion，大于1时放大(zoon in)，小于时缩小(zoom out)

  • BackgroundColorSpan(int color) —— 背景着色，参数是颜色数值，可以直接使用android.graphics.Color里面定义的常量，或是用Color.rgb(int, int, int)

  • ForegroundColorSpan(int color) —— 前景着色，也就是字的着色，参数与背景着色一致

  • TypefaceSpan(String family) —— 字体，参数是字体的名字比如“sans”, “sans-serif”等

  • StyleSpan(Typeface style) —— 字体风格，比如粗体，斜体，参数是android.graphics.Typeface里面定义的常量，如Typeface.BOLD，Typeface.ITALIC等等。StrikethroughSpan—-如果设置了此风格，会有一条线从中间穿过所有的字，就像被划掉一样

2.1.2 什么是 Paint.FontMetrics

Paint.FontMetrics 源代码如下所示：

 /*** Class that describes the various metrics for a font at a given text size.* Remember, Y values increase going down, so those values will be positive,* and values that measure distances going up will be negative. This class* is returned by getFontMetrics().*/public static class FontMetrics {/*** The maximum distance above the baseline for the tallest glyph in* the font at a given text size.*/public float   top;/*** The recommended distance above the baseline for singled spaced text.*/public float   ascent;/*** The recommended distance below the baseline for singled spaced text.*/public float   descent;/*** The maximum distance below the baseline for the lowest glyph in* the font at a given text size.*/public float   bottom;/*** The recommended additional space to add between lines of text.*/public float   leading;}

该类描述给定文本大小的字体的各种度量。记住，Y值向下增加，所以这些值为正值，测量向上距离的值为负值。此类由GetFontMetrics（）返回。

它表示绘制字体时的度量标准。google的官方api文档对它的字段说明如下：

TypeFields
public float ascentThe recommended distance above the baseline for singled spaced text.
public float bottomThe maximum distance below the baseline for the lowest glyph in the font at a given text size.
public float descentThe recommended distance below the baseline for singled spaced text.
public float leadingThe recommended additional space to add between lines of text.
public float topThe maximum distance above the baseline for the tallest glyph in the font at a given text size.

要点如下：

  • baseline
    基准点
  • ascent
    baseline之上至字符最高处的距离
  • descent
    baseline之下至字符最低处的距离
  • leading
    文档说的很含糊，其实是上一行字符的descent到下一行的ascent之间的距离
  • top
    指的是指的是最高字符到baseline的值，即ascent的最大值
  • bottom
    指的是最下字符到baseline的值，即descent的最大值

为了帮助理解，我特此搜索了不同的示意图。对照示意图，会很容易理解FontMetrics的参数。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.2 替换 竖线分隔符

还尝试了几种其他的方法，都是无效的。最后我想是不是 本身的这个 竖线分隔符 就是有问题的呢？
查阅到下面的这篇文章

  • 用哪个字符作为标题中的分隔竖线
    https://www.jianshu.com/p/f11b5d68b154
    在这里插入图片描述

发现该作者和我的问题一模一样，似乎有明显的下沉，与两边的文字不在同一水平面上。

好吧，我找到了我的问题所在。 原来一开始我是使用的半角字符 | ，所以才会有这个问题。

2.2.1 半角符情况下的竖线分隔符 |

在半角符的情况下，按 shift键 + |\键 即可输出 | ，表现为 a|b。 明显下沉。

在这里插入图片描述

2.2.2 念gǔn也念shù或者yī的汉字 竖线分隔符 丨

.丨，是一个象形文字，是一个多音字，读音主要有shù、gǔn，外文名叫Radical Line，意思是指古姓氏。

读作“竖”（shù），意同“竖”。意思和“火柴棍”差不多，同“竖”。
读作“一”（yī），为姓氏。
读作“衮”（gǔn），意为上下相通，引而上行（从上面开始往下写）读若囟xìn，囟之言进也。
读作“退”（tuì），此时从下往上写，引而下行（从下面开始往上写）读若退，与上条意相反。

在这里插入图片描述
在输入法中 输入 shu 即可展示出来 丨，如下所示
在这里插入图片描述

修改后的效果图

 <string name="login_problem_phone_and_password">找回密码｜手机号已经不再使用？</string>

在这里插入图片描述

2.2.3 全角符情况下的竖线分隔符 ｜

先将输入法切换到全角模式
在这里插入图片描述
然后在全角符模式下 输入　shift键 + |键 即可输出 ｜。

在这里插入图片描述

效果如下

<string name="login_problem_phone_and_password">找回密码｜手机号已经不再使用？</string>

在这里插入图片描述

三、总结

  • 全角模式下输入的竖线分隔符 ｜，两边自带空格效果
<string name="login_problem_phone_and_password">找回密码｜手机号已经不再使用？</string>

半角模式下输入的竖线分隔符 |，两边的空格效果需要加空格

 <string name="login_problem_phone_and_password">找回密码&#160;&#160;&#160;|&#160;&#160;&#160;手机号已经不再使用？</string>

中文的shu汉字实现竖线分隔符 丨，两边自带空格效果

 <string name="login_problem_phone_and_password">找回密码｜手机号已经不再使用？</string>

后面两个都可以解决此问题，可以自己看着选择，我选择的是全角模式下输入的竖线分隔符 ｜。

四、参考链接

  • https://www.jianshu.com/p/918fec73a24d
  • https://blog.csdn.net/u010983881/article/details/53995020
  • https://www.jianshu.com/p/f11b5d68b154

作者：欧阳鹏 欢迎转载，与人分享是进步的源泉！
转载请保留原文地址：https://blog.csdn.net/qq446282412/article/details/90410814
☞ 本人QQ: 3024665621
☞ QQ交流群: 123133153
☞ github.com/ouyangpeng
☞ oypcz@foxmail.com

这篇关于【我的Android进阶之旅】解决TextView的竖线分隔符和文字不对齐，向下偏移的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/336753。

相关文章

IDEA和GIT关于文件中LF和CRLF问题及解决

IDEA和GIT关于文件中LF和CRLF问题及解决

《IDEA和GIT关于文件中LF和CRLF问题及解决》文章总结：因IDEA默认使用CRLF换行符导致Shell脚本在Linux运行报错,需在编辑器和Git中统一为LF,通过调整Git的core.aut... 目录问题描述问题思考解决过程总结问题描述项目软件安装shell脚本上git仓库管理，但拉取后，上l
阅读更多...
解决docker目录内存不足扩容处理方案

解决docker目录内存不足扩容处理方案

《解决docker目录内存不足扩容处理方案》文章介绍了Docker存储目录迁移方法：因系统盘空间不足,需将Docker数据迁移到更大磁盘（如/home/docker）,通过修改daemon.json配... 目录1、查看服务器所有磁盘的使用情况2、查看docker镜像和容器存储目录的空间大小3、停止dock
阅读更多...
idea npm install很慢问题及解决(nodejs)

idea npm install很慢问题及解决(nodejs)

《ideanpminstall很慢问题及解决(nodejs)》npm安装速度慢可通过配置国内镜像源（如淘宝）、清理缓存及切换工具解决,建议设置全局镜像（npmconfigsetregistryht... 目录idea npm install很慢(nodejs)配置国内镜像源清理缓存总结idea npm in
阅读更多...
pycharm跑python项目易出错的问题总结

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》：本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等，有可能出现的问题就是你不报错都安装
阅读更多...
idea突然报错Malformed \uxxxx encoding问题及解决

idea突然报错Malformed \uxxxx encoding问题及解决

《idea突然报错Malformeduxxxxencoding问题及解决》Maven项目在切换Git分支时报错,提示project元素为描述符根元素,解决方法：删除Maven仓库中的resolv... 目www.chinasem.cn录问题解决方式总结问题idea 上的 maven China编程项目突然报错，是
阅读更多...
在Ubuntu上打不开GitHub的完整解决方法

在Ubuntu上打不开GitHub的完整解决方法

《在Ubuntu上打不开GitHub的完整解决方法》当你满心欢喜打开Ubuntu准备推送代码时,突然发现终端里的gitpush卡成狗,浏览器里的GitHub页面直接变成Whoathere!警告页面... 目录一、那些年我们遇到的"红色惊叹号"二、三大症状快速诊断症状1：浏览器直接无法访问症状2：终端操作异常
阅读更多...
mybatis直接执行完整sql及踩坑解决

mybatis直接执行完整sql及踩坑解决

《mybatis直接执行完整sql及踩坑解决》MyBatis可通过select标签执行动态SQL,DQL用ListLinkedHashMap接收结果,DML用int处理,注意防御SQL注入,优先使用#... 目录myBATiFBNZQs直接执行完整sql及踩坑select语句采用count、insert、u
阅读更多...
Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题

Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题

《Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题》在爬虫工程里,“HTTPS”是绕不开的话题,HTTPS为传输加密提供保护,同时也给爬虫带来证书校验、... 目录一、核心问题与优先级检查（先问三件事）二、基础示例：requests 与证书处理三、高并发选型：
阅读更多...
前端导出Excel文件出现乱码或文件损坏问题的解决办法

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,：本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1：直接下载（推荐）方案 2：手动构造
阅读更多...
MyBatis Plus大数据量查询慢原因分析及解决

MyBatis Plus大数据量查询慢原因分析及解决

《MyBatisPlus大数据量查询慢原因分析及解决》大数据量查询慢常因全表扫描、分页不当、索引缺失、内存占用高及ORM开销,优化措施包括分页查询、流式读取、SQL优化、批处理、多数据源、结果集二次... 目录大数据量查询慢的常见原因优化方案高级方案配置调优监控与诊断总结大数据量查询慢的常见原因MyBAT
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2