pic
2020-12-29 07:40
（本文约3400字，预计阅读时间4分钟）
上一篇中我提到过，如果我们仅仅负责建立组件，而不考虑组件内容发生变化后的动态自适应是远远不够的。本篇就开始填这个坑，我会在在前文的基础上讲解如何具体实现组件们的自适应。
本篇相较上一篇来说比较难懂，所以我尽量深入浅出得来进行讲解，同时依旧录制好gif动画（公众号很难找到比动画更适合的表达方法了。。），并且在体积上做了适当压缩避免过长加载影响阅读体验。
什么是动态自适应
sketch的自适应功能是在去年9月的58版本推出的，对应的功能叫做“Smart Layout”，后面统一翻译成智能布局。
不用去琢磨动态自适应这个术语的深层含义，说白了，就是让你制作好的组件尺寸基于一类规则，跟随内容的变化而动态变化。（规则我后面结合案例讲下）
举俩例子。
我基于原子设计搭建了商品标签和对话框这俩组件。但是它们现在是“死”的，一旦内容超出初始范围后就吃瘪了，没办法跟随我给的内容量而动态变化。
但是，只要我给组件预置自适应规则，它们就不仅仅是一具么得灵魂的躯壳，可以根据我给出的内容进行实时动态得适应。
而sketch中能够实现自适应的功能就是接下来要着重讲的智能布局。
关于智能布局
可能很多设计师和我一样，在sketch更到58版本后，发现在创建组件时，组件命名区下方多了这么个玩意儿。
点开后会多出各种方向的布局。当时没怎么注意，直到后面才发现这个新增的功能叫智能布局。
当我们选择“无”下面任意一种方向的布局后，即可赋予组件自适应效果。
水平居中布局，即组件尺寸跟随内容从中间向两边变化。
从左往右布局，即组件尺寸跟随内容从左往右进行变化。
从右往左布局，即组件尺寸跟随内容从右向左变化。用gif图应该更好理解一点。
剩下的三个垂直方向的布局就不赘述了，一个道理。
关于字符层属性
敲黑板了！
这部分非常容易被忽略，但同时也非常非常关键！当时我在做组件库智能布局时就因为这玩意儿躺了无数坑，今天特地拿出来说一说，希望让你少走弯路。
啥是字符层的设置？说白了，就是我们常说的文本框。这个功能位于对齐方式版块下的第一个区域。分别包含了auto-width（自动宽度）、auto-height（自动高度）和fixed-width（固定尺寸）三种属性。
首先，自动宽度就是你的字符层高度（即字符的行高）始终保持一行高度，但是宽度会自动跟随你的文本内容，一行内全部显示。
我们快捷键T直接单击，默认的字符层就是自动宽度。此时字符层只有左右两侧的锚点，支持横向拖动变更为下面要讲的自动高度的属性。
而自动高度，就是你的字符层宽度得到约束，但是高度会自动跟随你的文本内容变化，超出一行后自动折行并全部显示。
在我们横向拖动默认字符层调整宽度后，自动宽度属性会变成自动高度属性。此时字符层的锚点变为了8个，水平横向拖动不会改变它的属性。但是在拖动其他六个锚点来纵向拖动或者斜向拖动后，字符层属性就会变更为自动尺寸。
自动尺寸，就是字符层的宽度和高度都得到约束，它的尺寸是不能跟随文本内容变化的。你可以把它理解成一个仅显示规定文字区域的蒙版，任何超出区域的部分都将被隐藏。这个功能在界面中用得很少，平时的文本尽量避免这种属性。
最后来波动画示例便于理解，注意看这三种属性的字符层对文本呈现的影响。
可能你又要问了，这个东东跟智能布局又有啥关系？
关系可大了！如果说智能布局方向决定了组件尺寸跟随内容变化的方向，那么字符层的属性决定了内容的呈现方式。
比如赋予了智能布局的这个组件，内容的字符层属性是自动宽度。
如果我们将内容的字符层属性变更为自动高度，那么按照自动高度的尿性，超出约束宽度的文本自动折行，就像这样：
所以，字符层属性和智能布局方向其实是紧密关联的。要想让两者正确得契合发挥作用，关键就是：保持智能布局方向和字符层属性的一致。
说开了，就是水平布局方向统一使用自动宽度属性，而垂直布局方向统一使用自动高度属性。（它们如此之重要以至于都变黄了）
至于固定尺寸属性就甭管了，在界面设计中这货就是来卖萌的。
智能布局的规则
很多朋友可能注意到了，组件尺寸跟随内容变化时，有类参数其实是固定好的。
没错，就是文本两端距离容器边界的padding（内间距）。
不论我是什么样的布局，不论我的文本长度有多少，内间距都始终不变。
还记得开头我对自适应的阐述吗？“让你制作好的组件尺寸基于一类规则，跟随内容的变化而动态变化。”
而我所说的这类规则有三个，一个是刚刚说的内间距，一个是字符层属性，另一个就是智能布局方向。
我们只要熟知并定下这三个规则，就基本完成了组件的智能布局。
接下来，又到了开心的实战环节！
手把手实战环节
实战环节，我们来挑战下开头放的那两个智能布局的组件吧！！
目标1：完成一个商品标签的智能布局
假装我们现在在做电商商品卡片的需求，我们的业务方和产品达成一致，想要给商品加入标签功能促进用户决策。而标签内容由运营自己在后台配置，顶死不超过20个字符，一行以内。所以，我们就需要创建一个智能布局的标签组件。
还记得智能布局的仨规则吗？对，内间距、字符层属性和智能布局方向。我们不论什么组件，都是通过确定这三个要点来实现智能布局。
1.确定内间距
这个不用多说，保持左右、上下的间距各自一致即可。
2.确定字符层属性
我们的标签内容限制了字符数并且不超过一行，因此我们直接就用默认的自动宽度属性，让内容在水平方向全部展示。
前两步在创建组件之前就可以做好，当然也可以后期在源组件中修改更新，顺序无需在意。
3.确定智能布局方向
我们让标签在商品卡片中左对齐，因此智能布局方向设定为从左往右布局。
当然，忘了也没关系，后面可以在组件页面中找到源组件（可以看到标题前的组件icon也变更为更易辨识的布局方向的icon），在布局面板中进行修改即可。
确定了这三个之后，智能布局就完成了！瞅一下效果先。
商品卡片中的效果，看着也没啥毛病。目标1达成！
目标2：完成一个对话框的智能布局
一样的三规则套路。
1.确定内间距
内容距左右两端间距为20px，至标题区和操作区的间距为20px。
2.确定字符层属性
我们的对话框和标签不一样，它是可以多行展示的。所以内容就设定为自动高度属性，让内容在固定宽度的区域中折行处理。
3.确定智能布局方向
对话框在界面中通常是单独作为一个模块出现，所以只要是垂直方向就行。我们这里就挑个垂直居中布局。
智能布局完成，瞅瞅效果，相 当 完 美。目标2达成！
最后的小问题
很多情况下我们的内容字数是不一样的，但依旧会有组件尺寸一致的需求。
比如刚刚那个对话框，如果碰到两个按钮字数不统一的客观情况（尤其在一些面向海外用户的产品中会频繁出现），就会这样：
这就得利用到智能布局中的最窄宽度了。
选择我们创建的按钮组件~在右侧布局中的”最窄宽度“中，霸气得写上我们想要的宽度数值！
比如，我想让主次按钮都保持86px宽度，那就填86即可。这样，不论是多少文本，最后的按钮都会保持86px的宽度。（垂直布局中的最低高度同理，这里就不做演示了）
看看效果，相当完美。
真的最后了
以上，就是智能布局的所有讲解。我们通过智能布局，可以实现组件完美的动态自适应。再复习下智能布局过程中涉及的三个规则！！
1.确定内间距；
2.确定字符层属性；
3.确定智能布局方向。
tips：跟着我的2个实战案例做一遍更加利于你的理解和巩固哦。
但是！！
智能布局仅仅是解决了组件自适应的问题。组件中真正的大头——响应式依然是需要考虑在内的，这对于很多产品跨设备的响应式需求极其有必要。没事，我把它放在了终篇，敬请期待
