---
tags: 新人資訊
GA: G-YWCCFEGXSJ
---
[新人資訊](https://hackmd.io/@newman/portal-info)

# 技術-iOS #2-簡單 UI 和按鈕互動：擲骰子

這次的學習目標就是設計簡單的畫面，放一個按鈕讓兩個骰子轉動產生隨機結果，也是一個實用的「擲骰子機」。課程提供一個專案草稿，其中已經準備好所有會用到的圖案素材，包括 App Icon ，六面骰子，和一個 logo，以下資源取材自 https://github.com/appbrewery/Dicee-iOS13




開始設計畫面，在眾多 UI 元件中目前只用到 Image View 和 Button，底圖、logo、和兩個骰子是 Image View，另一個則為標題是 Roll 的 Button：



接下來要用程式碼來控制 UI 元件，不同於我以往的開發經驗，想在這兒的 UI 元件中尋找 ID 屬性竟然找不到！那在程式中到底如何控制？原來是用「拖拉」的方式！讓程式與 storyboard 同時並存，然後按下 control 鍵將元件往右拉即可建立 UI 和程式碼之間的關聯，背後怎麼運作看來 apple 認為開發者不需深究，還真的有點神奇。兩個骰子依序照此法建立了 Outlet 關聯，而 Button 一樣這樣拉則是建立 Action 關聯。


然後建立一個 array 存放六的骰子影像，因為是常數所以用 let，若是變數則用 var；然後用產生 0~5 的隨機整數的方式模擬擲骰子動作，這樣就完成了。執行狀況如下：

https://youtube.com/shorts/Y8sY_z5hamY

目前開發還在幼稚園階段，要繼續加油了。

By Newman Chen 2022/7/1

參考資料：過程中所採的坑

https://developer.apple.com/forums/thread/704524

https://stackoverflow.com/questions/71618452/failed-to-prepare-device-for-development-with-xcode-13-2-1-and-ios-15-4-devic/71667372#71667372

2022/7/3 後記：

要讓程式適應螢幕的翻轉和不同大小，需要學習一系列 AutoLayout 的技術，原本的幾個 Image View and Button 的大小和位置都設死固定了，螢幕一轉鐵定慘不忍睹的，加入 AutoLayout 設計變成複雜的樹狀結構，基本邏輯就是把元件放置於 View 裏，View 裡面可以包 View，多個同階層的 View 可以設定成 Stack View，對 View 或元件均可以加入若干 alignment or constraint，設定彈性極佳，我覺得很厲害。



By Newmn Chen 2022/7/3