Share
Ett av de största verktygen Apple ger till sina iPhone-utvecklare är gränssnittsbyggare. Gränssnittsbyggare är en applikation som gör att du, utvecklaren, kan skapa det grafiska användargränssnittet (GUI) för din app i en WYSIWYG-stilredigerare (What You Are What You Get). När appen sammanställs, genererar IB sedan all nödvändig kod för dig. Detta gör att du snabbt och enkelt kan skapa gränssnitt. Denna handledning guidar dig genom att skapa gränssnitt i gränssnittsbyggare och användningen av de olika elementen som Apple tillhandahåller
Innan du fortsätter med några av exemplen i denna handledning bör du läsa Apples iPhone Human Interface Guidelines. Dessa dokument innehåller väsentlig information om hur gränssnitt skapas för iPhone, och om du inte överensstämmer med de riktlinjer som anges kan det hända att din app avvisas när den skickas till App Store. Detta dokument kommer att diskuteras mer ingående när vi går och alla exemplen i denna handledning kommer att överensstämma med dessa riktlinjer.
Interface Builder har en ganska enkel layout. Den består av fyra huvudfönster, utsikten, biblioteket, nib (eller xib) dokumentbläddrare och inspektören. Så vad gör alla dessa fönster? Vyn är där du konstruerar ditt gränssnitt. Du kommer att dra artiklar från biblioteksfönstret och på utsikten för att placera dem. I dokumentbläddraren kan du bläddra, hierarkiskt, de element du har placerat i din nib-fil. Slutligen visar inspektören alla de olika attributen för det valda elementet och låter dig redigera dem.
På den mer tekniska sidan tillåter Interface Builder din programkällkod att interagera med gränssnittet på två grundläggande sätt: uttag och åtgärder. Outlets definierar ett element som du kommer att ha tillgång till i källkoden, då kan du koppla från dina uttag till de specifika användargränssnittet i gränssnittsbyggaren.
Ett uttag definieras så här:
IBOutlet ID SomeElement;
IBOutlet-satsen kan också sättas med egendomsdeklarationen som sådan:
@property (nonatomic, behåll) IBOutlet id someElement;
Hur som helst är acceptabelt. En åtgärd är en speciell typ av metod som kallas som svar på en händelse (dvs användaren tappar en knapp) som du definierar i gränssnittsbyggare. En åtgärd definieras genom att metoderna returnerar IBAction-typen, så här:
-(IBAction) someAction: (id) avsändare;
Vi diskuterar försäljningsställen och åtgärder senare senare.
Det första du behöver göra innan du kan spela med Interface Builder är att skapa ett nytt Xcode-projekt. Öppna Xcode-klick Skapa ett nytt Xcode-projekt och välj sedan ett visningsbaserat projekt. Titel det "räknare".
NOTERA:
Se till att du har satt ditt mål till iPhone och inte iPad i Xcode.
Nu när du har ett Xcode-projekt vill vi ändra den automatiskt skapade CounterViewController för att definiera våra försäljningsställen och åtgärder. Öppna filen CounterViewController.h och ändra den så att den ser ut som följande:
#importera@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger räkna; @property (nonatomic, behåll) UILabel * countLabel; @property (nonatomic) NSInteger count; - (IBAction) lägg till: (UIButton *) avsändare; - (IBAction) sub: (UIButton *) avsändare; - (tom) displayCount; @slutet
Detta definierar ett heltal för att hålla räkningen och ett uttag till en etikett som visar den räkningen. Det definierar också en uppsättning metoder som kommer att ta emot händelser från IB. Nu måste vi definiera ett genomförande för dessa åtgärder, så öppna motsvarande CounterViewController.m-fil och gör följande ändringar till det:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; - (IBAction) lägg till: (UIButton *) avsändare count ++; [self displayCount]; - (IBAction) sub: (UIButton *) avsändare count--; [self displayCount]; - (void) displayCount [self.countLabel setText: [[NSString alloc] initWithFormat: @ "% d", self.count]]; ... - (void) dealloc [countLabel release]; [super dealloc]; @slutet
Detta är ganska enkelt fil. Allt det gör är att när ringen aktiveras ändras räkningen antingen upp eller ner och visar sedan räkningen på etiketten.
Expandera nu resursmappen i Xcode och du kommer att se tre filer. Två av dessa är Interfcae Builder .xib-filer. För nu kan du ignorera MainWindow.xib, vi kommer att fokusera på CounterViewController.xib. Öppna den nu, det här kommer att starta gränssnittsbyggare och du får se en skärm så här:
Det är dags att börja bygga vårt gränssnitt! Gå över till fliken Bibliotek och ta en knapp och dra den till din vy. Om du drar knappen om en stund kommer du märka att blåa guider dyker upp. Interfcae Builder ger dig olika guider som hjälper till att placera element i vyn. Du kommer att se detta mer när vi börjar placera fler element. Gör det två gånger. Hitta sedan en etikett och placera den på din åsikt.
Välj nu en av knapparna, gå till fliken attribut i inspektören och ändra dess titel till "+". Gör samma sak för den andra knappen, men ändrar istället titeln till "-". Dubbelklicka kan du också ändra titeln. Dubbelklicka på etiketten och ändra texten till "0", du kan också önska ändra textjustering till centrum, vilket kan göras på inspektörens attributflik.
Nu borde du ha ett gränssnitt som ser ungefär så här ut:
Det sista du behöver göra för att göra din diskappsarbete är att ansluta gränssnittet och källan.
Anslut CountLabel-uttaget till den aktuella etiketten. Detta kan göras genom att klicka på och dra från filen Ägareobjekt i dokumentfönstret till etiketten i vyn. Ett litet, grå fönster visas med två alternativ, en blir den countLabel vi definierade tidigare och den andra blir vyn (det här är ett standardutlopp som krävs för visningskontrollerna, det kommer att ha en streck för att indikera att den redan är ansluten till någonting ). Klicka på countLabel-alternativet för att välja det.
Nu ska vi ansluta våra knappar till våra tillägg och subtrahera åtgärder. För våra ändamål kan du helt enkelt styra-klicka och dra från knapparna till filens ägarobjekt (och välj lämplig åtgärd för varje knapp), men observera att om du öppnar anslutningspanelen på inspektören (som du kan komma till genom att trycka på kommandot + 2), listar den en rad olika händelser som du kan använda för att utlösa dina handlingar och låta dig skapa ett stort utbud av funktioner från en enkel knapp. Som standard använder den händelsen Touch Up Inside.
Nu kan du växla tillbaka till Xcode och klicka på bygg och kör, och din applikation ska startas i simulatorn. Om du har kopplat allt på rätt sätt borde du kunna lägga till och subtrahera från räkningen och du bör se etikettändringen för att återspegla det.
En UISegmenterad kontroll är som ett par knappar som fastnar ihop, med en stor skillnad. Det allmänna syftet med en UISegmentedControl är inte att vara som en knapp, men för val. Låter utöka funktionaliteten hos vår Counter app, med en segemtned kontroll för att tillåta användaren att välja mellan antingen "räkna med en" eller "räkna med två" lägen.
Det första du behöver göra är att öppna filen CounterViewController.h i Xcode och lägga till en IBAction-definition och ett heltal för att lagra vårt läge.
Ändra det så att det ser ut så här:
#importera@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger räkna; NSInteger-läge @property (nonatomic, behåll) UILabel * countLabel; @property (nonatomic) NSInteger count; @property (nonatomic) NSInteger-läget; - (IBAction) lägg till: (UIButton *) avsändare; - (IBAction) sub: (UIButton *) avsändare; - (IBAction) -läge: (UISegmentedControl) avsändare; - (tom) displayCount; @slutet
Det här är en bra tid att påpeka att faktum att så här långt har definitionerna i handledningen alla definierat en klasstyp för avsändare, vilket begränsar objekten som kan kalla denna åtgärd till de av den här klasstypen. Jag tycker att detta är en bra övning eftersom det hindrar dig från att ansluta saker felaktigt. Det bör dock noteras att detta är inte ett krav, dessa definitioner kan lika lätt ha varit:
- (IBAction) lägga: (id) avsändare; - (IBAction) sub: (id) avsändare; - (IBAction) läge: (id) avsändare;
Tillåter att något objekt ringer dem. Hur som helst måste du göra genomförandet av dessa åtgärder matcha, så öppna CounterViewController.m och gör dessa ändringar:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; @synthesize mode; - (IBAction) lägg till: (UIButton *) avsändare switch (mode) fall 0: count ++; ha sönder; fall 1: räkna + = 2; ha sönder; standard: break; [self displayCount]; - (IBAction) sub: (UIButton *) avsändare switch (läge) case 0: count--; ha sönder; fall 1: räkna - = 2; ha sönder; standard: break; [self displayCount]; - (IBAction) -läget: (UISegmentedControl) avsändare mode = sender.selectedSegmentIndex; … @slutet
Nu behöver vi ändra gränssnittet. Så öppna CounterViewController.xib.
Gå över till biblioteket och dra i en segmenterad kontroll. Nu måste vi konfigurera det. Se till att den segmenterade kontrollen är vald och öppna inspektörens attributpanel. Flyttar ner ett litet sätt under segmentrutan, som ska läsa "segment 0 - först", vi vill ändra titeln till "En". Dra nu ner segmentmenyn och byt till segmentet "segment 1 - sekund" och byt titel till "Two".
Vi måste också ansluta detta till vår åtgärd. Öppna anslutningspanelen och dra från "Value Changed" till File Owner. Välj läget "action".
Det är allt. Du borde nu ha en räknare som kan räkna upp och ner av en eller två.
Hittills har de element vi pratat om ha många möjliga användningsområden och väldigt få begränsningar. Verktygsfältet är det första elementet vi kommer att diskutera som har restriktioner i iPhone Human Interface Guidelines. Om du planerar att använda verktygsfält tungt bör du se de här riktlinjerna, men kortfattat bör verktygsfält alltid placeras längst ner i gränssnittet och de ska bestå av knappar med ikoner som inte är större än 44px med 44px. Det är inte ett navigationselement, och det är en viktig skillnad. Om du vill använda den för att ändra visa eller lägen i din app, använd en flik i stället. Men om du följer dessa riktlinjer än verktygsfältet är mycket enkelt; det är enkelt en samling knappar på en stapel, och kan därför användas precis som du skulle ha en massa knappar. Den enda skillnaden är att Apple ger en större uppsättning systeminställningar än de gör för standardknappar. Du kan också placera distanselement i verktygsfältet mellan knapparna för att ändra positionerna. Låt oss prova det.
Gå tillbaka till CounterViewController.h och lägg till följande rad efter dina tidigare åtgärdsdeklarationer.
- (IBAction) reset: (UIBarButtonItem *) avsändare;
Notera:
Avsändaren här är en UIBarButtonItem, inte en UIToolbar. Varje UIBarButtonItem skickar den egna händelsen, UIToolbar är helt enkelt en behållare.
Lägg nu till CounterViewController.m, följ de åtgärder som vi definierade tidigare:
- (IBAction) återställ: (UIBarButtonItem *) avsändare count = 0; [self displayCount];
Tillbaka i IB, låt oss släppa en UIToolbar från biblioteket till utsikten, notera att den redan har en knapp på den. För att välja den knappen måste du dubbelklicka på den (det första klicket väljer verktygsfältet, den andra väljer knappen).
Gå till attributen i inspektören. Du märker att det finns betydligt färre alternativ för en UIBarButtonItem än för andra element. Det beror på att verktygsfält ska vara enhetliga, så att saker som färg måste ställas in för hela verktygsfältet (du kan prova detta genom att bara klicka en gång på verktygsfältet och sedan öppna attributets inspektör). Ändra knappens identifierare till "Trash".
Anslut sedan knappen till återställningsakton genom att dra över till filens ägare. Om du kör din app ska du nu kunna räkna räkningen genom att trycka på papperskorgen.
Omkopplaren är sannolikt det mest begränsade elementet som tillhandahålls av Interface Builder. Det har nästan inga anpassningsalternativ. Den har ett "On" -tillstånd och ett "Av" -läge. Du kan inte ändra etiketter eller färger. Brytare måste alltid se ut på samma sätt oavsett vad. Trots att de är mycket begränsade är omkopplarna användbara vid tillfället. Inställningar tenderar till exempel att använda stora omkopplare, och omkopplaren kan vara till hjälp för att slå på och av funktioner i din app. Det är precis vad vi ska göra. Vi ska göra en strömbrytare som slår på och av om vi kan räkna med negativ i vår app.
Det första du gör är att göra följande ändringar av din CounterViewController.h:
#importera@interface CounterViewController: UIViewController ... Boolean negativ; ... @property (nonatomic) Boolean negativ; ... - (IBAction) negativSwitch: (UISwitch *) avsändare; ... @end
Detta definierar helt enkelt en booleska som kommer att lagras om vi är negativa lägen eller inte och en åtgärd som skickas av en UISwitch som kommer att ändra den booleska. Så nu kan vi definiera vår åtgärd och göra resten av vår ansökan svara på vår nya negativa booleska. Ändra CounterViewController.m-filen för att matcha följande:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize negativ; ... - (IBAction) sub: (UIButton *) avsändare switch (läge) fall 0: count--; ha sönder; fall 1: räkna - = 2; ha sönder; standard: break; om (negativ) // Detta kontrollerar helt enkelt om negativt läge är avstått om (count < 0) //and if count is negative count = 0; //sets it back to zero [self displayCount]; … - (void)viewDidLoad negative = TRUE; - (IBAction)negativeSwitch:(UISwitch*)sender negative = sender.on; if (!negative) if (count < 0) count = 0; [self displayCount];
Allt som görs här ställer in det negativa läget baserat på omkopplarens status och sedan när en subtraktion händer kontrollerar vilket läge strömbrytaren för närvarande är i (lagrad i negativ boolean).
Växla tillbaka till gränssnittsbyggare, hitta en omkopplare i biblioteket och släpp den i vyn. Nu måste vi koppla omkopplaren till åtgärden, men när det gäller omkopplaren som den segmenterade kontrollen vill vi använda värdet ändrad händelse, inte röra upp inuti. Gå så till fliken Kopplingar i inspektören och dra över till Filens Ägare och anslut till negativMode: Åtgärd. Du kan också vilja lägga märke för att markera vad växeln gör.
Vid denna tidpunkt bör din ansökan se ut som ovan.
Det sista och det mest komplicerade elementet vi kommer att diskutera är skjutreglaget. Slider representerar en rad värden (som du kan ange), som ändras när du flyttar längs reglaget. Detta element är enormt anpassningsbart, men de flesta av dessa anpassningar måste göras i kod och ligger utanför ramen för denna handledning. Vi ska använda den för att göra en multiplikator och divider för vår räknare.
Det första vi behöver är, du gissade det, en annan åtgärd. Lägg till följande i CounterViewController.h med resten av dina handlingsdeklarationer:
- (IBAction) multiplikator: (UISlider *) avsändare;
Nästa behöver vi implementera multiplikations- och delningsfunktionen för vår räknare så ändra din CounterViewController.m så här:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize mult; ... - (IBAction) lägg till: (UIButton *) avsändare count + = mode; räkna * = mult; om (! negativ) if (count < 0) count = 0; [self displayCount]; - (IBAction)sub:(UIButton*)sender count -= mode; count /= mult; if (!negative) if (count < 0) count = 0; [self displayCount]; - (IBAction)mode:(UISegmentedControl*)sender mode = sender.selectedSegmentIndex+1; //Don't forget to add the +1 here - (IBAction)multiplier:(UISlider*)sender mult = sender.value; … - (void)viewDidLoad negative = TRUE; mult=1; … @end
Nu när du lägger till eller dras av multipliceras numret eller delas av värdet på skjutreglaget. Om skjutreglaget är vid 1 (vilket kommer att vara den nedre gränsen) fungerar räknaren normalt vid 9 (vilket är det maximala).
Tillbaka i IB, ta tag och släpp en skjutreglage från biblioteket till vyn och öppna dess attribut i inspektören. Det första du bör märka här är värdena. Vi vill ändra dem lite. Som tidigare nämnts vill du att minimivärdet är 1, det högsta värdet är 9 och det ursprungliga värdet ska vara 1. Avmarkera fortsättningsrutan så att vi inte får någon decimal där och det är det. Anslut bara "value changed" -händelsen till din reglage till filens ägare och du har multiplikatorn!
Din sista app ska se ut som den som visas nedan:
Denna handledning har knappt repad ytan av vad som är möjligt i Interface Builder. Det är en extremt kraftfull applikation. Idag har vi täckt grundanvändningen av IB och de mest grundläggande elementen i IB-biblioteket. Denna handledning har visat hur du kan skapa en helt funktionell applikation, med hjälp av gränssnittsbyggare, utan mycket kod. Kom alltid ihåg att konsultera iPhone Human Interface Guidelines innan du gör något drastiskt, och för mer gränssnittinspiration och hjälp, var noga med att kolla Apples UICatalog.
Accentsconagua