圣诞节即将来临，我购置了一套巴赫的圣诞清唱剧黑胶唱片作为自赠礼物，急切地期盼着能尽快收到。提及此事，不禁心生一试直播的念头，比如让唱片或老式磁带在那儿缓缓转动，发出美妙的旋律。

是啊，2018年转眼间仅剩寥寥数日；最近目睹几位好友严谨地撰写年度回顾，猛然意识到自己竟毫无兴致进行回顾，心中不禁感到羞愧。这一年，既充满戏剧性，又暗藏陷阱与风险，同时，理想之光似乎触手可及；既有丰硕的成果，也有空虚的时光；怎能不进行总结呢？还是看心情而定吧。

漫咖啡也喜气洋洋了起来

现在咱们来谈谈正事。接着探讨组件库的故事，对先前新添的资料进行回顾。在前面的两篇文章里，我们讨论了：

今天咱们来探讨一些有趣的细节操作技巧。这个技巧我个人经常使用，最初是从网上的一些相关讨论中获得的（近两年来，随着该平台的不断更新，这个技巧也在不断进化，最新的链接我已经放在了文章的结尾部分）。

关于浮动居中

众所周知，若将若干元素并排排列成一行，并对其进行打包处理，那么这些元素将根据文本的实际长度变化自动调整其在文本右侧的位置（实际测得元素间的间距不超过20像素时，该机制能够正常工作）sketch app sources，具体效果如图所示：

这种机制极其实用，能够显著增强其操作的便捷性。然而，在实际应用中，我们经常面临不同的需求，比如需要实现“图形位于左侧，文本位于右侧，整体内容自动居中”的布局，比如带有图标和文字的按钮，或者是包含头像和用户名的导航栏等。以“”中的元素为例：

“关注”按钮

用户信息导航栏

针对文本元素位于右侧的布局，传统的浮动策略并不能直接应对文本长度变动时图形元素的自动调整位置。因此，我们需在原有机制上采取一些巧妙的方法，以确保在文本长度发生变化后，整体内容仍能自动维持居中浮动状态。

Hack的核心，在于对工具本身功能的巧妙运用，且完全不需要依赖任何外部插件。

如何实现

step by step

我们以按钮为例进行演示。

构建按钮时需包含背景图形、文字以及图标元素；在此过程中，需先将图标放置于文字的右侧位置。

确保将文本元素的对齐模式（）设置为“Auto”和“”：

将图标与文本进行组合，然后在右侧的面板中对该组合进行整体调整，将旋转的角度设定为180度。

倒过来了哦

然后将图标各自旋转至180度，同时调整文本的旋转角度至相同数值；这样一来，整体外观便达到了我们所期望的效果。

依照既定规范sketch app sources，需对内容模块、文本以及图标样式进行独立配置：

将“内容组（标注图标）”进行打包处理，然后将它水平扩展至与按钮等宽，并参照下方的示意图对显示模式进行调整设置。

6. 将按钮整体打包为 ：

搞定。尝试不同的文本长度看看：

基本上是这样的，期待在实战中为您提供帮助。其应用范围广泛，包括但不限于按钮、标签、用户信息展示、文本框中的占位符等。

参考：

禁止使用该应用程序的特定功能，以确保用户界面中图标标签的创建过程不受干扰。

还没有使用过 “”的朋友不妨稍作了解：

获取方式

for 是付费组件库系列，在 微店提供：

iOS 12：99元

+ iOS 12 超值套装：仅需199元

扫描此小程序码进入微店，即可获取商品信息。系统通常会随机赠送1至88元不等的红包。完成支付后，您将获得下载链接和密码。

如有侵权请联系删除！