Verwenden benutzerdefinierter Steuerelemente im iOS-Designer

Artikel
07/13/2023

Warnung

Der iOS Designer ist seit Visual Studio 2019, Version 16.8, und Visual Studio 2019 für Mac, Version 8.8, veraltet und wurde in Visual Studio 2019, Version 16.9, bzw. Visual Studio für Mac, Version 8.9, entfernt. Die empfohlene Möglichkeit zum Erstellen von iOS-Benutzeroberflächen ist direkt auf einem Mac mit Xcode. Weitere Informationen finden Sie unter Entwerfen von Benutzeroberflächen mit Xcode.

Anforderungen

Die Xamarin-Designer für iOS ist in Visual Studio für Mac und Visual Studio 2017 und höher unter Windows verfügbar.

In diesem Leitfaden wird vorausgesetzt, dass sie mit den Inhalten vertraut sind, die in den Erste Schritte Leitfäden behandelt werden.

Exemplarische Vorgehensweise

Wichtig

Ab Xamarin.Studio 5.5 unterscheidet sich die Art und Weise, wie benutzerdefinierte Steuerelemente erstellt werden, geringfügig von früheren Versionen. Zum Erstellen eines benutzerdefinierten Steuerelements ist entweder die IComponent Schnittstelle erforderlich (mit den zugeordneten Implementierungsmethoden) oder die Klasse kann mit [DesignTimeVisible(true)]kommentiert werden. Die letztere Methode wird im folgenden exemplarischen Beispiel verwendet.

Erstellen Sie eine neue Projektmappe aus der c#-Vorlage für eine iOS-App-Einzelansicht >>>, nennen Sie sie ScratchTicket, und fahren Sie mit dem Assistenten für neues Projekt fort:
Erstellen Sie eine neue leere Klassendatei mit dem Namen ScratchTicketView:

Fügen Sie den folgenden Code für ScratchTicketView die Klasse hinzu:

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

Fügen Sie die FillTexture.pngFillTexture2.png Dateien und Monkey.png (über GitHub verfügbar) dem Ordner Resources hinzu.
Doppelklicken Sie auf die Main.storyboard Datei, um sie im Designer zu öffnen:
Ziehen/Ablegen einer Bildansicht aus der Toolbox in die Ansicht im Storyboard.
Wählen Sie die Bildansicht aus , und ändern Sie die Image-Eigenschaft in Monkey.png.
Da wir Größenklassen verwenden, müssen wir diese Bildansicht einschränken. Klicken Sie zweimal auf das Bild, um es in den Einschränkungsmodus zu versetzen. Wir beschränken sie auf die Mitte, indem Sie auf den mittig angeheftenen Ziehpunkt klicken und ihn vertikal und horizontal ausrichten:
Um die Höhe und Breite einzuschränken, klicken Sie auf die Anheftungspunkte (die "Knochen"-förmigen Griffe), und wählen Sie Breite bzw. Höhe aus:
Aktualisieren Sie den Frame basierend auf Einschränkungen, indem Sie auf der Symbolleiste auf die Schaltfläche Aktualisieren klicken:
Erstellen Sie als Nächstes das Projekt so, dass die Scratch Ticket View unter Benutzerdefinierte Komponenten in der Toolbox angezeigt wird:
Ziehen Und ablegen Sie eine Scratch Ticket-Ansicht , sodass sie über dem Affenbild angezeigt wird. Passen Sie die Ziehpunkte so an, dass die Scratch Ticket View den Affen vollständig abdeckt, wie unten gezeigt:
Beschränken Sie die Scratch Ticket View auf die Bildansicht, indem Sie ein umgebendes Rechteck zeichnen, um beide Ansichten auszuwählen. Wählen Sie die Optionen aus, um sie auf die Breite, Höhe, Mitte und Mitte zu beschränken und die Frames basierend auf Einschränkungen zu aktualisieren, wie unten gezeigt:
Führen Sie die Anwendung aus, und "kratzen" Sie das Bild, um den Affen zu zeigen.

Hinzufügen Design-Time Eigenschaften

Der Designer umfasst auch Entwurfszeitunterstützung für benutzerdefinierte Steuerelemente der Eigenschaftentypen numeric, enumeration, string, bool, CGSize, UIColor und UIImage. Um dies zu veranschaulichen, fügen wir dem eine Eigenschaft hinzu, um das ScratchTicketView Bild festzulegen, das "zerkratzt" ist.

Fügen Sie der -Klasse für die ScratchTicketView -Eigenschaft den folgenden Code hinzu:

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

Möglicherweise möchten wir der Draw -Methode auch eine NULL-Überprüfung hinzufügen, wie so:

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

Das Einschließen von und ExportAttribute mit BrowsableAttribute dem Argument, das auf festgelegt ist, führt dazu, true dass die Eigenschaft im Eigenschaftenbereich des Designers angezeigt wird. Das Ändern der Eigenschaft in ein anderes im Projekt enthaltenes Bild, z FillTexture2.png. B. , führt dazu, dass das Steuerelement zur Entwurfszeit aktualisiert wird, wie unten gezeigt:

Zusammenfassung

In diesem Artikel erfahren Sie, wie Sie ein benutzerdefiniertes Steuerelement erstellen und es mithilfe des iOS-Designers in einer iOS-Anwendung nutzen. Wir haben gesehen, wie Sie das Steuerelement erstellen und erstellen, um es für eine Anwendung in der Toolbox des Designers verfügbar zu machen. Darüber hinaus wurde untersucht, wie das Steuerelement so implementiert wird, dass es sowohl zur Entwurfszeit als auch zur Laufzeit ordnungsgemäß gerendert wird, und wie benutzerdefinierte Steuerelementeigenschaften im Designer verfügbar gemacht werden.

Verwenden benutzerdefinierter Steuerelemente im iOS-Designer

Anforderungen

Exemplarische Vorgehensweise

Hinzufügen Design-Time Eigenschaften

Zusammenfassung

Ähnliche Themen

Zusätzliche Ressourcen