Android 模仿微信读书左右对齐的文字效果
左右对齐的文字效果,很常见,在大多数文章上都可以看到,这种效果能给人带来一种界面整洁的效果,但是如果只是左对齐的话,页面显示就会参差不齐;而app的页面大多数都是图形+文字的显示效果,左右对齐的文字效果需求还是非常大的;而反观Android的官方控件TextView并没有提供这种左右对齐的显示效果,那么就只能自己来造轮子了;
这里会涉及到实现原理的解析,如果只是需要使用轮子,请拉到最底下;
1. TextView 效果
首先,让我们先来看一下TextView的显示效果:
textView.png
中文情况下还好,但是英文情况下的显示效果就不是很好看了,右边会留了很长的空白,对于追求用户体验的,这样的显示效果肯定是不能满足的;但是TextView内部也没有提供API给我们,那么就只能自己来实现了;
2. 对齐原理
原理:将一行剩余的宽度平分给当前单词的间距,这样来达到左右对齐的效果;
那么我们就有两种实现方案:
(1)TextView绘制一行的计算原理简单粗暴,就是计算这一行显示不下一个单词的时候,就进行回车换行;TextView已经手动给我们计算出了一行能显示多少的字符,那么我们只需要通过计算剩余的宽度再进行绘制即可;
会存在问题:如果一行存在单词较少的情况,就会出现间隔过大的问题;
比如:
效果1.png
(2)通过手动计算一行能显示多少个字符,然后再计算剩余的宽度进行绘制;
这样只是比第一步多了个自己计算一行能显示多少个字符的操作;
但是这样也会存在问题:如果单词存在中英文混合,或者非中文的情况,会很大概率出现换行时单词被截断的问题;
比如:
效果2.png
3. 最终方案
以上两种方案都会存在缺陷,那这样的话我们就得对出现的问题提出解决方案;
当前市场上有成熟的阅读软件,最常用的就是左右对齐的排版效果,来看看当前的阅读软件是怎么解决这些问题的;
先看一下微信读书app的显示效果:
微信读书.png
再看一下掌阅app的显示效果:
掌阅.png
微信读书和掌阅都是对这个过长的单词进行截断处理,然后使用“-”符号将这两个截断的单词连接起来,再进行绘制时就不会出现上述两种方案的问题;
那么最终方案就是:
通过手动计算一行能显示多少个单词,如果一行最后一个单词显示不下,则进行截断处理,中文则不不存在该问题,这里针对非中文的处理;然后再根据剩余空间进行绘制;
那么有了方案之后,接下来看看具体要怎么实现;
4. 最终实现
(1)先遍历当前页面的字符,将中英文截取为一个个单词,具体实现在getWordList(String text)方法里面;通过遍历当前的字符,判断如果为中文时,则为一个单词,非中文时则通过遍历该英文单词进行拼接,最后拼成一个非中文单词;
(2)通过遍历当前的单词,计算每一行要显示的单词集合,具体实现在getLineList(List<String> frontList)这个方法里面;遍历单词时,当添加最后一个单词时,宽度已经超过一行显示的距离,那么就判断最后一个单词是否为中文,是的话则添加到下一行,否则的话则进行截断处理;
(3)通过第二步计算出来的每一行的单词,计算剩余的距离进行绘制;
具体流程.png
5. 优化点
(1)代码里修改了绘制的逻辑后,那么关于TextView的一些基础属性也要进行适配;比如布局的方向,可以使用TextView自带的属性来进行设置;通过android:gravity=""和android:textAlignment=""属性来定义布局的文字方向,是居左还是居右边,这两个属性都可以进行设置,textAlignment属性的优先级比较高,如果同时设置的话,那么则以textAlignment属性为准;
<com.example.testdemo1.XQJustifyTextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"android:textSize="16sp"android:gravity="start"android:textAlignment="textStart"/>
(2)对于实现的英文单词截断的效果,还有优化的地方,经过一些小伙伴的提醒,发现还可以通过音节的进行拆分,再去研究了一波微信读书和掌阅的截断效果,发现确实是使用了音节来进行截断,这样展示效果就更加完美了;
后面研究了一波资料后,发现可以通过元音来进行截断,英语单词的元音有5个,分别是a,e,i,o,u; 那么就可以通过元音加一个辅音的规则来进行截断;比如an,en之类的;这里只实现了一种规则来进行截断,其他的规则过于复杂,暂时没有引入;
看一下优化后的效果:
image
源码实现请移步GitHub查看:
github
要是上一个链接打不开的话,可以点击这个
Android 模仿微信读书左右对齐的文字效果相关推荐
- android让字体左右对齐,Android 模仿微信读书文字左右对齐效果
原标题:Android 模仿微信读书文字左右对齐效果 本文作者 作者:Amter https://www.jianshu.com/p/020786e22a6f 左右对齐的文字效果,很常见,在大多数文章 ...
- android 模仿微信读书,Flutter 模仿微信读书实现案例
前言: 各位同学大家好,有一段时间没有给大家更新博客了,最近使用flutter跨平台写了一个模仿微信读书app demo版本(模仿其中部分经典页面不是全部)觉得有几个点值得分享一下,趁着今天放假,就发 ...
- android手机微信收藏功能实现,Android模仿微信收藏文件的标签处理功能
最近需要用到微信的标签功能(如下图所示).该功能可以添加已有标签,也可以自定义标签.也可以删除已编辑菜单.研究了一番.发现还是挺有意思的,模拟实现相关功能. 该功能使用类似FlowLayout的功能. ...
- android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果",你会看到有很多类似的文章,不过他们有个共同点,就是实 ...
- android 仿微信录音,Android 模仿微信长按录音功能
Android 模仿微信长按录音功能 布局就两个button这里不多介绍了. 下面是activity内的代码 package com.example.forevercloud.myapplicatio ...
- android仿微信 进度条,Android开发之模仿微信打开网页的进度条效果(高仿)
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是 ...
- flutter 微信语言选择_Flutter 模仿微信读书效果!
原标题:Flutter 模仿微信读书效果! 作者:xq9527链接:https://www.jianshu.com/p/ee9d30ba2c42 前言 各位同学大家好,有一段时间没有给大家更新博客了, ...
- android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
- android写代码截屏微信,android 模仿微信头像裁剪
android 在android开发中经常会碰到修改头像的功能需求, 而在修改头像>中最难的部分就是在头像的裁剪功能.虽说网上一大堆裁剪的例子,但最重要的是要理解里面的实现原理,这样以后自己改起 ...
最新文章
- vmware esxi 5.1 开启嵌套虚拟化
- Qt creator5.7 OpenCV249之图片腐化(含源码下载)
- Python学习笔记:字典(dict)
- MySQL(23)--- 正则表达式
- 安全双标准或成拖垮企网防护的新威胁
- 解决Oracle EM 乱码问题
- 西安电子科技大学计算机科学与技术就业,西安电子科技大学:除了计算机和通信工程,这些专业高考也很热门,毕业照样拿高薪...
- 说说大型高并发高负载网站的系统架构
- BZOJ 5106 [CodePlus2017]汀博尔
- 【学习笔记】seckill-秒杀项目--(11)项目总结
- 本篇文章带你秒懂——区块链到底是什么鬼?
- 为什么需要等待2MSL
- 在c语言中 实参与其对应的形参各占独立的存储单元,以下正确的说法是( )。在C语言中: A.实参和与其对应的形参各占用独立的存储单元...
- css实现icon动画效果
- Python怎么安装?教程来咯
- C#编写的Word操作类,有换页,添加表格,文本功能
- 用java编译实现计算个人所得税(工资)
- C语言无符号数赋值为负数时的%d%u输出问题解释
- 个人信息为何到处“裸奔”?
- Ubuntu系统能显示插入U盘但无法显示