swift

这边我们来玩一下简单的排版
不管是哪种APP开发都有许多 Layout 模式
我们这边先用Auto Layout 做讨论
Auto Layout也有很多玩法
目前我们先用垂直水平中心线来排版
iPhone 11 直板 看起来正常

iPhone 11 横版 跑惨了

iPhone 4s 也是不行

首先我们先拿 Hello 小鸡! 做中心点
点选下方Align按钮 并设定
Horizontally In Container : 0
Vertically In Containe : 0
此元件就会在画面正中央

接下来针对小鸡图片进行
水平至中 垂直偏上100
Horizontally In Container : 0
Vertically In Containe : -100

接下来针对小鸡图片进行
水平至中 垂直偏上100
Horizontally In Container : 0
Vertically In Containe : -100

下方小鸡ＢＢ按钮
水平至中 垂直偏下40
Horizontally In Container : 0
Vertically In Containe : 40

上方ＢＢ文字
Horizontally In Container : -80
Vertically In Containe : -180

此时所有元件都依照中心位置相对应放好了
来看一下吧！

1. iPhone 11 直
   
2. iPhone 11 横
   
3. iPhone 4s
   

至於更细部的约束跟调整, 再自己去玩吧

Kotlin

Kotlin 对齐方式其实也很类似
这边预设的 ConstraintLayout 是一种约束排版
也可以想成互相约束参照
主要用相对关系去排版

首先我们在Hello 小鸡！上点选右键
选择
Center=> Horizontally In Parent
Center=> Vertically In Parent
让此元件水平垂直置中

接下来点选小鸡图案
点右键 选择
Center=> Horizontally In Parent
做水平置中
下一步点选 小鸡图案中间下方小点点
并拖曳到Hello 小鸡！ 中间上方小点
设定为 Bottom to textView top
代表约束条件为
小鸡下方 对应到 textView top的位置

接下来点选小鸡 ＢＢ按钮
点右键 选择
Center=> Horizontally In Parent
做水平置中

下一步点选 小鸡 ＢＢ按钮 中间下上方小点点
并拖曳到Hello 小鸡！ 中间下方小点
设定为 Top to textView Bottom
代表约束条件为
小鸡 ＢＢ按钮 Top 对应到 textView Bottom的位置

接下来点选 BB~ 这组 textView
他的位置约束在 垂直位置在小鸡上方
水平位置跟小鸡一样
所以首先 点选 BB~ 下方点点 拖曳到 小鸡上方中间点点
使 BB~ 的 Bottom 对应到 小鸡图片的 Top
接者 BB~ 的 左边点 对应小鸡的左边点

好搂！直的都调整好了
让我们点选翻转 看看状况

阿呀～高度过头了
没关系～因为所有元件互相约束
让我们用滑鼠拉一拉 Hello 小鸡！
放回喜欢的位子

在看看直的画面
不错～完成

小碎嘴时间 ヽ(ﾟ´Д`)ﾉﾟ

排版是一门好深好深的学问啊
刚进入前端领域时
发现前端还有专门研究版面的人员

他们切出来的前端版面之厉害的
只能说佩服佩服 ＿○／|＿

终於来到半山腰了
努力爬～一起看看山顶风景吧