iOS Designer でのカスタムコントロールの使用

[アーティクル]
07/13/2023

警告

iOS Designer は、Visual Studio 2019 バージョン 16.8 および Visual Studio 2019 for Mac バージョン 8.8 で非推奨とされ、Visual Studio 2019 バージョン 16.9 および Visual Studio for Mac バージョン 8.9 から削除されています。 iOS ユーザーインターフェイスを構築する推奨される方法は、Xcode を実行している Mac 上で直接行う方法です。詳細については、「Xcode を使用したユーザーインターフェイスの設計」を参照してください。

必要条件

iOS 用 Xamarin Designerは、Windows 上の Visual Studio for Mac および Visual Studio 2017 以降で使用できます。

このガイドでは、はじめにガイドで説明されている内容を理解していることを前提としています。

チュートリアル

重要

Xamarin.Studio 5.5 以降では、カスタムコントロールを作成する方法は、以前のバージョンとは若干異なります。カスタムコントロールを作成するには、 IComponent インターフェイスが必要か (関連する実装メソッドを使用)、またはクラスにで注釈を付 [DesignTimeVisible(true)]けることができます。後者のメソッドは、次のチュートリアルの例で使用されています。

iOS > App > Single View Application > C# テンプレートから新しいソリューションを作成し、名前を付けてScratchTicket、新しいプロジェクトウィザードを続行します。
という名前 ScratchTicketViewの新しい空のクラスファイルを作成します。

クラスに次のコードを ScratchTicketView 追加します。

using System;
using System.ComponentModel;
using CoreGraphics;
using Foundation;
using UIKit;

namespace ScratchTicket
{
    [Register("ScratchTicketView"), DesignTimeVisible(true)]
    public class ScratchTicketView : UIView
    {
        CGPath path;
        CGPoint initialPoint;
        CGPoint latestPoint;
        bool startNewPath = false;
        UIImage image;

        [Export("Image"), Browsable(true)]
        public UIImage Image
        {
            get { return image; }
            set
            {
                image = value;
                SetNeedsDisplay();
            }
        }

        public ScratchTicketView(IntPtr p)
            : base(p)
        {
            Initialize();
        }

        public ScratchTicketView()
        {
            Initialize();
        }

        void Initialize()
        {
            initialPoint = CGPoint.Empty;
            latestPoint = CGPoint.Empty;
            BackgroundColor = UIColor.Clear;
            Opaque = false;
            path = new CGPath();
            SetNeedsDisplay();
        }

        public override void TouchesBegan(NSSet touches, UIEvent evt)
        {
            base.TouchesBegan(touches, evt);

            var touch = touches.AnyObject as UITouch;

            if (touch != null)
            {
                initialPoint = touch.LocationInView(this);
            }
        }

        public override void TouchesMoved(NSSet touches, UIEvent evt)
        {
            base.TouchesMoved(touches, evt);

            var touch = touches.AnyObject as UITouch;

            if (touch != null)
            {
                latestPoint = touch.LocationInView(this);
                SetNeedsDisplay();
            }
        }

        public override void TouchesEnded(NSSet touches, UIEvent evt)
        {
            base.TouchesEnded(touches, evt);
            startNewPath = true;
        }

        public override void Draw(CGRect rect)
        {
            base.Draw(rect);

            using (var g = UIGraphics.GetCurrentContext())
            {
                if (image != null)
                    g.SetFillColor((UIColor.FromPatternImage(image).CGColor));
                else
                    g.SetFillColor(UIColor.LightGray.CGColor);
                g.FillRect(rect);

                if (!initialPoint.IsEmpty)
                {
                    g.SetLineWidth(20);
                    g.SetBlendMode(CGBlendMode.Clear);
                    UIColor.Clear.SetColor();

                    if (path.IsEmpty || startNewPath)
                    {
                        path.AddLines(new CGPoint[] { initialPoint, latestPoint });
                        startNewPath = false;
                    }
                    else
                    {
                        path.AddLineToPoint(latestPoint);
                    }

                    g.SetLineCap(CGLineCap.Round);
                    g.AddPath(path);
                    g.DrawPath(CGPathDrawingMode.Stroke);
                }
            }
        }
    }
}

