Arbeiten mit PaintCode und Interface Builder in XCode

Jeder iOS-Entwickler, der etwas auf sich hält, sollte inzwischen PaintCode kennen, eine OSX-App zum Zeichnen von Grafiken, die nicht als Bilder gespeichert werden, sondern als Codeabschnitte, die Grafiken zeichnen. Die Vorteile sind eine erheblich reduzierte App-Installationsgröße - Sie müssen nicht für jedes Bild drei Auflösungen desselben Bildes einbinden - und nahtlos skalierbare Grafiken. Eine Sache, mit der ich persönlich eine Weile zu kämpfen hatte, war, wie man sie effektiv in Kombination mit Interface Builder, dem UI-Entwicklungstool für iOS- und OSX-Apps, einsetzen kann. In diesem Blog erkläre ich Ihnen eine effektive und einfache Methode, um PaintCode-Grafiken so zu zeichnen, dass Sie sehen können, was Sie im Interface Builder tun. Dazu verwende ich die relativ neue strong>@IBDesignable Annotation. Ich werde auch auf das Einstellen von Farben eingehen und schließlich darauf, wie man mit Ansichten umgeht, die auf dynamische Laufzeitdaten angewiesen sind, um sich selbst zu zeichnen.

Lassen Sie uns zunächst eine einfache Grafik in PaintCode erstellen. Zeichnen wir ein schönes Briefumschlag- oder E-Mail-Symbol. Fügen Sie einen Rahmen hinzu und setzen Sie die Einschränkungen auf variabel, damit es sich an die Größe des Rahmens anpasst (ziehen Sie die Ecken des Rahmens in PaintCode zur Bestätigung). So erhalten wir ein schönes, skalierbares Symbol. Speichern Sie die Datei und exportieren Sie sie in Ihr Xcode-Projekt in der Sprache Ihrer Wahl. [caption id="attachment_15233" align="aligncenter" width="600"] Verschnörkelte Linien sind das Beste[/caption]   Der einfachste und unkomplizierteste Weg, ein PaintCode-Bild in Ihren Interface Builder zu bekommen, besteht darin, einfach eine UIView-Unterklasse zu erstellen und die entsprechende StyleKit-Methode in ihrer drawRect-Methode aufzurufen. Sie können dies auch in Swift oder Objective-C tun. Dieses Beispiel wird in Swift sein, aber wenn Sie mit dem langsamen Swift-Compiler in XCode 6.x zu kämpfen haben, sollten Sie Objective-C für diese Art von einfachem und unkompliziertem Code bevorzugen.Um es im Interface Builder zu verwenden, erstellen Sie einfach ein Storyboard oder eine xib, ziehen Sie ein UIView darauf und ändern Sie seine benutzerdefinierte Klasse in Ihre UIView-Unterklasse. Vergewissern Sie sich, dass die Einschränkungen richtig eingestellt sind, und führen Sie die Anwendung aus - Sie sollten Ihr benutzerdefiniertes Symbol in Ihrer funktionierenden Anwendung sehen können. [objc] class EmailIcon: UIView { override func drawRect(rect: CGRect) { StyleKit.drawEmail(frame: rect) } } [/objc] [caption id="attachment_15235" align="aligncenter" width="600"] Geisteransichten, der Schrecken des Interface Builders[/caption]   Wie Sie wahrscheinlich schon bemerkt haben, ist das in Interface Builder alles andere als praktisch - alles, was Sie sehen (oder eigentlich nicht sehen), ist eine leere UIView. Ich schätze, Sie könnten ihm in IB eine Hintergrundfarbe geben und diese in Ihrem Code wieder aufheben, aber das ist alles andere als praktisch. Stattdessen werden wir einfach eine strong>@IBDesignable Annotation auf die UIView Unterklasse setzen. Wenn Sie zu IB zurückkehren, sollte der Code kompiliert werden und einen Moment später wird Ihr PaintCode-Bild angezeigt, mit veränderter Größe und allem. [objc] @IBDesignable class EmailIcon: UIView { override func drawRect(rect: CGRect) { StyleKit.drawEmail(frame: rect) } } [/objc] [caption id="attachment_15237" align="aligncenter" width="300"] wie Magie[/caption]  

Farbe hinzufügen

Wir können unsere Grafik in PaintCode so konfigurieren, dass sie eine eigene Farbe erhält. Gehen Sie einfach zurück zu PaintCode und ändern Sie die Farbe in 'Parameter' - siehe Bild.

Exportieren Sie die Datei erneut und ändern Sie den Aufruf der StyleKit-Methode, um die Farbe einzubeziehen. Am einfachsten ist es in diesem Fall, die Eigenschaft tintColor des UIViews zu übergeben. Zurück im Interface Builder können wir nun die Standardeigenschaft tintColor einstellen, die in der IB-Vorschau sofort aktualisiert werden sollte. Alternativ können Sie auch eine @IBInspectable Farbeigenschaft zu Ihrer UIView hinzufügen, aber das würde ich nur für kompliziertere UIViewsempfehlen - wenn sie zum Beispiel mehrere StyleKit-Grafiken enthalten. [objc] @IBDesignable class EmailIcon: UIView { override func drawRect(rect: CGRect) { StyleKit.drawEmail(frame: rect, color: tintColor) } } [/objc] [caption id="attachment_15240" align="aligncenter" width="600"] machen wir es Xebia lila, um dem Chef zu gefallen[/caption]  

Umgang mit dynamischen Eigenschaften

Ein Fall, mit dem ich mich befassen musste, ist eine UIView, die eine Auswahl von StyleKit-Bildern zeichnen kann, je nach dem Wert eines dynamischen Modellwerts. Ich habe einige Optionen in Betracht gezogen, um damit umzugehen:

1. Legen Sie einen Standardwert fest, der zur Laufzeit außer Kraft gesetzt werden kann. Dies ist jedoch etwas gefährlich. Wenn Sie vergessen, diese Eigenschaft zur Laufzeit zurückzusetzen oder aufzuheben, wird Ihr Benutzer mit einem Standardplatzhalter oder - schlimmer noch - mit völlig falschen Informationen konfrontiert.
2. Machen Sie die Eigenschaft @IBInspectable. Dies funktioniert allerdings nur mit relativ einfachen Werten (Strings, Zahlen, Farben) und hat das gleiche Problem wie das oben beschriebene.

Was ich brauchte, war eine Möglichkeit, eine Eigenschaft zu setzen, aber nur vom Interface Builder aus. Glücklicherweise gibt es diese Möglichkeit, wie ich später herausfand. In UIView gibt es eine Methode namens prepareForInterfaceBuilder, die genau das tut, was auf dem Etikett steht - die Methode überschreiben, um Eigenschaften zu setzen, die nur im Interface Builder relevant sind. In unserem Fall also: [objc] @IBDesignable class EmailIcon: UIView { // standardmäßig keine eingestellt var iconType: String? = nil override func drawRect(rect: CGRect) { if iconType == "email" { StyleKit.drawEmail(frame: rect, color: tintColor) } if iconType = "email-read" { StyleKit.drawEmailRead(frame: rect, color: tintColor) } // falls keine der obigen Optionen, wird nichts gezeichnet } // zeichnet das 'email' Symbol standardmäßig im Interface Builder override func prepareForInterfaceBuilder() { iconType = "email" } } [/objc] Und das ist auch schon alles. Sie können diese Methode verwenden, um alle Ihre Grafiken zu erstellen, sie dynamisch in Größe und Farbe zu halten und die volle Leistung von Interface Builder und PaintCode zusammen zu nutzen.