[Day14] swift & kotlin 实作篇！(5) 基本版面配置

swift

接下来～就让我们还拉一下版面吧

1. 设定背景
   
   首先点选左侧 Main.storyboard
   我们先来设定个底色 点选中间的view
   右侧功能选单 切换到view 就会看到 Background属性
   点选 Custom 填入色码 ＃34C859
   这样APP绿色背景就完成搂

2. 添加元件
   
   点选右上角的＋按钮
   里面有各种元件可以选择

   首先我们先把Image View 拉到画面中
   
   并在右侧image设定之前汇入得小鸡图片

   同上面步骤 再拉入 Label 来显示文字
   并在右边把 Text设定为Hello 小鸡！
   Font 字体大小设定成40 放到一个你喜欢的位子上
   

   同上面步骤 再拉入 Button 按钮
   并在右边把 Text设定为 小鸡ＢＢ
   Font 字体大小设定成30 放到一个你喜欢的位子上
   

   同上面步骤 再拉入 Label 来显示文字
   并在右边把 Text设定为 BB~ 来显示小鸡叫
   Font 字体大小设定成20 放到小鸡左上方
   

   好拉～各种元件都在正确位子上了
   我们执行看看吧
   
   怎麽长那麽歪！？
   
   查看一下後发现～原来是我预览用iPhone11 但模拟器用 IPad touch
   接下来我们先将模拟器换回 iPhone11
   就对搂～ 恭喜你的App版面好搂
   
   暂时先这样～
   关於个装置尺寸与直横版面的设定
   我们等之後Layout排版章节再来说明

Kotlin

接下来～就让我们还拉一下Android版面吧

1. 移除元件
   
   点选activity_main.xml 将画面上预设的TextView移除

2. 设定背景
   
   首先点选中间下方的ConstraintLayout
   此时右方属性栏位的 background 输入 #34C859
   绿色背景就完成搂

3. 添加元件
   
   将 Palette 的 ImageView 拉到画面中
   
   并选择之前汇入的小鸡图片
   并将ImageView放在你喜欢的位置上

   同上面步骤 再拉入 textView 来显示文字
   并在右边把 Text设定为 Hello 小鸡！
   textSize 字体大小设定成40sp
   放到一个你喜欢的位子上
   

   同上面步骤 再拉入 Button 按钮
   并在右边把 Text设定为 小鸡ＢＢ
   textSize 字体大小设定成30 放到一个你喜欢的位子上
   

   同上面步骤 再拉入 textView 来显示文字
   并在右边把 Text设定为 BB~ 来显示小鸡叫
   textSize 字体大小设定成20 放到小鸡左上方
   

   好拉～各种元件都在正确位子上了
   我们执行看看吧
   
   哇赛～跑版跑惨拉～
   会这样的原因在 Android预设排版是 ConstraintLayout
   他是一种约束排版～需要设定相对位置
   目前我们没给他任何位置参照
   所以他完全不知道该怎麽显示

没关系没关系～下一章让我们来看看怎麽排版吧

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

五倍卷开放预约了！！
09:00 一到网页直接白底ＧＧ！？

算了再等等吧～～
大家都用数位绑定还是领纸本呢？

发文完成～我要来去研究研究搂～。