游戏説明

接下来我们要来制作真正的游戏了

游戏就是猜
左右两只小鸡谁先破蛋
然後落入蓝色还是红色蓝子里
如果猜对了 +200分
猜错了 -50分
并有一个页面可查看纪录

就这麽简单～
让我们透过简单的小游戏
来看看swift与kotlin在制作App上的差异吧

swift - 白色按钮区域

首先来看看白色区域版面怎麽设定
暂时先忽略下方Tab Bar
将注意力放在游戏画面就好
首先我们利用上一张的画面来新增白色区块

1. 拉一个 UIView
   

   属性	对齐	设定
   左	SafeArea	0
   右	SafeArea	0
   下	SafeArea	0
   Height	无	150

2. 在这个 UIView 内加入 UIButton
   
   

   属性(左蓝)	对齐	设定
   Font	无	System 20.0
   TextColor	无	White Color
   Background	无	Link Color
   Width	无	80
   Height	无	40
   Horizontally in Container	无	0
   Vertically in Container	无	0

   此时应该会 水平垂直置中
   但需求上 需要四颗按钮
   所以我们让第一颗按钮对齐位置偏移一下

   属性	对齐	设定
   Horizontally in Container	无	-50
   Vertically in Container	无	-30

3. 接下来依序 加入其他按钮
   

   属性(右蓝)	对齐	设定
   Font	无	System 20.0
   TextColor	无	White Color
   Background	无	Link Color
   Width	无	80
   Height	无	40
   Horizontally in Container	无	50
   Vertically in Container	无	-30

   

   属性(左红)	对齐	设定
   Font	无	System 20.0
   TextColor	无	White Color
   Background	无	System Red Color
   Width	无	80
   Height	无	40
   Horizontally in Container	无	-50
   Vertically in Container	无	30

   

   属性(右红)	对齐	设定
   Font	无	System 20.0
   TextColor	无	White Color
   Background	无	System Red Color
   Width	无	80
   Height	无	40
   Horizontally in Container	无	50
   Vertically in Container	无	30

   这样就完成搂！～～～

kotlin - 白色按钮区域

1. 拉一个 ConstraintLayout
   

   属性	对齐	设定
   Start -> StartOf	Parent	0
   End -> EndOf	Parent	0
   Bottom -> BottomOf Parent	Parent	0
   layout_height	无	150dp
   layout_width	无	0dp

2. 在这个 ConstraintLayout 内加入 Button
   

   属性(左蓝)	对齐	设定
   textSize	无	20sp
   backgroundTint	无	@color/design_default_color_primary
   layout_width	无	80dp
   layout_height	无	50dp
   Start -> StartOf	Parent	0
   End -> EndOf	无	0
   Top -> TopOf	Parent	0
   Bottom -> BottomOf Parent	Parent	0

   此时应该会 水平垂直置中
   但需求上 需要四颗按钮
   所以我们让第一颗按钮对齐位置偏移一下

   属性	对齐	设定
   End -> EndOf	Parent	100dp
   Bottom -> BottomOf Parent	Parent	60dp

   为什麽这样设定？
   原因是目前设定在正中间
   与swift 直接偏移不同
   kotlin这边是给右边挤一个距离
   剩下的位子置中
   所以在swift想往左边偏移50 要输入 -50
   kotlin是 右边给他 100
   位置就会往左边拼50了

3. 接下来依序 加入其他按钮
   

   属性(右蓝)	对齐	设定
   textSize	无	20sp
   backgroundTint	无	@color/design_default_color_primary
   layout_width	无	80dp
   layout_height	无	50dp
   Start -> StartOf	Parent	100dp
   End -> EndOf	Parent	0
   Top -> TopOf	Parent	0
   Bottom -> BottomOf Parent	Parent	60dp

   

   属性(左红)	对齐	设定
   textSize	无	20sp
   backgroundTint	无	@color/design_default_color_error
   layout_width	无	80dp
   layout_height	无	50dp
   Start -> StartOf	Parent	0
   End -> EndOf	Parent	100dp
   Top -> TopOf	Parent	60dp
   Bottom -> BottomOf Parent	Parent	0

   

   属性(右红)	对齐	设定
   textSize	无	20sp
   backgroundTint	无	@color/design_default_color_error
   layout_width	无	80dp
   layout_height	无	50dp
   Start -> StartOf	Parent	100dp
   End -> EndOf	Parent	0
   Top -> TopOf	Parent	60dp
   Bottom -> BottomOf Parent	Parent	0

kotlin - 同场加映

上面的排版是想围绕中心点偏移
第一个区块是水平垂直置中
第二区块是右边捕100dp
然後水平位置就会往旁边偏移
但右边补一百，所以实际上是中心点往左偏移50(因为置中)
思考起来卡卡的～有点不科学
所以介绍一个元件Guideline

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5" />

这样可以产生第三区块的水平垂直置中参考线
然後按钮在围绕这个线做约束排版
瞬间变得简单明了搂～

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

其实啊～程序写法百百种
同一个功能也有千千万万种写法
我们是在玩同一个开发思维或手法

同时撰写 swift 与 kotlin
所以范例中使用的写法 是故意安排得！

故意的～～～～～～ＯＫ？
开发游戏了～GOGO~~~