[Day22] swift & kotlin 游戏篇！(4) 小鸡BB-游戏制作-游戏画面排版

游戏示意

游戏 小鸡ＢＢ
游戏 小鸡ＢＢ

swift - 游戏页面排版

  1. 首先把资源区内的
    swift/egg.png
    swift/eggshell.png
    swift/hat_blue.png
    swift/hat_red.png
    全部拉入 Assets.xcassets内
    游戏 小鸡ＢＢ

  2. 把之前做好的下方白色区块
    重新设定一个Label属性 叫 gameFooter
    游戏 小鸡ＢＢ

  3. 依照表格建立元件与设定AutoLayout
    游戏 小鸡ＢＢ
    排出这样的画面
    全部都建置在 gameWapper 里面

    1. gameWapper(View)
      属性 对齐 设定
      Label 无 gameWapper
      background 无 Clear Color
      左 Safe Area 0
      右 Safe Area 0
      上 Safe Area 50
      下 gameFooter 0
    2. lineWapper(View)
      属性 对齐 设定
      Label 无 lineWapper
      background 无 Clear Color
      左 gameWapper 0
      右 gameWapper 0
      上 gameWapper 0
      下 gameWapper 0
    3. eggWapperRight(View)
      属性 对齐 设定
      Label 无 eggWapperRight
      background 无 Clear Color
      Width 无 110
      Height 无 130
      Horizontally in Container 无 100
      上 Safe Area 30
      1. egg(ImageView)
        属性 对齐 设定
        Label 无 egg
        image 无 egg
        Width 无 108
        Height 无 128
        Horizontally in Container eggWapperRight 0
        Vertically in Container eggWapperRight 0
      2. Eggshell right(ImageView)
        属性 对齐 设定
        Label 无 Eggshell right
        image 无 eggshell
        Width 无 164
        Height 无 68
        Horizontally in Container eggWapperRight 0
        Vertically in Container eggWapperRight -20
    4. eggWapperLeft(View)
      属性 对齐 设定
      Label 无 eggWapperLeft
      background 无 Clear Color
      Width 无 110
      Height 无 130
      Horizontally in Container 无 -100
      上 Safe Area 30
      1. egg(ImageView)
        属性 对齐 设定
        Label 无 egg
        image 无 egg
        Width 无 108
        Height 无 128
        Horizontally in Container eggWapperRight 0
        Vertically in Container eggWapperRight 0
      2. Eggshell right(ImageView)
        属性 对齐 设定
        Label 无 Eggshell left
        image 无 eggshell
        Width 无 164
        Height 无 68
        Horizontally in Container eggWapperLeft 0
        Vertically in Container eggWapperLeft -20
    5. Hat blue(ImageView)
      属性 对齐 设定
      Label 无 Hat blue
      image 无 hat_blue
      Width 无 90
      Height 无 29
      Horizontally in Container 无 -100
      下 gameWapper.Bottom 20
    6. Hat red(ImageView)
      属性 对齐 设定
      Label 无 Hat red
      image 无 hat_red
      Width 无 90
      Height 无 29
      Horizontally in Container 无 100
      下 gameWapper.Bottom 20
    7. Cloud(ImageView)
      属性 对齐 设定
      Label 无 Cloud
      image 无 cloud.fill
      Height 无 313
      左 gameWapper 0
      右 gameWapper 0
      下 gameWapper.Bottom 40

版面排完搂～
游戏 小鸡ＢＢ
这样游戏所需版面就排完了
中间游戏用AutoLayout排完後
各尺寸的手机都可以正常显示了

