Xamarin iOS教程之新增和定製檢視

Xamarin iOS使用者介面——檢視

在iPhone或者iPad中，使用者看到的摸到的都是檢視。檢視是使用者介面的重要組成元素。例如，想要讓使用者實現文字輸入時，需要使用輸入文字的檢視；想要讓使用者顯示影像時，需要使用顯示影像的檢視。本章將為開發者詳細講解如何構建檢視。

Xamarin iOS檢視

在應用程式開發中，最常見的檢視如表2-1所示。

表2-1 常用檢視

Xamarin iOS新增和定製檢視

本節將主要講解檢視的兩種新增方式：一種是使用Interface Builder；一種是使用程式碼。同時還會講解如何定製檢視等內容。

Xamarin iOS 使用Interface Builder新增檢視

使用Interface Builder新增檢視是一個相當簡單的工作。以下的示例將為開發者講解該如何使用Interface Builder新增檢視。

【示例2-1】以下將使用Interface Builder新增一個檢視，具體步驟如下：

（1）建立一個Single View Application型別的工程，命名為2-1。

（2）開啟MainStoryboard.storyboard檔案，選擇Xamarin Studio最右邊的工具欄按鈕，開啟工具欄介面（檢視|Pads|工具欄）。從工具欄中拖動View空白檢視物件到主檢視中，如圖2.1所示。

圖2.1 操作步驟

注意：此時就在檢視新增了一個空白的檢視。

（3）儲存檔案（Command+S），單擊“執行”按鈕，此時就會出現iOS模擬器執行結果，如圖2.2所示。

圖2.2 執行效果

由於使用Interface Builder新增的View空白檢視預設的背景顏色為白色，所以在模擬器上是看不出效果的。那麼該如何在模擬器上看到新增的View空白檢視呢？開發者需要回到MainStoryboard.storyboard檔案，選擇主檢視上新增的View空白檢視物件。然後，選擇Xamarin Studio最右邊的屬性按鈕，開啟屬性介面（“檢視”|Pads|“屬性”命令）。將View的Background屬性設定為Scrollview Textured Background color，如圖2.3所示。

圖2.3 操作步聚

注意：當改變Background屬性後，選擇的View檢視物件的顏色也會發現相應的變化。執行效果如圖2.4所示。

圖2.4 執行效果

此時，就可以在iOS模擬器上看到新增的檢視了。我們的這個示例是沒有任何作用的。它只是為開發者演示瞭如何使用Interface Builder來新增一個檢視。

注意：View空白檢視是開發者使用最頻繁的，原因如下：

（1）每一個視覺化的檢視物件都是繼承自UIView類。

（2）提供了自動調整大小的功能。

（3）UIView可以管理內容繪製。

（4）由於它是一個容器，可以接受其他的檢視作為其子檢視。

（5）可以接受本身和其子檢視的觸控事件。

（6）它的很多屬性可以實現動畫。

Xamarin iOS使用程式碼新增檢視

如果開發者想要使用程式碼為主檢視新增檢視，該怎麼辦呢？下面將為開發者解決這一問題。要使用程式碼為主檢視新增檢視需要實現3個步驟。

1.例項化檢視物件

每一個檢視都是一個特定的類。在C#中，經常會說，類是一個抽象的概念，而非具體的事物，所以要將類進行例項化。例項化一個檢視物件的具體語法如下：

檢視類物件名=new 檢視類();

以我們接觸的第一個檢視View為例，它的例項化物件如下：

UIView vv=new UIView();

其中，UIView是空白檢視的類，vv是UIView類例項化出來的一個物件。

2.設定檢視的位置和大小

每一個檢視都是一個區域，所以需要為此區域設定位置和大小。設定位置和大小的屬性為Frame，其語法形式如下：

物件名.Frame=new RectangleF (X ,Y ,Width,Height);

其中，X和Y表示檢視在主檢視中的位置，Width和Height表示檢視的大小。以下為例項化的物件vv設定位置和大小：

vv.Frame = new RectangleF (0, 0, 320, 580);

其中，0和0表示此檢視的主檢視中的位置，320和580表示此檢視的大小。

注意：步驟1和步驟2也可以進行合併。例如，以下的程式碼是將UIView類的例項化物件和設定位置大小進行了合併：

UIView vv = new UIView (new RectangleF (0, 0, 200, 200));

3.將檢視新增到當前的檢視中

最後，也是最為關鍵的一步，就是將例項化的物件新增到主檢視中。這樣才可以進行顯示。此時需要使用到AddSubview()方法，其語法形式如下：

this.View.AddSubview (檢視物件名);

以下將例項化的物件vv新增到當前的主檢視中，程式碼如下：

