共用方式為


Xamarin.Mac 中的分鏡腳本 – 快速入門

為了快速介紹如何使用分鏡腳本來定義 Xamarin.Mac 應用程式的使用者介面,讓我們開始新的 Xamarin.Mac 專案。 選取 [Mac]>[應用程式][Cocoa 應用程式]>,然後按一下 [下一步] 按鈕:

Adding a new Cocoa App

使用 的 MacStoryboard [應用程式名稱],然後按下一步[ 下一步] 按鈕:

Setting the App Name

使用預設的項目名稱和方案名稱,然後按下 [建立] 按鈕:

The project and solution names

在 方案總管 中,按兩下Main.storyboard檔案以開啟檔案,以在 Xcode 的 Interface Builder 中編輯:

Editing the storyboard in Xcode Interface Builder.

如上所示,預設分鏡腳本會定義應用程式的功能表列及其主視窗,以及其檢視控制器和檢視。 在我們的範例應用程式中,我們將建立一個 UI,該 UI 具有一端的主要內容檢視,第二個端有 Inspector 檢視

若要這樣做,我們必須先移除腳本隨附的默認檢視控制器和檢視,方法是在介面產生器中選取它,然後按 Delete 鍵:

Removing the default view controller

接下來,輸入 split[篩選 ] 區域,選取 [垂直分割檢視控制器],並將其拖曳到 [設計介面]:

Searching for the split view controller

請注意,控制器會自動包含兩個子檢視控制器(及其相關檢視),並連線到分割檢視的左側和右側。 若要將分割檢視系結至父視窗,請按 [控件 ] 鍵,按兩下視窗控制器(視窗控制器框架中的藍色圓圈),然後將一行拖曳至分割檢視控制器。 從彈出視窗中選取 視窗內容

Setting the windows content view

這會使用 Segue 將兩個介面元素系結在一起:

The Segue between the window and the content

我們想要將文字檢視放在分割檢視左側,並在視窗或分割檢視重設大小時自動填滿可用的區域。 將文字檢視拖曳到附加至分割檢視的頂端檢視控制器,然後按兩下 [ 選自動配置條件約束] (設計介面底部的第二個圖示)。

Configuring the constraints

從這裡,我們將按兩下 [條件約束] 快顯頂端周框方塊周圍的四 個 I-Beam 圖示,然後按兩下 底部的 [新增4個條件約束] 按鈕,以新增必要的條件 約束。

如果我們返回 Visual Studio for Mac 並執行專案,請注意,文字檢視會自動重設大小,以填滿分割檢視的左側做為視窗或分割重設大小:

An example of the app running, displaying text in the left pane of the Window.

由於我們將使用分割檢視右側做為偵測器區域,因此我們希望其大小較小,並允許它折疊。 返回 Xcode 並編輯右側的檢視,方法是在 [設計介面] 中選取它,然後按兩下 [大小偵測器]。 從這裡輸入 的250寬度

Setting the width

接下來,選取代表右側的分割項目,設定較高的 保存優先順序 ,然後按兩下 [ 用戶可以折疊 ] 複選框:

Editing the holding priority

如果我們返回 Visual Studio for Mac 並立即執行專案,請注意右側會保持較小的大小,並調整視窗大小:

An example of the app running, displaying text in the larger left pane of the Window.

定義簡報 Segue

我們將配置分割檢視的右側,以做為所選文字屬性的偵測器。 我們會將某些控件拖曳到底部檢視,以配置偵測器的UI。 針對最後一個控件,我們想要顯示一個彈出視窗,讓用戶能夠從四個預設字元樣式中選取。

我們會將按鈕新增至偵測器,並將檢視控制器新增至設計介面。 我們將調整檢視控制器的大小,使其成為我們想要的Popover大小,並將四個按鈕新增至其中。 接下來,我們將 控制 按鍵按兩下 [偵測器檢視] 中的按鈕,然後拖曳至代表快顯的檢視控制器:

Dragging to create a new segue in View Controller.

從快顯功能表中,我們將選取 [Popover]:

Selecting the popover segue type from the View Controller.

最後,我們將選取 [設計介面] 中的 [Segue],並將 [慣用 Edge] 設定[左側]。 然後,我們會將線條從 錨點檢視 拖曳到我們想要附加快顯的按鈕:

Dragging to create a new segue by attaching the Anchor View to the Button.

如果我們返回 Visual Studio for Mac,請執行應用程式,然後按兩下 Inspector 中的 [無 ] 按鈕,就會顯示快顯:

An example of the segue running, displaying the popover.

建立應用程式喜好設定

大部分的標準 macOS 應用程式都提供喜好設定對話方塊,可讓使用者定義數個選項來控制應用程式的各個層面,例如外觀或用戶帳戶。

若要定義標準喜好設定對話框視窗,請先將索引標籤檢視控制器拖曳至設計介面:

Editing the storyboard in Xcode by first dragging the Tab View Controller onto the Design Surface.

同樣地,這會自動隨附附加兩個子檢視控制器。 例如,我們會將標籤新增至每個將置中於其中的檢視:

Setting the constraints

接下來,當用戶選取 [喜好設定... ] 功能表項時,我們想要顯示 [喜好設定] 視窗。 從功能表欄,選取喜好設定功能表項, 單擊控件 按鍵,並將一行拖曳到我們的索引卷標檢視控制器:

Dragging to create a segue

從彈出視窗中,我們將選取 [強制回應] ,將此視窗顯示為強制回應對話框:

Selecting the modal segue type from the Action Segue menu.

如果我們儲存變更,返回 Visual Studio for Mac,執行應用程式並選取 [喜好設定... ] 選單項,則會顯示新的 [喜好設定] 對話框:

An example of the segue running, showing the new Preferences dialog box.

您可能會注意到,這看起來不像標準 macOS 應用程式喜好設定對話框視窗。 若要修正此問題,請在 方案總管 的 Xamarin.Mac 應用程式Resources資料夾中包含兩個圖像檔,並返回 Xcode 的 Interface Builder。

選取索引標籤檢視控制器,並將其樣式切換工具列

Setting the tab bar style

選取每個索引標籤,並為其指定標籤,然後選取其中一個影像來代表它:

Configuring each tab in Xcode

如果我們儲存變更,請返回 Visual Studio for Mac,執行應用程式並選取 [喜好設定... ] 功能表項,對話框現在會顯示為標準 macOS 應用程式:

An example of the running preferences window

如需詳細資訊,請參閱使用 影像功能表Windows對話框 檔。