Xamarin iOS教程之編輯介面編寫程式碼

Xamarin iOS的Interface Builder

Interface Builder被稱為編輯介面。它是一個虛擬的圖形化設計工具，用來為iOS應用程式建立圖形介面。單擊MainStoryboard.storyboard檔案，就可以開啟編輯介面了。在Xamarin Studio 5.2.1後，編輯介面直接使用的是Storyboard故事皮膚，以前則使用的是XIB（對於XIB的使用會在後面的章節中講解）。大學霸它們之間最大的不同在於Storyboard故事皮膚可以對多個主檢視進行設定，而XIB只可以對一個主檢視進行設定。以下是對編輯介面的介紹。

1.介面構成

單擊MainStoryboard.storyboard檔案，開啟編輯介面後，可以看到編輯介面會有4部分組成，如圖1.71所示。

圖1.71 介面構成

其中，編號為1的部分為主檢視的屬性設定，例如可以設定主檢視的尺寸大小、iOS的版本等等。編號為2的部分為畫布，它是用於設計使用者介面的地方，在畫布中用箭頭指向的區域就是設計介面。在畫布中可以有多個設計介面，一般將設計介面稱為場景或者說是主檢視。編號為3的部分為工具欄，在此工具欄中存放了很多的檢視物件。編號為4的部分為屬性設定視窗，在其中可以對檢視物件的屬性進行設定。

注意：在開啟MainStoryboard.storyboard檔案很多的開發者會遇到以下兩個問題：

（1）在開啟MainStoryboard.storyboard檔案後，會看到如圖1.72所示的錯誤。

出現此問題的原因是此時的Xamarin和Xcode不匹配形成的。此錯誤的解決辦法就是將Xamarin進行升級。

（2）在開啟MainStoryboard.storyboard檔案後，會看到如圖1.73所示的錯誤。

圖1.72 錯誤1 圖1.73 錯誤2

此錯誤的解決辦法就是選擇Open in Xcode Interface Builder，將Xcode的編輯介面開啟，然後關掉Xcode，此時就雙擊一次MainStoryboard.storyboard檔案，就可以將此檔案開啟了。

2.設計主檢視

如果想要iOS Simulator上顯示一個標籤，就要對編輯介面進行設定。選擇工具欄中的Label物件，將其拖動到畫布的主檢視中，如圖1.74所示。

圖1.74 操作步驟

在屬性中，對Label標籤物件的字型顏色以及對其方式進行設定，如圖1.75所示。設定後主檢視的效果如圖1.76所示。

圖1.75 設定屬性圖1.76 主檢視的效果

執行效果如圖1.77所示。

圖1.77 執行效果

Xamarin iOS編寫程式碼

除了可以使用Interface Builder對主檢視進行設定外，還可以使用程式碼進行設定。程式碼就是用來實現某一特定的功能，而用計算機語言編寫的命令序列的集合。現在就來實現透過程式碼將標籤中顯示的內容設定為Hello World字串，操作步驟如下：

（1）回到MainStoryboard.storyboard檔案，選擇主檢視上的Label物件，然後在屬性的Identity下將Name設定為mylabel。（Name屬性將相當於為Label物件起了一個別名，開發者可以透過在Name中設定的內容來控制Label標籤，其他的檢視也一樣）。

（2）開啟HelloWorldViewController.cs檔案，編寫程式碼，實現將標籤中顯示的內容設定為Hello World字串。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace HelloWorld
{
public partial class HelloWorldViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
mylabel.Text="Hello World"; //設定標籤中顯示的內容
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖1.78所示。

圖1.78 執行效果

Xamarin iOS設定狀態列

狀態列就是指在iOS中顯示有時間、電池用量的區域。狀態列分為兩部分：第一部分為前景部分（就是指的顯示電池、時間等部分）；第二部分為背景部分（就是顯示黑色或者圖片的背景部分），如圖1.79所示。為了製作一個使用者體驗高的應用程式，對於狀態列的設定是很重要的。本小節將主要講解如何對狀態列進行設定。

圖1.79 狀態列

1.設定狀態列的風格

在iOS中狀態列的風格有4種，如表1-4所示。

表1-4 狀態列風格

要想對狀態列的風格進行設定就需要使用到PreferredStatusBarStyle()方法。

【示例】下面將以工程HelloWorld為基礎，將狀態列的前景部分為白色。具體的操作步驟如下：

（1）開啟MainStoryboard.storyboard檔案，將主檢視的背景顏色即Background設定為Scrollview Textured Background color。

（2）開啟HelloWorldViewController.cs檔案，編寫程式碼，實現狀態列的前景部分變為白色的效果。程式碼如下：

public override UIStatusBarStyle PreferredStatusBarStyle ()
{
return UIStatusBarStyle.LightContent;
}

此時執行程式，會看到如圖1.80所示的效果。

圖1.80 執行效果

2.隱藏狀態列

有時開發者不希望狀態列在自己的應用程式中出現，可以使用PrefersStatusBarHidden()方法將其進行隱藏。

【示例】下面將以工程HelloWorld為基礎，將狀態列隱藏。具體的操作步驟如下：

開啟HelloWorldViewController.cs檔案，編寫程式碼，實現狀態列的隱藏。程式碼如下：

public override bool PrefersStatusBarHidden ()
{
return true;
}

此時執行程式，會看到如圖1.81所示的效果。

圖1.81 執行效果

Xamarin iOS除錯程式

除錯又被稱為排錯，是發現和減少程式錯誤的一個過程。在Xamarin Studio中進行除錯的需要實現以下幾個步驟：

1.新增斷點

在進行程式除錯之前，首先需要為程式新增斷點。斷點是指可以暫停偵錯程式中程式的執行，並可以讓開發者檢視程式的地方。將游標移到到要新增斷點的地方，按住Command+\鍵或者選擇選單欄中的“執行|切換斷點”命令進行斷點的新增，之後會在新增斷點程式碼的最左邊看到一個紅色的小圓圈，並且這一行也被塗成了紅色，如圖1.82所示。

圖1.82 新增斷點圖1.83 執行斷點

2.執行程式

單擊執行按鈕後，程式就會執行。這時執行的程式會停留在斷點所在的位置處，此程式碼最左邊的圓圈中會出現黑色的箭頭，並且程式碼行被塗成了黃色，表示現在程式執行到的位置，如圖1.83所示。不僅如此，iOS Simulator也會顯示介面，但是沒有內容。

3.斷點導航

在程式停留下來後，會出現斷點導航，如圖1.84所示。開發者可以使用此導航來控制程式的執行。

圖1.84 斷點導航

Xamarin iOS檔案簡紹

建立好工程後，會看到一些檔案以及資料夾，以下針對幾個重要並且常用的檔案進行講解。

q Resources資料夾：裡面存放了應用程式所需的資源，如影像、音樂檔案等。

q AppDelegate.cs：主要的應用程式類別（class），並接聽系統事件及相對應的事件處理.

q Entitlements.plist：設定服務是否開啟等內容。

q HelloWorldViewController.cs：負責檢視控制器的生命週期，也就是MVC分層的Controller。

q HelloWorldViewController.designer.cs：包含介面中物件的定義及動作（Action）的宣告。

q Info.plist：應用程式的資訊，如名稱、版本、圖示等等。

q Main.cs：應用程式的進入點。

q MainStoryboard.storyboard：可以用來設定應用程式的圖形介面。

本文選自：Xamarin iOS開發實戰大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

Xamarin iOS教程之編輯介面編寫程式碼