Share
Soms zijn er maar een paar regels code nodig om je interface te laten knallen. Deze tutorial leert je vijf eenvoudige trucs voor het maken van stijlvolle UIButtons om je app opvallend te maken!
Bepaalde aspecten van toepassingen of technieken die in deze zelfstudie worden gebruikt, zijn gewijzigd sinds de publicatie oorspronkelijk werd gepubliceerd. Dit maakt het misschien een beetje moeilijk om mee te volgen. We raden u aan deze meer recente zelfstudies over hetzelfde onderwerp te bekijken:
In de download die bij deze zelfstudie hoort, vindt u de mappen getiteld "Initial Build" en "Final Build". In plaats van alle stappen te tonen die nodig zijn om het initiële project in te stellen, hoeft u alleen de bijlage te downloaden en het project te volgen vanuit de map "Initial Build".
Ga met het initiële project open naar de ViewController.m bestand en zoek de voor loop binnen de viewDidLoad methode. De codefragmenten van de onderstaande tips moeten binnen deze lus worden geplaatst.
De meest fundamentele stap naar het aanpassen van de UIButton klasse is om de kleur van de achtergrond en titel aan te passen voor zowel de standaard als gemarkeerde staten. Met het volgende codefragment wordt de achtergrondkleur van elke knop ingesteld op zwart, normale titelkleur op wit en de gemarkeerde titelkleur op rood:
// Zet de knop Text Color [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Stel de knop Achtergrondkleur in [btn setBackgroundColor: [UIColor blackColor]];
Stevige achtergrondkleuren zijn geweldig, maar een subtiel verloop kan vaak het verschil maken tussen neutraal en gepolijst. Vervang de setBackgroundColor: bericht hierboven met het volgende om een aangepast verloop te maken:
// Teken een aangepast verloop CAGradientLayer * btnGradient = [CAGradientLayer-laag]; btnGradient.frame = btn.bounds; btnGradient.colors = [NSArray arrayWithObjects: (id) [[UIColor colorWithRed: 102.0f / 255.0f groen: 102.0f / 255.0f blauw: 102.0f / 255.0f alpha: 1.0f] CGColor], (id) [[UIColor colorWithRed : 51.0f / 255.0f groen: 51.0f / 255.0f blauw: 51.0f / 255.0f alpha: 1.0f] CGColor], niets]; [btn.layer insertSublayer: btnGradient atIndex: 0];
Beginnend met regel 4 hierboven, een NSArray wordt gemaakt met de begin- en doelgradiëntkleuren. Merk op dat de corresponderende RGB-waarden moeten worden gedeeld door 255 voordat ze worden geleverd aan de colorWithRed: groen: blauw: alpha: bericht en dat een alpha-waarde van 1.0 staat voor volledig ondoorzichtig terwijl een alpha-waarde van 0.0 vertegenwoordigt volledig transparant. Helaas is een volledige uitleg van de "magie" hierboven buiten het bestek van deze zelfstudie, maar het belangrijkste om te onthouden is dat je gewoon de RGB-waarden moet vervangen door de begin- / eindwaarden die je wilt gebruiken in je eigen gebruik. helling.
Als alles goed is gegaan, ziet uw menu er nu ongeveer zo uit:
Niet slecht, toch? En we zijn nog maar net begonnen ...
Vervolgens willen we elk een eigen hoekradius toevoegen UIButton om het er iets gladder uit te laten zien. Voeg de volgende coderegels in om dit te laten gebeuren:
// Ronde knoophoeken CALayer * btnLayer = [btn layer]; [btnLayer setMasksToBounds: YES]; [btnLayer setCornerRadius: 5.0f];
In regel 4 hierboven is de hoekradius ingesteld op 5.0. Speel met dit nummer om te vergroten of verkleinen hoe merkbaar de hoeken verschijnen.
U zou nu een menu moeten hebben dat er net wat gelikter uitziet:
Soms maken de kleine aanpassingen het verschil. Voeg om elke knop een 1px zwarte streep toe met de volgende coderegels:
// Een 1 pixel, zwarte rand toepassen [btnLayer setBorderBreedte: 1.0f]; [btnLayer setBorderColor: [[UIColor blackColor] CGColor]];
Kun je het verschil zien? Het is heel subtiel, maar nog steeds waardevol:
Laten we nu eens een meer opmerkelijke aanpassing proberen. Het standaardsysteemlettertype snijdt het gewoon niet. Het gamemenu dat we bouwen heeft een lettertype nodig dat de visuele esthetiek van het spel kan evenaren. Een snelle zoekopdracht op Google Fonts onthult alleen een lettertype genaamd Knewave door Tyler Finck dat de truc zou moeten doen. Download Knewave nu.
Na het downloaden van de Knewave-Regular.ttf bestand, moet u het naar het Project Navigator-paneel in Xcode slepen om het aan uw project toe te voegen. Open vervolgens de Info.plist het dossier. Voeg een nieuwe rij met eigenschappenlijsten toe en typ 'Lettertypen geleverd door toepassing'. Er moet automatisch een array worden gemaakt. Stel de string geassocieerd met Item 0 in op "Knewave-Regular.ttf". Controleer de naam dubbel, want de waarde is hoofdlettergevoelig. Sla het bestand op.
Na het maken van de bovenstaande wijziging, zou uw Info.plist-bestand er nu als volgt uit moeten zien:
Vervolgens moet je het toevoegen Knewave-Regular.ttf bestand naar de gebundelde bronnen van uw project. Selecteer "SleekButtons" in de Project Navigator en klik vervolgens op het tabblad "Fasen opbouwen". Vouw het selectievakje "Bundelbundel kopiëren" uit en klik vervolgens op het plusteken.
Op dit punt zou je het Knewave-lettertype in je project moeten kunnen gebruiken! Laten we dat testen door terug te springen naar de ViewController.m bestand en wijzigen van de viewDidLoad methode om een aangepast lettertype in te stellen:
// Zet de knop Text Color [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Aangepast lettertype toevoegen [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" size: 18.0f]]; // Teken een aangepast verloop CAGradientLayer * btnGradient = [CAGradientLayer-laag]; btnGradient.frame = btn.bounds;
Merk op dat de fontWithName waarde wordt gespecificeerd als "Knewave", niet "Knewave-Regular" zoals je zou verwachten. Dit komt omdat er een verschil is tussen de bestandsnaam van het lettertype en de voornaam van het lettertype. U moet er zeker van zijn dat u de opgegeven naam gebruikt wanneer u met uw eigen lettertypen werkt.
Met de bovenstaande code moet het gamemenu compleet zijn! Bouw en run nu en je zou iets als het volgende moeten zien:
Hoewel niet gebruikt in het primaire ontwerp zoals aangetoond in deze tutorial, is het vaak handig om een kleine rotatie toe te passen op UIKit-elementen, in het bijzonder UIButton of UIImage voorwerpen. Dit is eenvoudig en kan worden gedaan met slechts één regel code.
Je kunt dit uitproberen met de code die tot nu toe is geschreven door het volgende te doen:
self.startGameButton.transform = CGAffineTransformMakeRotation (M_PI / 180 * 5.0f); for (UIButton * btn in buttons) // Zet de knop Text Color [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted];
In regel 1 hierboven, de constante M_PI wordt gedeeld door 180 om 1 radiaal te genereren, die vervolgens wordt vermenigvuldigd met 5.0f voor een rotatie van 5 radialen. Zoals u zult opmerken als u het project bouwt en uitvoert, leidt het bovenstaande waarschijnlijk tot anti-aliasing-problemen met UIKit-elementen die dynamisch worden getekend. Bijgevolg is het toepassen van een rotatie meer geschikt met een UIButton wanneer de eigenschap background image is ingesteld en rasterafbeeldingen in gebruik zijn (dit werkt het beste met PNG-bestanden).
Met de vijf bovenstaande tips, heb je gezien hoe gemakkelijk het kan zijn om subtiele maar belangrijke aanpassingen aan een te maken UIButton voorwerp. Maar wat als ik je zou vertellen dat dit nog eenvoudiger zou kunnen zijn? Ontmoeten UIButton-Glossy, een open-source categorie van George McMullen die automatisch zowel een verloop als een glanzende afwerking toepast UIButton voorwerpen.
Implementeren UIButton-Glossy in je eigen project is eenvoudig. Nadat je de. Hebt gedownload UIButton-Glossy.h en UIButton-Glossy.m bestanden en voeg ze toe aan uw Xcode-project, importeer het * .h-bestand in de hoofdprojectview-controller, zoals dit:
#import "ViewController.h" #import "UIButton + Glossy.h"
Nu kunt u direct een cool glanzend effect op uw knoppen toepassen met slechts één regel code: [btn makeGlossy];.
Om dit in actie te zien, vervangt u de bestaande code van de weergavecontroller met het volgende:
for (UIButton * btn in buttons) // Zet de knop Text Color [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Stel de standaard backgrondkleur in [btn setBackgroundColor: [UIColor blackColor]]; // Aangepast lettertype toevoegen [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" size: 18.0f]]; // Maak glanzend [btn makeGlossy];
Je knoppen zouden nu een glanzende afwerking moeten hebben en het eindresultaat zou er ongeveer zo uit moeten zien:
Deze zelfstudie heeft meerdere technieken voor het maken van aangepaste gedemonstreerd UIButton objecten schijnen. Download het bijgevoegde project voor een glimp van de volledige, definitieve broncode.
Vragen? Opmerkingen? Geluid hieronder of stuur me direct een bericht @markhammonds.
Accentsconagua