Zeichnungscode in Swift, PaintCode

Während der Olivier im Nebenzimmer gekocht wird, schreibe ich ein kleines Tutorial zum Zeichnen mit Code. Sofort präsentierte Codezeilen mit Bruchzahlen, wobei wir eine Linie entlang der Punkte zeichnen. Und um den Radius des Kreises zu berechnen, nehmen wir Schlangengift, die Zuverlässigkeit, Fotos in iCloud zu speichern und einen Zauber zu flüstern. Beängstigend, ich verstehe. Sogar in das Video auf YouTube habe ich einen Witz eingefügt:

- " Aaastanovite, bitte hier im Laden " - rief der Held der russischen Serie.

Alles in allem, lieber Freund, hast du recht. Es wird Bruchzahlen und eine Reihe von Codezeilen geben. Aber es wird viel einfacher sein. Interessant? Kommen Sie zur Sache.

Zum Arbeiten benötigen Sie das Dienstprogramm PaintCode . Öffnen Sie die Anwendung und sehen Sie eine Oberfläche ähnlich der von Sketch:



Ich mag diese Kontinuität.

Stellen Sie zuerst die Leinwandgröße ein. Ich empfehle einen Wert von 100 bis 1000 Pixel. Es macht keinen Sinn, mehr zu setzen. Wenn Sie weniger als 100 Pixel einstellen, erhalten Sie einen großen Bruchteil und als Ergebnis Friese beim Rendern. Wir werden 400x400 Pixel einstellen und das Leinwand- Apple- Symbol benennen:



Ich empfehle, die richtigen Namen für die Leinwände zu verwenden. Am Ende des Tutorials wird klar, warum. Für die Ebenen sind die Namen jedoch nicht wichtig, sie können ignoriert werden.

Fügen Sie der Leinwand ein Symbol hinzu, legen Sie die Größe fest und platzieren Sie es in der Mitte. Es sollte sich so herausstellen:



Sie können jedes Symbol für Experimente verwenden, die Hauptsache ist kein Raster. Wenn Sie mit diesem Ergebnis zufrieden sind, können Sie exportieren und zu Xcode wechseln.
Aber ich werde eine nützliche Funktion zeigen. Jetzt ist das Symbol schwarz und Sie möchten die Farbe ändern können. Schauen Sie dazu in die obere linke Ecke und sehen Sie alle Farben, die vom Objekt erhalten werden. Benennen Sie die Farbe in IconColor um und stellen Sie den Parametermodus ein .



Das ist alles. Der generierte Code muss noch exportiert werden. Oben rechts finden Sie die Schaltfläche Exportieren . Füllen Sie den Namen und andere Felder wie gewünscht aus und speichern Sie die Datei:



Gehen wir zu Xcode


Importieren Sie die Datei in das Projekt, das aus PaintCode exportiert wurde. Aus Neugier können Sie darin scrollen, aber wenig ist interessant.

Erstellen Sie in Xcode die von UIView geerbte ApppleIconView- Klasse. Definieren Sie auch die Zeichenmethode neu:

class AppleIconView: UIView { override func draw(_ rect: CGRect) { IconStyleKit.drawAppleIcon( frame: rect, resizing: .aspectFit, iconColor: UIColor.black ) } } 

IconStyleKit - der beim Export angegebene Name. drawAppleIcon - Der generierte Methodenname, basierend auf dem Namen der Zeichenfläche . Und iconColor ist die Farbe, die jetzt als Parameter festgelegt wird. Wie Sie sehen können, hat PaintCode praktische Methoden generiert.

AppleIconView muss außerdem eine transparente Hintergrundfarbe festlegen. Vergiss nicht es zu tun.

Fügen Sie ein AppleIconView- Objekt hinzu:

 class Controller: UIViewController { override func viewDidLoad() { super.viewDidLoad() let iconView = AppleIconView( frame: CGRect.init( x: 0, y: 200, width: 70, height: 70) ) iconView.center.x = self.view.frame.width / 2 self.view.addSubview(iconView) } } 

Es bleibt das Projekt zu starten. Wenn alles richtig gemacht wurde, sehen Sie das vom Code gezeichnete Logo:



Voreingenommene Meinung des Autors


Meistens verwende ich PDF in meinen iOS-Apps. Warum Paintcode verwenden ? Einfach so - es macht keinen Sinn. Wenn Sie jedoch dasselbe Symbol haben, sollte es mehrere Farben haben - PaintCode hilft (wenn das Symbol einfarbig ist, können Sie tintColor propter verwenden ). Auch gezeichnete Elemente sind leichter zu animieren.

Ein praktisches Beispiel ist meine SPPermission-Bibliothek :



Für jede Auflösung verwende ich ein Symbol, das mit PaintCode gezeichnet wurde. Das Schema ihrer 3 Farben kann direkt im Code geändert werden.

Für diejenigen, die gerne Videos ansehen, werde ich noch einmal auf das YouTube-Tutorial verlinken:


Frohes Neues Jahr!

Source: https://habr.com/ru/post/de434892/


All Articles