kotlin - 游戏页面排版

  1. 首先把资源区内的
    kotlin/egg.png
    kotlin/eggshell.png
    kotlin/hat_blue.png
    kotlin/hat_red.png
    kotlin/cloud.png
    全部拉入 drawable 内
    游戏 小鸡ＢＢ

  2. 把之前做好的下方白色区块
    重新设定一个id属性 叫 gameFooter
    然後依照表格建立元件与设定AutoLayout
    游戏 小鸡ＢＢ
    排出这样的画面
    除了gameWapper本人外
    其他都包进去 gameWapper 内

    1. gameWapper(ConstraintLayout)

      属性 对齐 设定
      id 无 gameWapper
      layout_width 无 0dp
      layout_height 无 0dp
      Start -> StartOf parent 0dp
      End -> EndOf parent 0dp
      Top -> TopOf parent 30dp
      Bottom -> BottomOf gameFooter gameFooter 0dp

    2. lineWapper(ConstraintLayout)

      属性 对齐 设定
      id 无 lineWapper
      layout_width 无 0dp
      layout_height 无 0dp
      Start -> StartOf parent 0dp
      End -> EndOf parent 0dp
      Top -> TopOf parent 0dp
      Bottom -> BottomOf parent parent 0dp

    3. eggWapperRight(ConstraintLayout)

      属性 对齐 设定
      id 无 eggWapperRight
      layout_width 无 80dp
      layout_height 无 100dp
      Start -> StartOf parent 200dp
      End -> EndOf parent 0dp
      Top -> TopOf parent 20dp
      1. egg_right(ImageView)
        属性 对齐 设定
        id 无 egg_right
        srcCompat 无 @drawable/egg
        layout_width 无 wrap_content
        layout_height 无 wrap_content
        Start -> StartOf parent 0dp
        End -> EndOf parent 0dp
        Top -> TopOf parent 0dp
        Bottom -> BottomOf parent parent 0dp
      2. eggshell_right(ImageView)
        属性 对齐 设定
        id 无 eggshell_right
        srcCompat 无 @drawable/eggshell
        layout_width 无 wrap_content
        layout_height 无 49dp
        Start -> StartOf parent 0dp
        End -> EndOf parent 0dp
        Top -> TopOf parent 10dp

    4. eggWapperLeft(ConstraintLayout)

      属性 对齐 设定
      id 无 eggWapperLeft
      layout_width 无 80dp
      layout_height 无 100dp
      Start -> StartOf parent 0dp
      End -> EndOf parent 200dp
      Top -> TopOf parent 30dp
      1. egg_left(ImageView)
        属性 对齐 设定
        id 无 egg_left
        srcCompat 无 @drawable/egg
        layout_width 无 wrap_content
        layout_height 无 wrap_content
        Start -> StartOf parent 0dp
        End -> EndOf parent 0dp
        Top -> TopOf parent 0dp
        Bottom -> BottomOf parent parent 0dp
      2. eggshell_left(ImageView)
        属性 对齐 设定
        id 无 eggshell_left
        srcCompat 无 @drawable/eggshell
        layout_width 无 wrap_content
        layout_height 无 49dp
        Start -> StartOf parent 0dp
        End -> EndOf parent 0dp
        Top -> TopOf parent 10dp

    5. hat_blue(ImageView)

      属性 对齐 设定
      id 无 hat_blue
      srcCompat 无 @drawable/hat_blue
      layout_width 无 80dp
      layout_height 无 30dp
      Start -> StartOf parent 0dp
      End -> EndOf parent 200dp
      Bottom -> BottomOf parent parent 20dp

    6. Hat red(ImageView)

      属性 对齐 设定
      id 无 hat_blue
      srcCompat 无 @drawable/hat_blue
      layout_width 无 80dp
      layout_height 无 30dp
      Start -> StartOf parent 200dp
      End -> EndOf parent 0dp
      Bottom -> BottomOf parent parent 20dp

    7. Cloud(ImageView)

      属性 对齐 设定
      id 无 cloud
      srcCompat 无 @drawable/cloud
      layout_width 无 300dp
      layout_height 无 250dp
      Start -> StartOf parent 0dp
      End -> EndOf parent 0dp
      Bottom -> BottomOf parent parent 40dp

版面排完搂～
Android没有云朵的系统图
所以改用自己画的图 cloud 代替

游戏 小鸡ＢＢ

这样游戏所需版面就排完了
可以试着换看看手机尺寸
都可以正常显示搂！

kotlin - 讨厌的警告

写到这里 画面上开始多满讨厌的警告
游戏 小鸡ＢＢ
其实他们不影响程序正常执行
但未来可能隐藏各种雷
所以我们来消灭他们吧
点选黄色三角形
查看错误讯息并修正

文题 处理
ratio相关警告 可忽略,如果有fix可以自动协助修正, 实务上可对设计提出建议
contentDescription相关警告 添加可以考虑添加contentDescription说明, 方便萤幕阅读器使用
hardcoded string 如果你有输入文字，会建议你把它做成列举, 点选FIX编辑器会引导你执行

我们暂时会遇到的大概就以上三种警告
依照提示一一处理
游戏 小鸡ＢＢ
舒服多了～

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

满满的警告讯息～～

刚入程序设计师这行时
常常听到一句话是这样的

工程师看到警告讯息 会很自然的忽视(。_。)
看到错误讯息 会很自然的贴到Google去找答案 ( ・◇・)？

想想也没错啊！！
能把功能写出来就很爽了
哪管的了警告讯息

错误讯息又看不懂在写什麽～ ಠ▃ಠ
当然去爬文啊～～～

但如果有时间～
真的推荐去修警告拉～

三不五时就遇到现在是警告 升个版本
就挂掉变错误讯息了 ⸍⚙̥ꇴ⚙̥⸌

至於错误讯息～只能说练习搂
其实认真看 会发现错误讯息都可以找到答案了喔～～～ ♫.(◕∠◕).♫


<<:  Day30 ( 游戏设计 ) 贪吃蛇

>>:  Cloud Armor

CNN
杂谈    

[Day 12] Create新增资料

在终端机执行php artisan route:list可以得到 执行create使用GET Met...

【从零开始的 C 语言笔记】番外篇－注解

其实这个篇章放在这里有点小晚了，一直觉得好像单独放成一篇有点哪里不对，本来想说因为不是必要的一个语...

[Day 8] 从零开始的股票预测 - 技术指标与相关系数

一、技术指标(Technical Indicator) 技术指标：投资者用来做技术分析时，会使用到的...

《DAY 29》天气 App 实作（二）

昨天已经把 struct 写好了，今天来呈现资料在手机画面上，在此之前可以先上网搜寻 API 说明文...

Day05【Web】Websocket、Polling 与 SSE

WebSocket HTTP 协议中，只能由 Client 端发出请求 如果要由 Server 端主...