Xamarin iOS教程之檢視顯示影像

Xamarin iOS顯示影像

在主檢視中顯示一個影像，可以讓開發者的應用程式變的更有趣，例如，在一些應用程式開始執行時，都會透過影像來顯示此應用程式的玩法或者規則等。這不僅可以使使用者快速理解此應用程式的相關資訊，也減少了開發者對應用軟體文字的介紹。顯示影像的檢視被稱為影像檢視。以下將主要講解影像檢視的一些功能。

Xamarin iOS為檢視顯示影像

顯示影像需要使用到UIImageView類建立的物件。

【示例2-10】以下就是如何在主檢視中顯示影像的具體步驟：

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

（2）新增一個影像1.jpg到建立的工程中，新增影像的具體步驟如下：

首先，右擊工程中的Resources資料夾，彈出一個下拉選單，如圖2.19所示。

圖2.19 下拉選單圖2.20 “新增檔案”對話方塊

其次，選擇下拉選單中的Add|Add Files…命令，彈出“新增檔案”對話方塊，如圖2.20所示。

接著，選擇需要新增到工程中的影像檔案，選擇Open按鈕，彈出Add File to Folder對話方塊，如圖2.21所示。

圖2.21 Add File to Folder對話方塊

最後，選擇“確定”按鈕，需要新增的影像，就新增到了建立工程的Resources資料夾中。

（3）開啟2-4ViewController.cs檔案，編寫程式碼，實現為主檢視新增影像檢視的功能。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __4ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
UIImageView imageDisplay = new UIImageView (); //例項化影像檢視物件
imageDisplay.Frame = new RectangleF (0, 0, 320, 580); //設定位置和大小
imageDisplay.ContentMode = UIViewContentMode.ScaleAspectFit; //設定影像檢視的模式
imageDisplay.Image = UIImage.FromFile("1.jpg"); //設定影像檢視顯示的影像
this.View.AddSubview (imageDisplay);
}
…… //裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖2.22所示。

圖2.22 執行效果

注意：在此示例中，需要開發者掌握兩個知識點。

1.影像支援的格式

影像檢視顯示的影像需要使用image進行設定。UIImage類是用來代表影像資訊的，影像支援的格式如表2-5所示。

表2-5 影像支援的格式

2.影像在顯示時的模式

為了使影像在顯示的時候可以滿足各種需要，UIView檢視提供了多種顯示模式。選擇屬性按鈕後，在屬性介面中設定View中的Mode。或者是使用程式碼透過ContentMode屬性設定Mode。Mode選項中提供了13種顯示模式，分別為Scale To Fill、Aspect Fit、Aspect Fill、Redraw、Center、Top、Bottom、Left、Right、Top Left、Top Right、Bottom Left、Bottom Right。在這13種顯示模式中，但是最常用的有三種分別為：Scale To Fill、Aspect Fit和Aspect Fill，效果如圖2.23所示。

圖2.23 效果

注意：Scale To Fill會使影像全部顯示出來，但是會導致影像變形。Aspect Fit會保證影像比例不變，而且全部顯示在影像檢視中，這意味著影像檢視會有部分空白。AspectFill也會證影像比例不變，會填充整個影像檢視，但是可能只有部分影像顯示出來，一般不對Mode進行設定，預設為Scale To Fill模式。

Xamarin iOS定製特殊的影像

在主檢視中顯示的影像也不是一成不變的，也可能會將影像變傾斜一些，或者是將影像進行縮放等。以下就介紹兩個常用的功能。

1.旋轉影像

旋轉影像其實就是將影像所在的影像檢視進行旋轉。需要使用到Transform屬性，其語法形式如下：

影像檢視物件. Transform= CGAffineTransform.MakeRotation(float angle);

其中，angle表示旋轉的弧度。

【示例2-11】以下將實現將主檢視顯示的影像旋轉10度。具體步驟如下：

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

（2）新增一個影像1.jpg到建立工程的Resources資料夾中。

（3）開啟2-21ViewController.cs檔案，編寫程式碼，實現將主檢視顯示的影像旋轉10度。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.CoreGraphics; //引入MonoTouch.CoreGraphics名稱空間
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __21ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
UIImageView imageDisplay = new UIImageView (); //例項化影像檢視物件
imageDisplay.Frame = new RectangleF (0, 0, 320, 568); //設定位置和大小
imageDisplay.Image = UIImage.FromFile("1.jpg"); //設定影像檢視顯示的影像
imageDisplay.Transform=CGAffineTransform.MakeRotation((float)(3.14 / 10)); //旋轉影像
this.View.AddSubview (imageDisplay);
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

在此程式中，我們引入了一個新的名稱空間MonoTouch.CoreGraphics，此名稱空間用於圖形繪製，因為CGAffineTransform.MakeRotation是這個名稱空間的物件和方法。執行效果如圖2.24所示。

圖2.24 執行效果

2.縮放影像

縮放影像其實就是將影像所在的影像檢視進行縮放。同樣還需要使用到Transform屬性，其語法形式如下：

影像檢視物件.Transform= CGAffineTransform.MakeScale (float sx,float sy);

其中，sx與sy分別表示將原來的寬度和高度縮放到多少倍。

【示例2-12】以下將實現將主檢視顯示的影像放大2倍。具體步驟如下：

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

（2）新增一個影像1.jpg到建立工程的Resources資料夾中。

（3）開啟2-22ViewController.cs檔案，編寫程式碼，實現將主檢視顯示的影像放大兩倍。程式碼如下：

using System;
using System.Drawing;
using MonoTouch.CoreGraphics;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Application
{
public partial class __22ViewController : UIViewController
{
…… //這裡省略了檢視控制器的構造方法和析構方法
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
UIImageView imageDisplay = new UIImageView (); //例項化影像檢視物件
imageDisplay.Frame = new RectangleF (80, 158, 160, 240); //設定位置和大小
imageDisplay.Image = UIImage.FromFile("1.jpg"); //設定影像檢視顯示的影像
imageDisplay.Transform = CGAffineTransform.MakeScale (2,2); //縮放影像
this.View.AddSubview (imageDisplay);
}
…… //這裡省略了檢視載入和解除安裝前後的一些方法
#endregion
}
}

執行效果如圖2.25所示。

圖2.25 執行效果

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

Xamarin iOS教程之檢視顯示影像