this.View.AddSubview (vv);

【示例2-2】以下將使用程式碼為主檢視新增一個View空白檢視。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __2ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法（檢視控制器的基本功能就是負責處理與檢視的互動，我們會在後面講解）
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
UIView vv = new UIView (); //例項化物件
vv.Frame = new RectangleF (0, 0, 320, 580); //設定檢視物件的大小和位置
this.View.AddSubview (vv); //將檢視物件新增到當前檢視中
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖2.5所示。

在此執行效果中也是看不到新增的檢視的。這是因為新增的檢視預設是白色的背景，如果想要看到檢視，需要設定它的背景。例如以下的程式碼，將背景顏色設定為了淺灰色：

vv.BackgroundColor = UIColor.LightGray; //將背景設定為淺灰色

執行效果如圖2.6所示。

圖2.5 執行效果圖2.6 執行效果

Xamarin iOS刪除檢視

有檢視的新增，就會有檢視的刪除。如果開發者不需要新增的檢視，就可以使用RemoveFromSuperview()方法刪除，其語法形式如下：

要刪除的檢視物件名. RemoveFromSuperview();

【示例2-3】以下程式碼將在主檢視中新增兩個檢視，然後再使用RemoveFromSuperview()方法刪除其中一個檢視。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __15ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
//例項化並設定檢視物件vv1
UIView vv1 = new UIView ();
vv1.Frame = new RectangleF (0, 20, 320, 250);
vv1.BackgroundColor = UIColor.Cyan;
this.View.AddSubview (vv1);
//例項化並設定檢視物件vv2
UIView vv2 = new UIView ();
vv2.Frame = new RectangleF (0, 300, 320, 250);
vv2.BackgroundColor = UIColor.Orange;
this.View.AddSubview (vv2);
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖2.7所示。

圖2.7 執行效果

如果想要刪除檢視物件vv1的話，需要使用RemoveFromSuperview ()方法，程式碼如下：

vv1.RemoveFromSuperview (); //刪除檢視物件vv1

執行效果如圖2.8所示。

圖2.8 執行效果

Xamarin iOS檢視的位置和大小

當一個檢視使用Interface Builder新增到主檢視後，它的位置和大小可以使用拖動的方式進行設定，也可以使用屬性中的佈局進行設定，如圖2.9所示。

注意：在預設的情況下，座標系統的原點位於左上角，並向底部和右側延伸，如圖2.10所示。

圖2.9 設定位置和大小圖2.10 系統座標

除了使用以上的兩種方式進行改變檢視的位置和大小外，還可以透過程式設計的方式改變。但是需要注意以程式設計的形式也不能改變預設的座標系統原點。

Xamarin iOS重新定位檢視

重新定位檢視就是在裝置進行旋轉後，重新對檢視的大小以及位置進行設定。這樣可以提高使用者體驗度。重新定位檢視需要使用到WillRotate()方法，其語法形式如下：

public virtual void WillRotate (UIInterfaceOrientation toInterfaceOrientation, double duration)

其中，toInterfaceOrientation是介面方向，duration是旋轉的時間。

【示例2-4】以下將實現檢視的重新定位功能，程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __31ViewController : UIViewController
{
UIView vv = new UIView ();
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
vv.Frame = new RectangleF (0, 0, 320, 580); //設定檢視物件的大小和位置
vv.BackgroundColor=UIColor.Brown;
this.View.AddSubview (vv);
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

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

圖2.11 執行效果

在圖2.11中檢視是沒有實現重新定位功能的。再好的程式如果不在裝置旋轉後實現重新定位，都會降低使用者的體驗度，如果想要實現重新定位功能，就需要使用到WillRotate()方法，程式碼如下：

public override void WillRotate (UIInterfaceOrientation toInterfaceOrientation, double duration)
{
UIInterfaceOrientation destOrientation = toInterfaceOrientation;
if (destOrientation == UIInterfaceOrientation.LandscapeLeft|destOrientation==UIInterfaceOrientation.LandscapeRight) {
vv.Frame = new RectangleF (0, 0, 568, 320);
} else {
vv.Frame = new RectangleF (0, 0, 320, 568);
}
}

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

圖2.12 執行效果

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

Xamarin iOS教程之新增和定製檢視

Xamarin iOS教程之新增和定製檢視

Xamarin iOS使用者介面——檢視

Xamarin iOS檢視

Xamarin iOS新增和定製檢視

Xamarin iOS 使用Interface Builder新增檢視

Xamarin iOS使用程式碼新增檢視

Xamarin iOS刪除檢視

Xamarin iOS檢視的位置和大小

Xamarin iOS重新定位檢視

相關文章