Denna iOS SDK Beginners handledning lär dig hur du bygger ett enkelt gränssnitt som består av ett användarnamn och lösenord UITextField
. Vi kommer att täcka både hur man lägger till ett textfält i Interface Builder och hur man skapar ett programmatiskt. Dessutom kommer vi att utforska UITextFieldDelegate
protokollmetoder och visa några praktiska tekniker för att arbeta med användarinmatning.
Att skapa element, som ett textfält, kan göras på ett av två sätt. Du kan skapa det i gränssnittsbyggare eller du kan själv programmera det själv. Även om det kan vara bekvämare att skapa ett element i Interface Builder, föredrar många programmerare att skapa element programmatiskt. Denna handledning beskriver kortfattat båda alternativen.
Starta Xcode och klicka på Arkiv> Nytt> Projekt. Klicka på "Application" under IOS-panelen till vänster. Klicka på ikonen med titeln "Single View Application" och klicka på "Next".
Skriv "TextFieldARC" i fältet "Produktnamn" och ange ett namn för din företagsidentifierare, till exempel "com.companyName". Välj "iPhone" från menyn "Enhetsfamilj". Se till att avmarkera "Använd Storyboards" och "Include Unit Tests" och kolla "Use Automatic Reference Counting" innan du klickar på "Next". Välj en plats för att lagra ditt projekt och klicka på "Skapa".
UITextField
Klicka på "ViewController.m" -filen och skriv följande kod inom viewDidLoad
metod.
CGRect passwordTextFieldFrame = CGRectMake (20.0f, 100.0f, 280.0f, 31.0f); UITextField * passwordTextField = [[UITextField alloc] initWithFrame: passwordTextFieldFrame]; passwordTextField.placeholder = @ "Lösenord"; 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];
Observera att textfältets tagegenskap är inställd på "2." Att ställa in taggegenskapen är ett sätt att hålla reda på vilket textfält som är aktivt i ditt program.
Klicka på "ViewController.xib" -filen i "Navigator" -panelen i ditt Xcode-projekt. Klicka på "Visa" i rutan "Document Outline" till vänster. Klicka på Visa> Verktyg> Visa objektbibliotek. Bläddra i Objekt-biblioteket i nedre vänstra hörnet tills du hittar ett "Textfält" -objekt. Klicka för att markera den och dra och släpp sedan textfältet till vyn.
Justera textfältet så att det sträcker sig över toppen av vyn. Med det markerade textfältet klickar du på Visa> Verktyg> Visa attribut inspektör. Leta efter fältet "Platshållare" i fönstret Egenskaper inspektör under "Textfält" och ändra det till "Användarnamn". Klicka på rullgardinsmenyn Rensa knapp och välj "Visas vid redigering". Klicka på rullgardinsmenyn "Returnyckel" och välj "Nästa". Slutligen rulla ner till fältet "Tag" under "View" och ändra det till "1." Klicka på Arkiv> Spara.
Om du kör ditt program nu borde du ha en UITextField
objekt på skärmen som kan få inmatning! Du kan komma åt objektets värde med text
egendom (dvs passwordTextField.text).
Användning av TextField vid denna punkt kommer dock att presentera ett anmärkningsvärt problem. Det finns ingen standardmetod för att ta bort tangentbordet från vyn. Så för vårt nästa knep ...
Avsluta tangentbordet när bakgrunden tappas kan uppnås på olika sätt. Koden nedan är ett exempel på en teknik. Klicka på "ViewController.m" -filen och lägg till följande metodimplementering:
- (void) touchesBegan: (NSSet *) berörs medEvent: (UIEvent *) händelse NSLog (@ "touchesBegan: withEvent:"); [self.view endEditing: JA]; [super touchesBegan: berörs medEvent: händelse];
Kör projektet igen och du ska nu kunna avfärda tangentbordet helt enkelt genom att knacka på skärmen.
Delegationen är ett designmönster som i huvudsak tillåter två objekt att kommunicera med varandra. en UITextField
observera lämpliga meddelanden UITextFieldDelegate
metod när vissa händelser inträffar, till exempel när textfältet börjar redigera. När ett meddelande skickas till en av metoderna har du möjlighet att utföra skräddarsydda åtgärder. Objektet som tar emot delegatmeddelandena kan vara något objekt som överensstämmer med delegatprotokollet, i det här fallet UITextFieldDelegate
. Men i det vanligaste scenariot, objektet som mottar UITextField
delegera meddelanden kommer att vara desamma UIViewController
objekt som innehåller UITextField
som en undervy.
Klicka på "ViewController.m" -filen. I viewDidLoad
metod där vi programmatiskt skapade textfältet ovan, lägg till följande kod:
passwordTextField.delegate = self; // Lägg till den här linjen [self.view addSubview: passwordTextField];
Genom att ställa in textfält
delegera egendom till själv
, de ViewController
objekt blir delegat i textfältet och kan implementera UITextFieldDelegate
metoder.
För att ange delegat för textfältet skapat i gränssnittsbyggare, klicka på "ViewController.xib." Klicka på textfältet i vyn och klicka på Visa> Verktyg> Visa anslutningsinspektör. Leta efter "delegat" under "Outlets" i rutan "Connections Inspector" till höger. Klicka på cirkeln intill den och dra och släpp den till "Filens ägare" i rutan "Dokumentutskick" till vänster. Detta slår upp textfältet så att ViewController
Objektet är inställt som textfältets delegat. Klicka på Arkiv> Spara.
Slutligen klickar du på "ViewController.h" och skriver följande kod för att anpassa klassen till UITextFieldDelegate
protokoll:
@interface ViewController: UIViewController
Det följande UITextFieldDelegate
protokollmetoder är alla frivilliga, vilket innebär att de inte behöver genomföras av delegaten. Men vi ska genomföra dem alla för att lära oss om dem. Låt oss diskutera metoderna när vi skriver in dem.
textFieldShouldBeginEditing:
och textFieldDidBeginEditing:
Klicka på "ViewController.m" och lägg till följande kod.
- (BOOL) textFieldShouldBeginEditing: (UITextField *) textField NSLog (@ "textFieldShouldBeginEditing"); textField.backgroundColor = [UIColor colorWithRed: 220.0f / 255.0f grön: 220.0f / 255.0f blå: 220.0f / 255.0f alfa: 1.0f]; returnera JA; - (void) textFieldDidBeginEditing: (UITextField *) textField NSLog (@ "textFieldDidBeginEditing");
textFieldShouldBeginEditing:
kallas precis innan Textfältet blir aktivt. Det här är ett bra ställe att anpassa beteendet på din ansökan. I det här fallet ändras bakgrundsfärgen på textfältet när den här metoden kallas för att ange att textfältet är aktivt. textFieldDidBeginEditing:
kallas när Textfältet blir aktivt.
textFieldShouldEndEditing:
och textFieldDidEndEditing:
Lägg till följande kod under tidigare metoder.
- (BOOL) textFieldShouldEndEditing: (UITextField *) textField NSLog (@ "textFieldShouldEndEditing"); textField.backgroundColor = [UIColor whiteColor]; returnera JA; - (void) textFieldDidEndEditing: (UITextField *) textField NSLog (@ "textFieldDidEndEditing");
Dessa två metoder liknar de metoder som kallas när textfältet börjar redigera. textFieldShouldEndEditing:
kallas precis innan Textfältet blir inaktivt och textFieldDidEndEditing:
kallas när Textfältet blir inaktivt. Inuti textFieldShouldEndEditing:
, bakgrundsfärgen ändras tillbaka till vitt så att textfältet kan gå tillbaka till sin ursprungliga färg. Återigen ger dessa metoder dig möjlighet att anpassa beteendet hos applikationen eftersom textfältet blir inaktivt.
textfield: shouldChangeCharactersInRange: replacementString
Lägg till följande kod under tidigare metoder.
- (BOOL) textField: (UITextField *) textField shouldChangeCharactersInRange: (NSRange) range replacementString: (NSString *) sträng NSLog (@ "textField: shouldChangeCharactersInRange: replacementString:"); om ([sträng isEqualToString: @ "#"]) return NO; annars returnera JA;
textFieldShouldChangeCharactersInRange: replacementString:
kallas varje gång användaren skriver ett tecken på tangentbordet. Faktum är att denna metod heter bara innan ett tecken visas. Om du vill begränsa vissa tecken från ett textfält är det här metoden för dig. Som du kan se i vårt exempel lägger vi till en del logik för att inte tillåta symbolen "#".
textFieldShouldClear:
Lägg till följande kod under tidigare metoder.
- (BOOL) textFieldShouldClear: (UITextField *) textField NSLog (@ "textFieldShouldClear:"); returnera JA;
textFieldShouldClear:
kallas när användaren trycker på klarknappen, den grå "x", inuti textfältet. Innan det aktiva textfältet rensas ger den här metoden möjlighet att göra nödvändiga anpassningar.
textFieldShouldReturn:
Lägg till följande kod under tidigare metoder.
- (BOOL) textFieldShouldReturn: (UITextField *) textField NSLog (@ "textFieldShouldReturn:"); om (textField.tag == 1) UITextField * passwordTextField = (UITextField *) [self.view viewWithTag: 2]; [passwordTextField becomeFirstResponder]; annat [textField resignFirstResponder]; returnera JA;
textFieldShouldReturn:
kallas när användaren trycker på returknappen på tangentbordet. I exemplet hittar vi vilket textfält som är aktivt genom att titta på taggen. Om textfältet "Användarnamn" är aktivt ska nästa textfält, "Lösenord", bli aktivt istället. Om textfältet "Lösenord" är aktivt, måste "Lösenord" avgå, och lämna tangentbordet med det.
Klicka på Bygg> Kör eller klicka på "Kör" -pilen längst upp till vänster. Med konsolen öppen, spela runt med textfälten. De NSLog
placeras i varje delegatprotokollsmetod hjälper tidigare att se omständigheterna där varje delegerad metod kallas.
De UITextFieldDelegate
protokollmetoder ger ett utmärkt tillfälle att anpassa beteendet hos a UITextField
. Denna handledning är inriktad på några av de vanligaste uppgifterna för UITextField
, som att skriva på tangentbordet och flytta till nästa textfält, men möjligheterna att skräddarsy beteende är oändliga. När du väl förstår delegationsdesignmönstret är det lättare att filialera till andra förbyggda objekt som använder delegater, till exempel UITableView
eller UIScrollView
. Håll din gamla kompis NSLog
i din bakficka när du börjar utforska andra delegater och det hjälper dig att förstå delegatens inre arbete.