Skip to Content

Xcode 用 Storyboard 開發程式記錄 (1/4)

這一篇算是自己初學 Xcode + Storyboard 的記錄,想要了解檔案、視窗之間彼此的關係。

Mac 最新推出的是 SwiftUI 框架,但它必須要最新的 macOS 10.15 Catalina 才能執行,而且參考資料不多,所以我還是先學習 Storyboard。

以下記錄是自己查詢及摸索來的,主要目標是讓程式可以執行,並不一定是正確的或最好的,也許解釋上還有錯誤,參考時請小心。

建立專案

開啟一個新的專案。

選擇專案的格式,我是要開發 Mac 上的程式,所以選 macOS 的 App。

填上專案的名稱,這裡我們選擇 Swift 語言,Storyboard 介面。

選擇儲存專案的位置,正式專案別忘了勾選底下的建立 Git 專案。

儲存後,可以看到專案內容。

專案內容

左邊是檔案列表。

中間有一堆設定,畫面中的 Main Interface 為 Main,表示一開始啟動的是 Main.storyboard。

開啟 info.plist,也可以看到預設啟動的是 Main.storyboard。

點選左邊的 Main.storyboard,可以看到中間有一個 View Controller,左邊還有一個箭頭指向它,表示它是 Main.storyboard 預設啟用的 Controller。

點選中間紅色箭頭處的藍方塊,可以在右邊看到一個打勾的 Is Initial Controller,正表示這個是預設的 View Controller。

View Controller 底下有一個預設的 View,綠色箭頭所指向的連結,大概是表示預設會載入這個 View 的畫面。

點選紅色的箭頭,可以看到右上方的 Class 寫著 ViewController,表示這個畫面是和 ViewController.swift 有關聯。

ViewController.swift 也就是下圖紅框那個檔案。

APP 位置

在左邊紅框處表下滑鼠右鍵,在彈出的功能表中點下綠框的 Show in Finder,就可以看到 Finder 中出現橙色框的可供執行的 APP。

在右邊也可以看到 APP 的位置,就是紅框所示。而按下綠框的箭頭,也可以開啟 Finder,呈現 APP 的位置。

 

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 HTML 標籤:<a> <address> <b> <blockquote> <br> <caption> <center> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ins> <li> <ol> <p> <pre> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <th> <tr> <u> <ul>
    Allowed Style properties: background, background-attachment, background-color, background-image, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, caption-side, clip, color, direction, empty-cells, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, overflow, padding, padding-bottom, padding-left, padding-right, padding-top, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, white-space, width, word-spacing, z-index

更多關於格式選項的資訊

CAPTCHA
驗證碼只有阿拉伯數字, 這是躲廣告用的, 麻煩你輸入了.
Image CAPTCHA
Enter the characters shown in the image.


story | about seo