Xamarin iOS教程之添加和定製視圖

時間 2019-11-05

標籤 xamarin ios 教程添加定製視圖欄目 iOS 简体版

原文原文鏈接

Xamarin iOS教程之添加和定製視圖

Xamarin iOS用戶界面——視圖

在iPhone或者iPad中，用戶看到的摸到的都是視圖。視圖是用戶界面的重要組成元素。例如，想要讓用戶實現文本輸入時，須要使用輸入文本的視圖；想要讓用戶顯示圖像時，須要使用顯示圖像的視圖。本章將爲開發者詳細講解如何構建視圖。編程

Xamarin iOS視圖

在應用程序開發中，最多見的視圖如表2-1所示。ide

表2-1 經常使用視圖工具

Xamarin iOS添加和定製視圖
佈局

本節將主要講解視圖的兩種添加方式：一種是使用Interface Builder；一種是使用代碼。同時還會講解如何定製視圖等內容。動畫

Xamarin iOS 使用Interface Builder添加視圖

使用Interface Builder添加視圖是一個至關簡單的工做。如下的示例將爲開發者講解該如何使用Interface Builder添加視圖。ui

【示例2-1】如下將使用Interface Builder添加一個視圖，具體步驟以下：this

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

（2）打開MainStoryboard.storyboard文件，選擇Xamarin Studio最右邊的工具欄按鈕，打開工具欄界面（查看|Pads|工具欄）。從工具欄中拖動View空白視圖對象到主視圖中，如圖2.1所示。orm

圖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);
}
}