SIN@SAPPOROWORKSの覚書

C#を中心に、夜な夜な試行錯誤したコードの記録です。

Xamarin.iOS イメージビュー

C# iOS Xamarin

【 Xamarin 記事一覧 】

1 表示

f:id:furuya02:20140711033810p:plain:w150:left
イメージビュー（UIImageView）を使用して、画像を表示できます。
画像は、UIImageViewのプロパティImageにUIImageオブジェクトとして設定します。

public override void ViewDidLoad() {
    base.ViewDidLoad();

    var imageView = new UIImageView(new RectangleF(0, 0, 300, 200));//画像サイズと同じ大きさのUIImageViewとする
    imageView.Image = UIImage.FromFile("sample.png");//ファイルからUIImageを作成して、プロパティImageに設定する
    imageView.Center = new PointF(View.Bounds.Width/2,View.Bounds.Height/2);//UIImageViewを画面中に配置する
    Add(imageView);//ビューに追加

}

サンプルで、UIImageのFromFileで指定された"sample.png"は、Resourceの下に置かれています。
f:id:furuya02:20140711033836p:plain:w200:left



イメージビュー(UIImageView)は、コンストラクタでImageをセットすることができます。
また、セットされたImageのサイズを基に、イメージビュー自体のサイズを決定すると下記のようになります。

var imageView = new UIImageView (UIImage.FromBundle("sample.png"));
imageView.Frame = new RectangleF (10,10,imageView.Image.CGImage.Width, imageView.Image.CGImage.Height);


2 サイズ

f:id:furuya02:20140711033900p:plain:w150:left
デフォルトでは、画像サイズよりもUIImageViewのサイズが優先されます。この動作を変更するためには、プロパティContenModeを設定します。
サンプルでは、UIViewContentMode.TopLeftを指定し、画像サイズを維持して左上に配置しています。

var imageView = new UIImageView(new RectangleF(0, 0, 350, 300));//画像サイズよりの大きいUIImageViewとする
imageView.BackgroundColor = UIColor.Blue;//UIImageViewのサイズが分かるように青色にする
imageView.Image = UIImage.FromFile("sample.png");
imageView.Center = new PointF(View.Bounds.Width / 2, View.Bounds.Height / 2);//UIImageViewを画面中に配置する
imageView.ContentMode = UIViewContentMode.TopLeft; //画像サイズを維持して左上に配置

ContenModeには、下記の値が設定可能です。

  • UIViewContentMode.ScaleToFill　UIImageViewの大きさ（デフォルト）
  • UIViewContentMode.ScaleAspectFit　画像の縦横比を維持して、UIImageViewに収まる最大サイズ
  • UIViewContentMode.ScaleAspectFill　画像の縦横比を維持して、UIImageViewに空白が無い最大サイズ
  • UIViewContentMode.Redraw　ScaleAspectFillに加えて、サイズ変更時に再描画する
  • UIViewContentMode.Center　画像サイズを維持して、中央に配置
  • UIViewContentMode.Top　画像サイズを維持して、上に配置　
  • UIViewContentMode.TopLeft　画像サイズを維持して、左上に配置　
  • UIViewContentMode.TopRight　画像サイズを維持して、右上に配置　
  • UIViewContentMode.Bottom　画像サイズを維持して、下に配置　
  • UIViewContentMode.BottomLeft　画像サイズを維持して、左下に配置　
  • UIViewContentMode.BottomRight　画像サイズを維持して、右下に配置　
  • UIViewContentMode.Left　画像サイズを維持して、左に配置　
  • UIViewContentMode.Right　画像サイズを維持して、右に配置　

3 UIImageの初期化

UIImageは、FromFile()の他に、FromBundle()が使用可能です。


FromFile()は、非同期呼出しで、通常こちらが使用されます。これに対し、FromBundle()は、同期呼出しでUIはブロックします。しかし、こちらは画像がキャッシュされるため、何回も同じ画像をロードするなら、こちらの方が適しています。

//var image = UIImage.FromFile("sample.png"); //非同期呼び出し
var image = UIImage.FromBundle("sample.png");

URLから画像をロードするサンプルは下記のようになります。

var data = NSData.FromUrl(new NSUrl("http://xxxxxxxxxxxxxxxxx/sample.jpg"));
var image = UIImage.LoadFromData (data);||<


画像は、「SEの雑記」でおなじみの小澤氏によるものです。
ムッシュ登場！「ノウハウは私蔵しない」―MVP for SQL Server

【 Xamarin 記事一覧 】