Používání vlastních ovládacích prvků v iOS Designeru

Článek
03/22/2017

Upozorňující

Návrhář pro iOS byl v sadě Visual Studio 2019 verze 16.8 a Visual Studio 2019 pro Mac verze 8.8 zastaralý a odebrán v sadě Visual Studio 2019 verze 16.9 a Visual Studio pro Mac verze 8.9. Doporučený způsob, jak vytvářet uživatelská rozhraní pro iOS, je přímo na Macu se systémem Xcode. Další informace naleznete v tématu Navrhování uživatelských rozhraní pomocí Xcode.

Požadavky

Xamarin Designer pro iOS je k dispozici v Visual Studio pro Mac a sadě Visual Studio 2017 a novějších ve Windows.

Tato příručka předpokládá znalost obsahu popsaného v příručkách Začínáme.

Názorný postup

Důležité

Od Xamarin.Studio 5.5 se způsob vytvoření vlastních ovládacích prvků mírně liší od předchozích verzí. K vytvoření vlastního ovládacího prvku je IComponent požadováno rozhraní (s přidruženými metodami implementace) nebo třída může být opatřena poznámkami [DesignTimeVisible(true)]. Druhá metoda se používá v následujícím příkladu názorného postupu.

Vytvořte nové řešení ze šablony aplikace pro jednotné zobrazení aplikace >> pro iOS > v jazyce C#, pojmenujte ho ScratchTicketa pokračujte v průvodci novým projektem:
Vytvořte nový prázdný soubor třídy s názvem ScratchTicketView:

Přidejte následující kód pro ScratchTicketView třídu:

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);
                }
            }
        }
    }
}

Přidejte soubory FillTexture.pnga soubory (dostupné z GitHubu) do složky Resources.Monkey.pngFillTexture2.png
Poklikáním otevřete Main.storyboard soubor v návrháři:
Přetáhněte zobrazení obrázku ze sady nástrojů do zobrazení ve scénáři.
Vyberte zobrazení obrázku a změňte jeho vlastnost Image na Monkey.png.
Vzhledem k tomu, že používáme třídy velikostí, budeme muset toto zobrazení obrázku omezit. Dvakrát klikněte na obrázek a vložte ho do režimu omezení. Pojďme ho omezit na střed tak, že klikneme na úchyt pro připnutí na střed a zarovnáme ho svisle i vodorovně:
Chcete-li omezit výšku a šířku, klikněte na úchyty pro připnutí velikosti (úchyty ve tvaru kosti) a vyberte šířku a výšku v uvedeném pořadí:
Kliknutím na tlačítko Aktualizovat na panelu nástrojů aktualizujte rámeček na základě omezení:
Dále sestavte projekt tak, aby se v části Vlastní komponenty na panelu nástrojů zobrazilo zobrazení pomocného lístku:
Přetáhněte pomocné zobrazení lístku tak, aby se zobrazilo nad obrázkem opice. Upravte úchyty pro přetažení tak, aby zobrazení pomocného lístku zcela pokryje opici, jak je znázorněno níže:
Omezte zobrazení pomocného lístku na zobrazení obrázku tak, že nakreslíte ohraničující obdélník a vyberete obě zobrazení. Vyberte možnosti, které chcete omezit na šířku, výšku, střed a střed a aktualizovat rámce na základě omezení, jak je znázorněno níže:
Spusťte aplikaci a "odškrábejte" obrázek, aby se zobrazila opice.

Přidání vlastností návrhu a času

Návrhář také zahrnuje podporu návrhu pro vlastní ovládací prvky číselného typu vlastnosti, výčet, řetězec, bool, CGSize, UIColor a UIImage. Abychom si ukázali, přidáme vlastnost k ScratchTicketView nastavení obrázku, který je "odškrácený".

Do třídy pro vlastnost přidejte následující kód ScratchTicketView :

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

Do metody můžeme také přidat kontrolu Draw null, například takto:

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);
        }
    }
}

ExportAttribute Zahrnutí argumentu a s argumentem BrowsableAttribute nastaveným na true výsledky ve vlastnosti zobrazené na panelu vlastností návrháře. Změna vlastnosti na jiný obrázek, který je součástí projektu, například FillTexture2.pngvýsledkem aktualizace ovládacího prvku v době návrhu, jak je znázorněno níže:

Shrnutí

V tomto článku jsme si prošli, jak vytvořit vlastní ovládací prvek a využívat ho v aplikaci pro iOS pomocí návrháře pro iOS. Viděli jsme, jak vytvořit a sestavit ovládací prvek, který ho zpřístupní aplikaci v sadě nástrojů návrháře. Dále jsme se podívali na to, jak implementovat ovládací prvek tak, aby se správně vykreslovaly v době návrhu i za běhu a jak vystavit vlastnosti vlastního ovládacího prvku v návrháři.

Požadované obrázky (ukázka)

Sdílet prostřednictvím

Používání vlastních ovládacích prvků v iOS Designeru

Požadavky

Názorný postup

Přidání vlastností návrhu a času

Shrnutí

Další materiály

Sdílet prostřednictvím

Používání vlastních ovládacích prvků v iOS Designeru

Požadavky

Názorný postup

Přidání vlastností návrhu a času

Shrnutí

Související odkazy

Další materiály