全局字体设置 老年模式

Posted 2023-03-11

参考技术A

通过设置字号，同步改变全局的字体。
长文干货，建议点赞收藏。

实现方式有多种：

先看效果图，在设置页面，通过设置字体的类型，然后保存下来，同时刷新binding监听，更改所有显示的textview字体大小。

首先新建字体设置工具类。

下面是字体模型截图，类似方案1中的字体主题，分别对应设置页面的标准字体，大号字体，特大字体，可随意扩展。

接下来就是自定义binding属性，具体设置方法。

自定义binding方法中通过livedata注册了一个监听，所以跟方案3类似，实则是每一个textview都存在一个监听，而 livedata可以绑定生命周期，自动创建跟销毁监听，避免内存泄漏 。

在xml中绑定设置的方法。

当布局创建时，会自动执行binding方法。
binding方法中会根据xml里的字体大小类型执行工具类中的getFontVo方法。
getFontVo方法回去读取缓存在本地的字体类型，等于主题类型，从而读取到具体的模型数据，拿到数据设置更新。
而binding方法中的监听，绑定了当前的生命周期，所以当页面销毁或回收时会自动解除监听。
只要xml中设置了自定义的binding属性，就能同步修改更新，不影响原本的设置，如丝滑般柔顺。

当然，因为是基于binding，所以项目得基于databinding才行。
因为我后面接触过的项目都是databinding，并且也是主流。
如果不是就推荐方案3了，通过自定义view实现，大致流程也差不多。
码字不易，喜欢就赏个赞吧。

因为是binding，所以有时候在无法满足需求的情况下可以额外扩展方法。
比如tablayout，实现一个选中字体放大的效果。

很简单，扩展了两个属性，一个是否选中，一个是增量。
只需要在xml中动态配置一下，然后通过逻辑控制就能同步设置。

只要把工具类封装好了，后续只需要设置binding属性就行。
在需求跟扩展以及刷新效果来说，这个方案是很不错的。

uniapp设置字体大小，老年模式

参考技术A 两种可行性方案

1.设置字体调节页面

可以放大或者缩小目前字号的倍数，通过silder调节，vuex存储
2.写一个scaleFontSize()方法，传入当前字号，获取要调节的倍数，例如当前字号24，通过设置需要调节1.5倍，最后字号就是24*1.5=36号字体

方法可以mixin混入，每个界面都可以调用，这是群里一个大佬@码农系列的想法，灵感来自于i18n多语言切换，亲测可用。写此贴时已征得本人同意。在没有找到解决办法之前，这也不失为一个理想的解决方案，不过比较麻烦的是每一个引用字体的地方都要加上初始化的字体大小，还要考虑到input的placeholder等。

对于一个已经上线并且多达上百个页面的项目来说，这样的工作量实在太大，那么救命的第二个方法来了。

原贴地址

1.安装第三方插件 postcss-px-to-viewport

2.项目根目录创建postcss.config.js，并写入配置：

3.根据页面设置，vuex取出设置大小

4.在每个页面中通过添加page-meta调节， page-meta 配置项参考链接

此种方法navbar和tabbar的字体大小不能改变。

其实uniapp的示例demo APP是可以跟随系统字体大小的变化而变化的，但是我不知道他们是怎么实现的。