Share
In deze zelfstudie over de iOS SDK-beginners leer je hoe je een eenvoudige interface kunt bouwen die bestaat uit een gebruikersnaam en wachtwoord UITextField. We zullen zowel ingaan op het toevoegen van een tekstveld in Interface Builder als op het programmatisch maken van een tekstveld. Daarnaast zullen we de UITextFieldDelegate protocolmethodes en demonstreren een paar handige technieken voor het werken met gebruikersinvoer.
Het maken van elementen, zoals een tekstveld, kan op twee manieren worden gedaan. Je kunt het maken in Interface Builder of je kunt het zelf programmeren. Hoewel het misschien handiger is om een element in Interface Builder te maken, geven veel programmeurs er de voorkeur aan om elementen programmatisch te maken. In deze zelfstudie worden beide opties kort uitgelegd.
Start Xcode en klik op Bestand> Nieuw> Project. Klik op "Toepassing" onder het iOS-paneel aan de linkerkant. Klik op het pictogram met de titel "Single View Application" en klik op "Volgende".
Typ in het veld 'Productnaam' 'TextFieldARC' en voer een naam in voor uw bedrijfsidentificatie, zoals 'com.companyName'. Kies 'iPhone' in het menu 'Apparaatfamilie'. Zorg ervoor dat u 'Gebruik storyboards' en 'Inclusief eenheidstests' uitschakelt en schakel 'Automatische referentietelling gebruiken' in voordat u op Volgende klikt. Kies een locatie om uw project op te slaan en klik op 'Maken'.
Accentsconagua
UITextField Klik op het bestand "ViewController.m" en typ de volgende code in de viewDidLoad methode.
CGRect passwordTextFieldFrame = CGRectMake (20.0f, 100.0f, 280.0f, 31.0f); UITextField * passwordTextField = [[UITextField alloc] initWithFrame: passwordTextFieldFrame]; passwordTextField.placeholder = @ "Wachtwoord"; passwordTextField.backgroundColor = [UIColor whiteColor]; passwordTextField.textColor = [UIColor blackColor]; passwordTextField.font = [UIFont systemFontOfSize: 14.0f]; passwordTextField.borderStyle = UITextBorderStyleRoundedRect; passwordTextField.clearButtonMode = UITextFieldViewModeWhileEditing; passwordTextField.returnKeyType = UIReturnKeyDone; passwordTextField.textAlignment = UITextAlignmentLeft; passwordTextField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; passwordTextField.tag = 2; passwordTextField.autocapitalizationType = UITextAutocapitalizationTypeNone; [self.view addSubview: passwordTextField];
Merk op dat de eigenschap tag van het tekstveld is ingesteld op "2." Het instellen van de eigenschap tag is een manier om bij te houden welk tekstveld actief is in uw programma.
Klik op het bestand "ViewController.xib" in het deelvenster "Navigator" van uw Xcode-project. Klik op de "Weergave" in het deelvenster "Documentoverzicht" aan de linkerkant. Klik op Beeld> Hulpprogramma's> Objectbibliotheek tonen. Blader door de Objectbibliotheek in de linkeronderhoek totdat u een "Tekstveld" -object vindt. Klik om het te selecteren en sleep vervolgens het tekstveld naar de weergave.
Pas het tekstveld aan zodat het over de bovenkant van de weergave wordt uitgerekt. Selecteer het tekstveld en klik op Beeld> Hulpprogramma's> Show Attributes Inspector. Zoek naar het veld "Plaatshouder" in het deelvenster "Attributencontrole" onder "Tekstveld" en wijzig dit in "Gebruikersnaam". Klik op de vervolgkeuzelijst 'Wissen' en kies 'Verschijnt tijdens bewerking'. Klik op de vervolgkeuzelijst "Return Key" en kies "Volgende". Blader tenslotte naar beneden naar het veld "Tag" onder "Bekijken" en verander dit naar "1". Klik op Bestand> Opslaan.
Als u nu uw programma uitvoert, zou u een UITextField object op het scherm dat invoer kan ontvangen! U hebt toegang tot de waarde van het object met de tekst eigenschap (d.w.z. passwordTextField.text).
Het gebruik van het TextField op dit punt zal echter een opmerkelijk probleem opleveren. Er is geen standaardmethode om het toetsenbord uit de weergave te verwijderen. Dus voor onze volgende trick ...
Het ontslag van het toetsenbord wanneer de achtergrond wordt aangeboord, kan op verschillende manieren worden bereikt. De onderstaande code is een voorbeeld van één techniek. Klik op het bestand "ViewController.m" en voeg de volgende methode-implementatie toe:
- (ongeldig) raaktBegan: (NSSet *) raakt aan metEvent: (UIEvent *) -gebeurtenis NSLog (@ "raaktBegan: withEvent:"); [self.view endEditing: YES]; [super raaktBegan: raakt aan met Event: event];
Voer het project opnieuw uit en u zou nu het toetsenbord kunnen negeren door simpelweg op het scherm te tikken.
Delegatie is een ontwerppatroon dat in essentie twee objecten in staat stelt met elkaar te communiceren. EEN UITextField objectberichten de juiste UITextFieldDelegate methode wanneer bepaalde gebeurtenissen plaatsvinden, zoals wanneer het tekstveld begint met bewerken. Wanneer een bericht naar een van de methoden wordt verzonden, hebt u de mogelijkheid om aangepaste acties uit te voeren. Het object dat de gedelegeerde berichten ontvangt, kan elk object zijn dat in overeenstemming is met het gedelegeerde protocol, in dit geval UITextFieldDelegate. In het meest voorkomende scenario ontvangt het object dat het UITextField delegeren berichten zullen hetzelfde zijn UIViewController object dat de bevat UITextField als een subweergave.
Klik op het bestand "ViewController.m". In de viewDidLoad methode waarbij we programmatisch het bovenstaande tekstveld hebben gemaakt, voegt u de volgende code toe:
passwordTextField.delegate = self; // VOEG DEZE LIJN TOE [self.view addSubview: passwordTextField];
Door de textField eigenschap delegeren naar zelf, de ViewController object wordt de gedelegeerde van het tekstveld en kan het UITextFieldDelegate methoden.
Om de gedelegeerde in te stellen voor het tekstveld dat is gemaakt in Interface Builder, klikt u op "ViewController.xib." Klik op het tekstveld in de weergave en klik op Beeld> Hulpprogramma's> Show Connections Inspector. Zoek naar "delegate" onder "Outlets" in het "Connections Inspector" -venster aan de rechterkant. Klik op de cirkel ernaast en sleep deze naar "Bestandseigenaar" in het deelvenster "Documentoverzicht" aan de linkerkant. Hierdoor wordt het tekstveld bekabeld zodat de ViewController object is ingesteld als de gedelegeerde van het tekstveld. Klik op Bestand> Opslaan.
Klik ten slotte op "ViewController.h" en typ de volgende code om de klasse conform te maken met de UITextFieldDelegate protocol:
@interface ViewController: UIViewController
Het volgende UITextFieldDelegate protocolmethoden zijn allemaal optioneel, wat betekent dat ze niet door de afgevaardigde hoeven te worden geïmplementeerd. We gaan ze echter allemaal implementeren om er meer over te leren. Laten we de methoden bespreken terwijl we ze typen.
textFieldShouldBeginEditing: en textFieldDidBeginEditing: Klik op "ViewController.m" en voeg de volgende code toe.
- (BOOL) textFieldShouldBeginEditing: (UITextField *) textField NSLog (@ "textFieldShouldBeginEditing"); textField.backgroundColor = [UIColor colorWithRed: 220.0f / 255.0f groen: 220.0f / 255.0f blauw: 220.0f / 255.0f alpha: 1.0f]; terugkeer JA; - (void) textFieldDidBeginEditing: (UITextField *) textField NSLog (@ "textFieldDidBeginEditing");
textFieldShouldBeginEditing: wordt genoemd net voor het tekstveld wordt actief. Dit is een goede plaats om het gedrag van uw toepassing aan te passen. In dit geval verandert de achtergrondkleur van het tekstveld wanneer deze methode wordt aangeroepen om aan te geven dat het tekstveld actief is. textFieldDidBeginEditing: wordt genoemd wanneer het tekstveld wordt actief.
textFieldShouldEndEditing: en textFieldDidEndEditing: Voeg de onderstaande code toe onder de vorige methoden.
- (BOOL) textFieldShouldEndEditing: (UITextField *) textField NSLog (@ "textFieldShouldEndEditing"); textField.backgroundColor = [UIColor whiteColor]; terugkeer JA; - (void) textFieldDidEndEditing: (UITextField *) textField NSLog (@ "textFieldDidEndEditing");
Deze twee methoden lijken op de methoden die worden aangeroepen wanneer het tekstveld begint met bewerken. textFieldShouldEndEditing: wordt genoemd net voor het tekstveld wordt inactief, en textFieldDidEndEditing: wordt genoemd wanneer het tekstveld wordt inactief. Binnen textFieldShouldEndEditing:, de achtergrondkleur wordt weer wit, zodat het tekstveld terug kan naar de oorspronkelijke kleur. Nogmaals, deze methoden bieden u een kans om het gedrag van de toepassing aan te passen naarmate het tekstveld inactief wordt.
textField: shouldChangeCharactersInRange: replacementStringVoeg de onderstaande code toe onder de vorige methoden.
- (BOOL) textField: (UITextField *) textField shouldChangeCharactersInRange: (NSRange) range replacementString: (NSString *) string NSLog (@ "textField: shouldChangeCharactersInRange: replacementString:"); if ([string isEqualToString: @ "#"]) return NO; else return YES;
textFieldShouldChangeCharactersInRange: replacementString: wordt elke keer dat de gebruiker een teken op het toetsenbord typt opgeroepen. In feite wordt deze methode aangeroepen net voordat een teken wordt weergegeven. Als u bepaalde tekens uit een tekstveld wilt beperken, is dit de methode voor u. Zoals u in ons voorbeeld kunt zien, hebben we wat logica toegevoegd om het symbool "#" niet toe te staan.
textFieldShouldClear:Voeg de onderstaande code toe onder de vorige methoden.
- (BOOL) textFieldShouldClear: (UITextField *) textField NSLog (@ "textFieldShouldClear:"); terugkeer JA;
textFieldShouldClear: wordt opgeroepen wanneer de gebruiker op de knop Wissen drukt, de grijze "x" in het tekstveld. Voordat het actieve tekstveld wordt gewist, biedt deze methode u de mogelijkheid om de benodigde aanpassingen aan te brengen.
textFieldShouldReturn:Voeg de onderstaande code toe onder de vorige methoden.
- (BOOL) textFieldShouldReturn: (UITextField *) textField NSLog (@ "textFieldShouldReturn:"); if (textField.tag == 1) UITextField * passwordTextField = (UITextField *) [self.view viewWithTag: 2]; [passwordTextField becomeFirstResponder]; else [textField resignFirstResponder]; return YES;
textFieldShouldReturn: wordt aangeroepen wanneer de gebruiker op de return-toets op het toetsenbord drukt. In het voorbeeld zien we welk tekstveld actief is door naar de eigenschap tag te kijken. Als het tekstveld 'Gebruikersnaam' actief is, moet in plaats daarvan het volgende tekstveld 'Wachtwoord' worden geactiveerd. Als het tekstveld "Wachtwoord" actief is, moet "Wachtwoord" aftreden, waarbij het toetsenbord ermee wordt verlaten.
Klik op Maken> Uitvoeren of klik op de pijl "Uitvoeren" in de linkerbovenhoek. Open de console en speel met de tekstvelden. De NSLog geplaatst in elk van de gedelegeerde protocol-methoden eerder helpt om de omstandigheden te zien waarin elke gedelegeerde methode wordt aangeroepen.
De UITextFieldDelegate protocol-methoden bieden een geweldige kans om het gedrag van een aan te passen UITextField. Deze zelfstudie is gericht op enkele van de meest voorkomende taken met betrekking tot UITextField, zoals het ontslag van het toetsenbord en het overschakelen naar het volgende tekstveld, maar de mogelijkheden voor het aanpassen van het gedrag zijn eindeloos. Zodra u het gedelegeerde ontwerppatroon begint te begrijpen, kunt u gemakkelijker vertakken naar andere vooraf gebouwde objecten die afgevaardigden gebruiken, zoals UITableView of UIScrollView. Houd je oude vriend NSLog in je achterzak als je begint met het verkennen van andere afgevaardigden en het zal je helpen de innerlijke werking van de afgevaardigde te begrijpen.
