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

標籤：

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教程之添加和定製視圖