Share
Manchmal sind nur wenige Codezeilen erforderlich, um die Benutzeroberfläche zu aktivieren. In diesem Lernprogramm erfahren Sie fünf einfache Tricks zum Erstellen stilvoller UIButtons, die Ihre App hervorstechen lassen!
Bestimmte Aspekte von Anwendungen oder Techniken, die in diesem Lernprogramm verwendet werden, haben sich seit der ursprünglichen Veröffentlichung geändert. Dies kann es ein wenig schwierig machen, mitzuverfolgen. Wir empfehlen Ihnen, sich diese neueren Tutorials zum gleichen Thema anzusehen:
Im Download, der diesem Tutorial beiliegt, finden Sie die Ordner "Initial Build" und "Final Build". Anstatt alle Schritte anzuzeigen, die zum Einrichten des Ausgangsprojekts erforderlich sind, sollten Sie einfach den Anhang herunterladen und das Projekt aus dem Ordner "Initial Build" verwenden.
Gehen Sie mit dem anfänglichen Projekt in das Verzeichnis ViewController.m Datei und suchen Sie die zum Schleife innerhalb der viewDidLoad Methode. Die Code-Ausschnitte aus den folgenden Tipps sollten in diese Schleife eingefügt werden.
Der grundlegendste Schritt zur Anpassung der UIButton Diese Klasse dient zum Anpassen der Farbe des Hintergrunds und des Titels für den Standardstatus und den hervorgehobenen Status. Das folgende Code-Snippet setzt die Hintergrundfarbe jeder Schaltfläche auf Schwarz, die normale Titelfarbe auf Weiß und die hervorgehobene Titelfarbe auf Rot:
// Setze die Schaltfläche Textfarbe [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] fürState: UIControlStateHighlighted]; // Setze die Schaltfläche Hintergrundfarbe [btn setBackgroundColor: [UIColor blackColor]];
Vollfarbige Hintergrundfarben sind großartig, aber ein subtiler Farbverlauf kann oft den Unterschied zwischen farblos und poliert ausmachen. Ersetze das setBackgroundColor: Nachricht oben mit der folgenden, um einen benutzerdefinierten Farbverlauf zu erstellen:
// Zeichne einen benutzerdefinierten Farbverlauf CAGradientLayer * btnGradient = [CAGradientLayer-Layer]; btnGradient.frame = btn.bounds; btnGradient.colors = [NSArray arrayWithObjects: (id) [[UIColor colorWithRed: 102.0f / 255.0f grün: 102.0f / 255.0f blau: 102.0f / 255.0f alpha: 1.0f] CGColor], (id) [[UIColor colorWithRed : 51.0f / 255.0f grün: 51.0f / 255.0f blau: 51.0f / 255.0f alpha: 1.0f] CGColor], nil]; [btn.layer insertSublayer: btnGradient atIndex: 0];
Beginnen Sie in Zeile 4 oben NSArray wird mit den ursprünglichen und Zielfarbverläufen erstellt. Beachten Sie, dass die entsprechenden RGB-Werte durch 255 dividiert werden müssen, bevor sie an den gesendet werden colorWithRed: grün: blau: alpha: Nachricht und dass ein Alpha-Wert von 1,0 steht vollständig undurchsichtig, während ein Alpha-Wert von 0,0 steht für vollständig transparent. Leider ist eine vollständige Erklärung der oben genannten "Magie" nicht in diesem Tutorial enthalten. Wichtig ist jedoch, dass Sie lediglich die RGB-Werte durch die Start- / End-Werte ersetzen müssen, die Sie in Ihrem eigenen benutzerdefinierten Bereich verwenden möchten Gradient.
Wenn alles gut gegangen ist, sollte Ihr Menü nun etwa so aussehen:
Nicht schlecht, oder? Und wir haben gerade erst begonnen…
Als Nächstes möchten wir jedem einen benutzerdefinierten Eckenradius hinzufügen UIButton um die Dinge ein bisschen schlanker aussehen zu lassen. Fügen Sie die folgenden Codezeilen ein, um dies zu ermöglichen:
// Runde Tastenecken CALayer * btnLayer = [btn layer]; [btnLayer setMasksToBounds: YES]; [btnLayer setCornerRadius: 5.0f];
In Zeile 4 ist der Eckenradius auf 5,0 eingestellt. Spielen Sie mit dieser Zahl, um die Sichtbarkeit der Ecken zu erhöhen oder zu verringern.
Sie sollten jetzt ein Menü haben, das nur ein wenig schmäler aussieht:
Manchmal machen die kleinen Änderungen den Unterschied. Fügen Sie um jede Schaltfläche einen schwarzen Strich mit den folgenden Codezeilen hinzu:
// Wende einen schwarzen Rand von 1 Pixel an [btnLayer setBorderWidth: 1.0f]; [btnLayer setBorderColor: [[UIColor blackColor] CGColor]];
Kannst du den Unterschied erkennen? Es ist sehr subtil, aber dennoch wertvoll:
Lassen Sie uns nun einen bemerkenswerteren Tweak versuchen. Die Standard-Systemschriftart schneidet sie einfach nicht aus. Das Spielmenü, das wir erstellen, benötigt eine Schriftart, die der visuellen Ästhetik des Spiels entspricht. Eine schnelle Suche in Google Fonts zeigt nur eine Schrift namens Knewave von Tyler Finck, die den Trick ausführen sollte. Laden Sie Knewave jetzt herunter.
Nach dem Download der Knewave-Regular.ttf Datei müssen Sie sie in Xcode in den Projektnavigatorbereich ziehen, um sie Ihrem Projekt hinzuzufügen. Als nächstes öffnen Sie die Info.plist Datei. Fügen Sie eine neue Eigenschaftslistenzeile hinzu und geben Sie "Von der Anwendung bereitgestellte Schriftarten" ein. Ein Array sollte automatisch erstellt werden. Setzen Sie die mit Element 0 verknüpfte Zeichenfolge auf "Knewave-Regular.ttf". Überprüfen Sie den Namen nochmals, da der Wert die Groß- und Kleinschreibung berücksichtigt. Speicher die Datei.
Nachdem Sie die obige Änderung vorgenommen haben, sollte Ihre Info.plist-Datei nun wie folgt aussehen:
Als nächstes müssen Sie das hinzufügen Knewave-Regular.ttf Datei zu den gebündelten Ressourcen Ihres Projekts. Wählen Sie im Projektnavigator "SleekButtons" aus und klicken Sie auf die Registerkarte "Buildphasen". Erweitern Sie die Dropdown-Liste "Bundle-Ressourcen kopieren" und klicken Sie auf das Pluszeichen.
An dieser Stelle sollten Sie die Knewave-Schriftart in Ihrem Projekt verwenden können! Lassen Sie uns das testen, indem Sie zurück zum springen ViewController.m Datei und Ändern der viewDidLoad Methode zum Festlegen einer benutzerdefinierten Schriftart:
// Setze die Schaltfläche Textfarbe [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] fürState: UIControlStateHighlighted]; // Benutzerdefinierte Schriftart hinzufügen [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" size: 18.0f]]; // Zeichne einen benutzerdefinierten Farbverlauf CAGradientLayer * btnGradient = [CAGradientLayer-Layer]; btnGradient.frame = btn.bounds;
Beachten Sie, dass die fontWithName value wird als "Knewave" angegeben, nicht als "Knewave-Regular", wie Sie vielleicht erwarten. Dies liegt daran, dass es einen Unterschied zwischen dem Dateinamen der Schriftart und dem angegebenen Namen der Schriftart gibt. Sie müssen sicher sein, dass Sie den angegebenen Namen verwenden, wenn Sie mit Ihren eigenen Schriftarten arbeiten.
Mit dem obigen Code sollte das Spielmenü vollständig sein! Erstellen und starten Sie jetzt und Sie sollten etwa Folgendes sehen:
Obwohl es in dem in diesem Tutorial vorgestellten Hauptdesign nicht verwendet wird, ist es oft nützlich, eine leichte Drehung auf UIKit-Elemente anzuwenden, insbesondere UIButton oder UIImage Objekte. Dies ist einfach und kann mit nur einer Codezeile erfolgen.
Sie können dies mit dem bisher geschriebenen Code ausprobieren, indem Sie Folgendes tun:
self.startGameButton.transform = CGAffineTransformMakeRotation (M_PI / 180 * 5.0f); for (UIButton * btn in buttons) // Setzt die Schaltfläche Textfarbe [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] fürState: UIControlStateHighlighted];
In Zeile 1 oben die Konstante M_PI wird durch 180 geteilt, um 1 Radiant zu erzeugen, der dann mit 5,0f multipliziert wird, um eine Rotation von 5 Radiant zu ergeben. Wie Sie beim Erstellen und Ausführen des Projekts feststellen werden, führt das Obige wahrscheinlich zu Anti-Aliasing-Problemen mit UIKit-Elementen, die dynamisch gezeichnet werden. Daher ist das Anwenden einer Rotation mit a sinnvoller UIButton Wenn die Hintergrundbild-Eigenschaft festgelegt ist und Rastergrafiken verwendet werden (d. h., dies funktioniert am besten mit PNG-Dateien)..
Mit den fünf oben genannten Tipps haben Sie gesehen, wie einfach es ist, subtile, aber signifikante Änderungen an einem vorzunehmen UIButton Objekt. Was wäre, wenn ich Ihnen sagen würde, dass dies noch einfacher sein könnte? Treffen UIButton-Glossy, eine Open-Source-Kategorie von George McMullen, die automatisch sowohl einen Verlauf als auch ein glänzendes Finish anwendet UIButton Objekte.
Umsetzung UIButton-Glossy in deinem eigenen Projekt ist einfach. Nachdem Sie das heruntergeladen haben UIButton-Glossy.h und UIButton-Glossy.m Dateien und fügte sie zu Ihrem Xcode-Projekt hinzu, importieren Sie die * .h-Datei in den Hauptcontroller der Projektansicht:
#import "ViewController.h" #import "UIButton + Glossy.h"
Jetzt können Sie mit nur einer Codezeile sofort einen coolen Glanzeffekt auf Ihre Schaltflächen anwenden: [btn makeGlossy];.
Um dies in Aktion zu sehen, ersetzen Sie den vorhandenen View Controller-Code durch Folgendes:
for (UIButton * btn in buttons) // Setzt die Schaltfläche Textfarbe [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] fürState: UIControlStateHighlighted]; // Standard-Hintergrundfarbe festlegen [btn setBackgroundColor: [UIColor blackColor]]; // Benutzerdefinierte Schriftart hinzufügen [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" size: 18.0f]]; // Make glossy [btn makeGlossy];
Ihre Schaltflächen sollten jetzt glänzend aussehen und das Endergebnis sollte ungefähr so aussehen:
In diesem Lernprogramm wurden verschiedene Techniken zum Erstellen von benutzerdefinierten Methoden gezeigt UIButton Objekte leuchten. Laden Sie das angehängte Projekt herunter, um einen Blick auf den vollständigen, endgültigen Quellcode zu erhalten.
Fragen? Bemerkungen? Sound unten oder Nachricht direkt @markhammonds.
Accentsconagua