あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

Xamarin,Xamarin.iOSでxibをビューに追加する方法

Xamarin.iOSiPhone アプリ開発では、xib 形式で storyboard にて部品を作成し、実行時にビューに xib を追加する方法があります。

いくつか方法がありそうですが、自分がうまくいった方法をご紹介します。

なお、説明は Vitual Studio for Mac ベースですが、通常の Visual Studio でも同じでしょう。

まず、ビューを xib 形式で作成します。

プロジェクトを右クリックして、追加 > 新しいファイル > iOS > ビュー、から「MyView」というビューを作成します。

ビューの作成が済むと、ソリューションエクスプローラーに「MyView.xib」というファイルが作成されます。

この xib ファイルを表示するし、File’s Owner の Class プロパティに「MyView」と入力して Enterキーを押します。すると「MyView.cs」ファイルが作成されます。

f:id:fnyablog:20180908004620p:plain

最初の時点での「MyView.cs」は以下のように NSObject を継承していますが、これを UIView を継承するように変更し、他にも追記します。

using Foundation;
using System;

namespace MyView
{
    public partial class MyView : NSObject
    {
        public MyView (IntPtr handle) : base (handle)
        {
        }
    }
}

上記を以下のように変更します。

using System;
using UIKit;
using Foundation;

namespace MyView
{
    public partial class MyView : UIView
    {
        public MyView (IntPtr handle) : base (handle)
        {
        }

        public static MyView Create()
        {
            var arr = NSBundle.MainBundle.LoadNib("MyView", null, null);
            var v = arr.GetItem<MyView>(0);

            return v;
        }
    }
}

「MyView.xib」を表示して、View の背景色を変更し、ラベルを配置します。

f:id:fnyablog:20180908004808p:plain

sotyboard で、ビューコントローラに View を追加します。

f:id:fnyablog:20180908004840p:plain

View の Class プロパティに「MyView」を設定します。

f:id:fnyablog:20180908004908p:plain

「ViewController.cs」にビューのロードが終わったときに、xib を読み込み追加するよう設定します。

namespace MyView
{
    public partial class ViewController : UIViewController
    {
        private MyView v;

        protected ViewController(IntPtr handle) : base(handle)
        {
        }

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

            v = MyView.Create();
            v.Frame = View.Frame;
            View.AddSubview(v);
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
        }
    }
}

これでデバッグ実行すると、以下のように xib で作成したビューが表示されるのでうまくいきましたね。

f:id:fnyablog:20180908005008p:plain