、、および Monkey.png ファイル (GitHub から利用可能) を Resources フォルダーに追加します。FillTexture.pngFillTexture2.png
ファイルを Main.storyboard ダブルクリックしてデザイナーで開きます。
イメージビューをツールボックスからストーリーボードのビューにドラッグアンドドロップします。
[イメージビュー] を選択し、その Image プロパティをにMonkey.png変更します。
サイズクラスを使用している場合は、このイメージビューを制限する必要があります。イメージを 2 回クリックして制約モードにします。中央固定ハンドルをクリックして中央に制限し、垂直方向と水平方向の両方に揃えます。
高さと幅を制限するには、サイズ固定ハンドル ("ボーン" の形をしたハンドル) をクリックし、それぞれ幅と高さを選択します。
ツールバーの [更新] ボタンをクリックして、制約に基づいてフレームを更新します。
次に、ツールボックスの [カスタムコンポーネント] の下にスクラッチチケットビューが表示されるようにプロジェクトをビルドします。
スクラッチチケットビューをドラッグアンドドロップして、サルの画像の上に表示されるようにします。次に示すように、スクラッチチケットビューがサルを完全にカバーするようにドラッグハンドルを調整します。
外接する四角形を描画して両方のビューを選択して、スクラッチチケットビューをイメージビューに制限します。次に示すように、幅、高さ、中央、中央に制限し、制約に基づいてフレームを更新するオプションを選択します。
アプリケーションを実行し、画像を "スクラッチオフ" してサルを明らかにします。

Design-Timeプロパティの追加

デザイナーには、プロパティ型の数値、列挙、文字列、bool、CGSize、UIColor、UIImage のカスタムコントロールに対するデザイン時のサポートも含まれています。デモを行うために、にプロパティを追加して ScratchTicketView 、"スクラッチオフ" されたイメージを設定してみましょう。

プロパティのクラスに次の ScratchTicketView コードを追加します。

[Export("Image"), Browsable(true)]
public UIImage Image
{
    get { return image; }
    set {
            image = value;
              SetNeedsDisplay ();
        }
}

次のように、メソッドに null チェックをDraw追加することもできます。

public override void Draw(CGRect rect)
{
    base.Draw(rect);

    using (var g = UIGraphics.GetCurrentContext())
    {
        if (image != null)
            g.SetFillColor ((UIColor.FromPatternImage (image).CGColor));
        else
            g.SetFillColor (UIColor.LightGray.CGColor);

        g.FillRect(rect);

        if (!initialPoint.IsEmpty)
        {
             g.SetLineWidth(20);
             g.SetBlendMode(CGBlendMode.Clear);
             UIColor.Clear.SetColor();

             if (path.IsEmpty || startNewPath)
             {
                 path.AddLines(new CGPoint[] { initialPoint, latestPoint });
                 startNewPath = false;
             }
             else
             {
                 path.AddLineToPoint(latestPoint);
             }

             g.SetLineCap(CGLineCap.Round);
             g.AddPath(path);
             g.DrawPath(CGPathDrawingMode.Stroke);
        }
    }
}

引数がにtrue設定されたとを含めると、デザイナーの [プロパティ] パネルに プロパティが表示されます。ExportAttributeBrowsableAttribute プロパティをプロジェクトに含まれる別のイメージ (など FillTexture2.png) に変更すると、次に示すように、コントロールはデザイン時に更新されます。

まとめ

この記事では、カスタムコントロールを作成し、iOS デザイナーを使用して iOS アプリケーションで使用する方法について説明しました。デザイナーの ツールボックスでアプリケーションで使用できるように、コントロールを作成してビルドする方法について説明しました。さらに、デザイン時と実行時の両方で適切にレンダリングされるようにコントロールを実装する方法と、デザイナーでカスタムコントロールプロパティを公開する方法についても説明しました。

iOS Designer でのカスタム コントロールの使用

必要条件

チュートリアル

Design-Timeプロパティの追加

まとめ

関連リンク

その他のリソース

iOS Designer でのカスタムコントロールの使用