个人中心

登录 | 注册

咨询/预约我的订单我的网课我的问答我的评价我的权益浏览记录我的收藏
机构中心

教培机构
教培机构入驻教育宝平台、搭建私域流量运营系统或购买百度知了好学

查看详情登录后台

网课机构
录播课程和知识付费机构入驻教育宝网课平台

查看详情登录后台

基础教育学校
公立私立幼儿园、中小学、职业学校入驻教育宝学校库

查看详情登录后台

课外活动机构
研学、周末活动、冬夏令营机构入驻研学活动子平台

查看详情登录后台

老师/大咖
各细分领域的资深老师、教练和从业者入驻教育宝大咖平台

查看详情申请合作
平台客服
- 400-601-2788

郑州新像素教育

专注于UI设计培训

郑州新像素教育老师直接接听

400-029-09** 转 34077

查看完整号码

扫码拨号

微信扫码拨号

移动端行高统一，解决80%设计稿还原度问题

作者：新像素UI教育来源：新像素UI教育 2023/2/15 9:33:32

先看视频，再看笔记。↓↓↓ 嗨，新像素的同学们，好久不见，一...

先看视频，再看笔记。↓↓↓ 嗨，新像素的同学们，好久不见，一个新年大家是不是都吃胖了？最近大家经常问到的问题就是在做移动端设计的时候，大多数情况下都会遇到一稿适配两端。通常情况下，安卓端的还原度是非常差的。其实iOS的还原度也会差一些，不过差别不是很大，如果不细挑问题，对于上线是没有什么影响的，但是安卓端不做修改是没办法上线的，所以今天我就来跟大家说一下，为什么适配的时候会出现这种问题以及解决方法。

这里我给大家模拟了一下真实场景，比如说上面是我们的设计稿，下方是开发根据我们的设计稿写出来的ios端和Android端的还原度。我们只看一个地方就可以了，“月售2830”距离上下文本的高度都是5和4，很明显，Android端的间隙看着更大一点，出现这个问题的原因就是安卓和ios端对文字的渲染方式不同。

我们来看下这篇文章就能明白了，这个文章是谷歌自己写的，安卓也是谷歌的，但是这篇文章的最终结论就是说目前没有一个特别完善的方案。但是，我今天要给大家分享的这个方案就是很简单实用的一个方法。

现在我们知道了安卓端设计稿还原度差是因为ios和Android对文字的渲染方式不同，正是因为渲染的方式不同，所以出现了文本的行高问题，比如说设计稿中同样10号字体大小的文字，在ios端的行高是14，但是在安卓端的行高却是17，所以，针对这个问题网易云推出了一个字体行高修复的插件。

往下看，还会有一串代码，这里我们就需要用到它这个安卓端的代码来解决ios和安卓字体渲染方式不同的问题，说白了这个代码就是让安卓的字体渲染方式接近ios的，这样的话就可以达到我们的目的，解决一稿适配两端的问题。

解决方案我这里给大家梳理一下，总共分为两步，第一步就是我们把需要的行高统一改为固定值，有了固定值之后，我们才能进一步去约束或者是控制ios和安卓两个端的行高，那这样的话，第一步开发先把字体行高写成我们设计好的固定值，然后再用一段代码让安卓的字体渲染方式跟iOS的很接近，这样的话，第一步修改固定值第二步改代码，就能把行高问题给解决了。但是这个方法有一个前提——我们设计的必须是移动端才可以使用。最后我们再来说一下这个插件，名字叫“字高修复神器”，插件里面有三个选项。第*个选项就是帮我们把Auto写成一个固定的值，但是只适用于单行文本；第二个选项是适用于段落文本的，我们修改成多少倍，插件就会把字间距自动修改成字号的多少倍；第三个选项是把多余的空白间距给删除掉，只保留文字的高度，但是我不太理解这个有什么用。另外这个插件还有一个好处，我们可以直接选中frame，然后点击选项，也可以修改行高，这样就方便多了。