静电说:Sketch中有不少值得研究的小技巧,可以为设计工作带来不少便利。比如今天就有同学问到,如何能在Sketch中让文本输入框后边的光标跟随字段长度移动呢?看下图。
效果就是这样啦。今天静电研究了一下,在Sketch中完成这样的效果还是很简单的。一起来看!
STEP
01
将文本框,文本字段以及后边的输入提示竖条制作好,排列到合适的位置。如下图。
STEP
02
接下来,确定文本外的浅色外框是否需要跟随字段长度一起扩展。一般情况下,我们会选择固定宽度。
STEP
03
将文本字段设置为左对齐(根据你自己的实际情况来)
STEP
04
选中文本字段,及文本字段后边的输入提示条,点击设置为组件(symbol),在弹出的提示框中,按下图设置。
这个功能可以实现组件之间根据Overrides的宽度或者高度自适应。不管是横向或者是纵向,我们都可以在此设置。
STEP
05
设置好后,我们就可以在组件的Overrides中随意输入文本,文本框字段后方的输入提示条会跟随文本框长度而移动。
STEP
06
如果你希望外侧的文本输入框也随着长度移动,那么可以再次选中刚刚建好的symbol和文本输入框,添加另一个嵌套组件。OK,这个小技巧就讲完了,希望大家能从中得到启发。更灵活的使用Symbols的自适应特性作出更好玩的效果。
静电已经为大家准备好Sketch源文件
公众号回复“源文件”下载研究一下吧
~笔芯~