PaintCode 2, ein kurzer Exkurs und Kommentare

    2013 habe ich etwas über das PaintCode- Projekt gelernt und war sehr beeindruckt von dem, was ich gesehen habe. Dennoch verwandeln sich Vektorgrafiken wie durch ein Wunder in Codezeilen, die plötzlich in Ihrer Anwendung funktionieren, und all diese Magie kostet nur 99,99 US-Dollar.

    Ich schaute lange auf den Bildschirm und etwas Angst vor dem Unbekannten stieß mich weg. Trotzdem bin ich weit entfernt von Design und Zeichnung und konnte auf den ersten Blick nicht die volle Kraft dieses Projekts einschätzen. Er schickte Links zu dem Video und der Projektwebsite an unsere Designer und dachte: „Nun, jetzt werden sie anfangen, echte Dinge zu tun!“. Aber ihr Ausdruck war wie meiner. Trotzdem konnten sie all diese komplizierten Formeln und Variablen nicht verstehen ...

    PaintCodeEine interessante Anwendung, wenn auch nur wegen des Grenzzustands für Designer, aber auch für Programmierer - PaintCode , wie ist das wirklich?
    Trotz der Fülle an Dokumentationen und Beispielen , die den Prozess der Erstellung von Elementen ausreichend detailliert und einfach beschreiben, möchte ich einen kurzen Exkurs machen und auf einige der Kommentare hinweisen, die bei der Arbeit mit diesem Produkt festgestellt wurden.

    Malen




    Auf den ersten Blick eine sehr einfache Anwendung. Dinge, die sowohl Designer als auch Programmierer kennen:
    • am oberen Rand des Toolbar-Bildschirms;
    • in der linken Objektbibliothek;
    • in der Mitte befindet sich der Arbeitsbereich;
    • Inspektor und Browser auf der rechten Seite (zur Auswahl eines Elements im Arbeitsbereich).

    Mit dem oberen Teil ist alles klar, jeder Schüler malt in Paint und weiß, wie man einen Kreis, ein Quadrat, einen Text und ein Sternchen zeichnet.
    Lassen Sie uns den linken Teil analysieren, er besteht aus folgenden Elementen:
    • Farben - um eine Reihe von Farben für Ihre Anwendung zu erstellen;
    • Gradients - für Gradienten - Set erstellen , die von den Grundfarben erzeugten Farben in Schritt erzeugt werden können;
    • Schatten , um eine Reihe von Schatten zu erstellen, die aus den im Element Farben erstellten Grundfarben erstellt werden können.
    • Bilder - einige Bilder in drei Auflösungen 1x, 2x, 3x unabhängig voneinander hinzugefügt;
    • Variablen - die interessantesten! Lasst uns eine Intrige hinterlassen.

    Farbgestaltung

    Einen Farbverlauf erstellen

    Schattenerstellung

    Hinzufügen eines Bildes in 3 Auflösungen

    Variablenerstellung


    Aber über Variablen im Detail. Es ist möglich, eine Variable hinzuzufügen, die mit Ihrem Oberflächenelement interagiert, z. B. Farbe, Neigungswinkel, Text, Status, möglicherweise Typ, Ort, Größe und Ort.

    Arten von Variablen:
    • Ausdruck - Ein Ausdruck, der alle folgenden Werte zurückgeben kann.
    • Zahl - ein numerischer Wert, zum Beispiel der Elementtyp;
    • Fraktion - Teilen Schwimmers ganze Zahl von 0 bis 1 als die Eigenschaft des Fortschritts UIProgressView;
    • Winkel - ein Winkel, im Gegensatz zu Zahl, ist dies wirklich ein Winkel, ein Wert von 0 bis 360;
    • Text - ein Text, der einem Textfeld zugewiesen werden kann;
    • Boolean - 1/0, YES / NO, yes / no, wie Sie möchten (z. B. Drücken einer Taste oder Ausblenden eines Elements);
    • Punkt - Koordinaten des Punktes x und y;
    • Größe - Größe Breite, Höhe;
    • Rechteck - ein Rechteck bestehend aus Position (x, y) und Größe (Breite, Höhe).

    Für jedes Element der Bibliothek können Sie einen eindeutigen Namen und den Typ angeben: StyleKit, Local, Parameter (es gibt keinen StyleKit-Typ in Variablen):
    • StyleKit - Das Objekt wird zum allgemeinen Satz von Stilen hinzugefügt, weitere Details siehe unten.
    • Lokal - Dieser Typ bedeutet, dass es sich um ein lokales Objekt handelt, das nur in PaintCode sichtbar ist.
    • Parameter - dieser Typ bedeutet, dass es sich um ein externes Objekt handelt, das nicht nur in PaintCode sichtbar ist (der Programmierer kann es "von Hand" ändern).

    Stylekit

    StyleKit Enthält eine Reihe von Elementen, die für die Verwendung außerhalb von PaintCode erforderlich sind, können Sie beispielsweise eine Reihe von Farben hinzufügen, aus denen die Anwendung besteht. Der Programmierer kann die Farbe nur mit dem Namen

    aufrufen : self.view.backgroundColor = [StyleKitHabrahabr backgroundLogo];

    Ebenso werden in StyleKit Farbverläufe, Schatten und erstellte Oberflächenelemente hinzugefügt. Das heißt Ein Set, das dem Entwickler beim Erstellen der Benutzeroberfläche weiter hilft.

    Beispiel:
    Wir haben eine Farbe erstellt und diese dann als Basis für eine andere Farbe verwendet
    Farbe aus Basis erstellen

    Wir haben der Zeichenfläche ein Rechteck hinzugefügt und dieser durch einfaches Ziehen und Ablegen eine Farbe zugewiesen. // habrastorage.org / files / 10a / ffd / a57 / 10affda57f1741fd8ebc50714579dc4a.png "/> Der Zeichenfläche wurde
    ein Textfeld hinzugefügt, der Buchstabe" H "wurde gedruckt und der resultierende Text in Bezierkurven umgewandelt ein kleines Schattenelement (früher erstellt aus einer Farbe, die aus der ersten Farbe erstellt wurde)
    Schatten hinzufügen

    Alles ist einfach!

    Ich betrachte die Möglichkeit, Elemente zu erstellen, die von zuvor erstellten Elementen erben, als großes Plus, zum Beispiel einen Schatten aus einer Grundfarbe zu erstellen. Sobald Sie die Grundfarbe ändern, werden alle Erben die Änderungen sofort akzeptieren. Mit dem richtigen Design eine sehr bequeme Sache.

    Es ist möglich, PSD zu importieren, in Ihrem Lieblingseditor zu zeichnen und in das Projekt zu übertragen. Was das Zeichnen anbelangt, werden Designer nicht in der Lage sein, viel Arbeit herauszufinden.

    Die erstellten Elemente können, ohne von der Registrierkasse abzuweichen, durch einfaches Drücken der Schaltfläche „Exportieren“ in die erforderlichen Auflösungen geschnitten werden
    PNG exportieren

    Etwas ist

    Und hier ist ein kleiner Exkurs.

    Wie ich bereits schrieb, war die erste Bekanntschaft mit PaintCode schon lange her, aber irgendwie vergangen. Und plötzlich hatte ich die Gelegenheit, die Anwendung komplett neu zu gestalten, und diesmal war ich entschlossen. Die Einführung von PaintCode begann, aber hier traten einige Probleme auf, unsere Designer konnten nur den Teil lernen, der höher ist! Sie machen ihre Arbeit gut, aber wenn es um Variablen und das Erstellen von Funktionen ging, gab es eine Dummheit und die Entwickler mussten diese Arbeit beenden.

    Es wurde beschlossen, die Arbeit zu teilen, der Designer erstellt die Farben und das Bild selbst, die Entwickler erstellten die erforderlichen Variablen und Funktionen und exportierten StyleKit in das Projekt. Und so verbinden sich die Entwickler ...

    Code


    Das vom Designer erstellte Element muss nur auf dem Bildschirm angezeigt werden und muss manchmal zum Leben erweckt werden.
    Mit PaintCode können Sie Oberflächenelemente in Form von einfachem UIImage und UIVew erstellen, die sich bewegen, drehen, die Farbe ändern, verschwinden usw. Genauer gesagt, es wird eine Methode zum Zeichnen einer Instanz von UIView erstellt.
    Beginnen wir mit einem einfachen, um UIImage aus dem erstellten Bild zu erhalten, müssen Sie die Zeichenfläche auswählen und die Methode angeben, die StyleKit im Inspektor auf der rechten Seite zurückgibt.

    Eine Zeichenmethode auswählen

    In der Dropdown-Liste: Es gibt keine Methode, die Methode "Zeichnen", das Bild und die Methode "Zeichnen" und das Bild.
    Wenn Sie die Bilderzeugung auswählen, wird in StyliKit eine Methode angezeigt, in meinem Fall
    // Generierte Bilder
    + (UIImage *) imageOfLogoHabrWithFrame: (CGRect) frame;
    Beim Aufruf wird ein Bild mit der aktuellen Auflösung erstellt und kann verwendet werden.

    Wenn Sie die Zeichnungsmethode auswählen,
    // Zeichnungsmethoden
    + (nichtig) drawLogoHabrWithFrame: (CGRect) frame;

    Welche wiederum wird Ihrer Klasse durch den UIView-Nachkommen in der Methode hinzugefügt - (void) drawRect: (CGRect) rect:

    - (void) drawRect: (CGRect) rect {
    // Zeichencode
    [StyleKit drawLogoHabrWithFrame: rect];
    }

    Um Ihre Instanz neu zu zeichnen, wenn Sie beispielsweise den Frame, andere Parameter oder die Animation ändern, wird die Methode für die Instanz aufgerufen:
    [self setNeedsDisplay];

    Im Allgemeinen ist die Schaltung einfach wie 2x2.
    Die Beispiele enthalten sowohl das PaintCode-Projekt als auch Xcode, was sehr praktisch ist.
    Um StyleKit zu exportieren (im Falle von Obj-C handelt es sich um eine .h- und .m-Datei), gehen Sie zu Datei -> Exportieren ...
    StyleKit exportieren

    Dann fügen wir dem Projekt Dateien hinzu und verwenden sie.

    PaintCode kann Code für iOS - Objective-C, Swift, C # Xamarin und für Mac OS - Objective-C, Swift generieren. Unterstützt iOS 5+, Mac OS 10.7+.

    Im Großen und Ganzen muss der Entwickler die Verwendung von Variablen , die Sprache der Ausdrücke und dynamische Formen beherrschen . Und wofür dann deine Fantasie ausreicht.

    Zusammenfassung


    PaintCode ist ein mächtiges und interessantes Werkzeug, das in guten Händen ist. Es ermöglicht Ihnen, eine schöne "Live" -Schnittstelle zu erstellen, um die Anwendung "zu erleichtern", weil Es ist nicht erforderlich, alle "aufgeschnittenen" Bilder zu speichern. Aber bevor man es benutzt, muss man alles wiegen, und das haben wir entschieden mit:

    Profis
    • Schneidet Bilder mit ein paar Klicks auf die gewünschte Auflösung.
    • Beseitigt die Notwendigkeit, eine große Anzahl von Bildern im Projekt zu speichern.
    • Ermöglicht es Ihnen, die Benutzeroberfläche "wiederzubeleben" - ändern Sie dynamisch die Farben, fügen Sie Animationen hinzu, ändern Sie die Größe, beschränken Sie sich nur auf Ihre Vorstellungskraft;
    • Bis zu einem gewissen Grad beschleunigt sich der Entwicklungsprozess;
    • Mit einer guten Architektur des Projekts können Sie das Erscheinungsbild des gesamten Elementsatzes (dieselben Grundfarben, Schatten, unter Verwendung von Symbol ) schnell ändern .
    • Alle Farben an einem Ort;
    • Zeichnet Elemente schnell genug.
    • Gute Unterstützung, innerhalb von 5 Minuten beantwortet und sogar vorgeschlagen, wenn wir Fragen hatten;

    Nachteile
    • Das Projekt besteht aus einer einzelnen Datei, was zu Unannehmlichkeiten bei der Verwendung von Versionskontrollsystemen führt (Git kann Änderungen nicht zusammenführen, wir machen sie der Reihe nach !!!);
    • Der Grenzzustand des Instruments weckt sowohl bei Designern als auch bei Entwicklern Angst. Für einige ist es schwierig, Logik zu entwickeln, andere sind schwer zu zeichnen.
    • Es gibt keine bequeme Unterteilung von Variablen in Untergruppen. In der Folge erscheinen Variablen, die für die gleiche Aktion verantwortlich sind. Um schnell darin zu navigieren, müssen Sie sich ein heikles System ausdenken oder alle Personen im Auge behalten.
    • Wenn Sie ein StyleKit in einem Projekt verwenden, wird das letztere mit einer Reihe von "Variablen" und Ausdrücken überschwemmt, die sehr schwierig zu verwenden sind (siehe Abschnitt oben).
    • Wenn Sie mehrere StyleKits verwenden, müssen Sie nachverfolgen, welches Element, welche Farbe, welcher Schatten usw. sich befindet. Dies führt zu Verwirrung bei der Entwicklung und führt zu einem Speicherauszug.
    • Ihr Projekt ist abhängig vom Vorhandensein der installierten Version von PainCode. Andernfalls können Sie die in PainCode erstellten Elemente nicht schnell ändern:
    • Der Designer musste Git beherrschen;
    • Es gibt keine Möglichkeit, den Code zu exportieren und das Bild abzurufen. Zum Beispiel ging Ihr PaintCode-Projekt durch ein Wunder verloren, aber der von ihm generierte Code blieb erhalten, und das Projekt kann nicht aus dem Code wiederhergestellt werden.
    • Manchmal gibt es Probleme und Unverständnis bei der Lösung eines Problems, insbesondere wenn Sie die Größe eines zukünftigen Elements ändern müssen (etwas aus der Kategorie der Einschränkungen unter iOS).
    • Derzeit gibt es keine Möglichkeit, die erstellten Elemente an einer anderen Stelle als unter iOS und Mac OS zu verwenden, unabhängig davon, ob dies unter Android angezeigt wird ...

    PS
    Es ist sehr einfach, sich auf die Versprechen der Entwickler einzulassen, aber manchmal lohnt es sich! Sobald unser Projekt im AppStore verfügbar ist, werden dem Artikel Materialien hinzugefügt. PaintCode ist ein gutes Werkzeug für ein kleines Projekt, eine kleine Firma. Wir hoffen sehr, dass sich das Tool weiterentwickelt, um ein schönes, wettbewerbsfähiges Design, eine „lebendige“ Benutzeroberfläche und andere beeindruckende Dinge zu schaffen. Nun, wahrscheinlich die Hauptfrage, die viele in der Post quält: "Lohnt es sich dann zumindest für sein Geld?". Es lohnt sich auf jeden Fall! Sie müssen es nur herausfinden)

    Nun, für den Samen sind meine Beispiele:
    Beispiel 1
    "alt =" image "/>

    Beispiel 2

    Beispiel 3


    Und so funktioniert profi:


    Jetzt auch beliebt: