I den forrige veiledningen forklarte jeg noen få nye funksjoner i iOS 7 som lar deg legge til subtile animasjoner og større interaktivitet med overraskende liten kode for å simulere ekte verdensfysikk. I denne veiledningen viser jeg deg hvordan du lager en skjult form på en søkeresultatside.
Vi bruker tyngdekraftenes adferd og en kollisjonsadferd for å kontrollere om skjemaet er synlig eller ikke. Vi får også en subtil sprettings animasjon gratis ettersom panelet faller i visningen. La oss komme i gang.
2. Opprett prosjektet
Åpne Xcode og velg Nytt> Prosjekt ... fra Fil Meny. Velge Enkeltvisningsprogram fra listen over iOS-applikasjon maler og klikk neste.
Skriv inn et navn på prosjektet ditt, jeg har kalt min Dynamics. Skriv inn organisasjonens navn, bedriftsidentifikator og klasse prefiks. Velge iPhone fra enheter liste, klikk neste, og velg et sted for å lagre prosjektet.
3. Opprett Storyboard
Trinn 1
Åpen Main.storyboard og slett visningen kontrolleren som er der inne som standard.
Steg 2
Dra ut en Navigasjonskontroller fra Objektbibliotek. Xcode 5, er navigasjonskontrollens rotasjonsvisningskontroller som standard a UITableViewController forekomst. Velg tabellvisningskontrollen og slett den. Vi lager en tilpasset visningskontroller fra dette prosjektet.
Trinn 3
Dra a Vis kontrolleren fra Objektbibliotek og plasser den til venstre for navigasjonskontrollen. Høyreklikk navigeringskontrollen for å vise Tilkoblingsinspektør. Klikk pluss til venstre for root view controller og velg visningsregulatoren du nettopp har lagt til.
Trinn 4
Velg navigasjonselementet i visningsregulatoren og endre tittelen til Søkeresultater i Attributtsinspektør til høyre.
Trinn 5
Bygg og kjør prosjektet for å sikre at visningene og visningskontrollene er koblet til riktig.
4. Klargjøre View Controller
Trinn 1
Åpne Prosjektnavigatoren på visningshåndteringsens headerfil. Legg til en UITableView eiendom, a UIView eiendom for skjemavisningen, a UIBarButtonItem for knappen for å vise skjemaet, og a UIButton å skjule skjemaet. Legg til en handling for UIBarButtonItem så vel som en handling for UIButton.
Visningskontrollerklassen må også være i overensstemmelse med UITableViewDataSource og UITableViewDelegate protokoller. Visningsregulatorens headerfil skal nå se slik ut:
I visningsregulatorens implementasjonsfil, rediger du viewDidLoad metode. Etter [super viewDidLoad], Fortell UITableView eksempel å bruke UITableViewCell klasse for å fylle seg selv:
Deretter implementerer du UITableViewDataSource protokoll i visningsregulatorens implementeringsfil. Tabellen skal ha en seksjon, 100 rader, og hver rad skal vise cellens radnummer.
revidere Main.storyboard og velg visningskontrolleren som vi la til tidligere. Bytt klasse til ViewController i Identitetsinspektør slik at vi kan koble de utsalgene vi opprettet tidligere.
Steg 2
Dra a UITableView eksempel fra Objektbibliotek i visningsregulatorens visning. Kontroller at tabellvisningen sitter øverst på visningskontrollen og dekker den helt. Bruke Tilkoblingsinspektør å sette visningskontrolleren som tabellvisning datakilde og delegat.
Trinn 3
Bygg og kjør din søknad. Du bør se et bord med 100 rader som inneholder hver rad som viser radenummeret.
6. Legg til filterformularen
Trinn 1
I Main.storyboard dra a UIView forekomst til visningskontrolleren. Pass på at visningen ikke legges til som tabelloversiktens overskrift. Du kan bekrefte dette ved å åpne Dokumentoversikt til venstre og kontrollerer at visningen du nettopp har lagt til er en peer av tabellvisningen, ikke et undervisning.
Steg 2
Sett visningen bakgrunnsfargen til en lysegrå, dens opprinnelse til (0,0, 0,0), og dens størrelse til (320,0, 568,0) slik at den fyller hele skjermen og dekker bordvisningen.
Trinn 3
Koble denne visningen til filterFormView uttak som vi erklærte i oversiktsregulatorens headerfil.
Trinn 4
Legg til noen kontroller i visningen, tenk at det er et skjema for å filtrere søkeresultatene som presenteres i tabellvisningen. Legg til en rekke tekstfelt og en knapp som vist på skjermbildet nedenfor.
Trinn 5
Koble til Søke om knapp med applyFilterButton uttak vi erklærte tidligere og koble til Berør på innsiden hendelse til applyFilterButtonTapped handling.
Trinn 6
Endre visningskontrollens implementasjonsfil og legg til en tom metodedeklarasjon for applyFilterButtonTapped slik at programmet ikke krasjer hvis du ved et uhell trykker på knappen.
- (ugyldig) applyFilterButtonTapped
Trinn 7
Bygg og kjør din søknad. Du bør se skjemaet som dekker tabellvisningen.
7. Legg til Bar-knappen-elementet
Trinn 1
Legg til en UIBarButtonItem eksempel på navigasjonslinjen. Endre tittelen til Filter og koble den til filterButton utløp vi erklærte i tittelkontrollens headerfil. Koble til filterButtonTapped handling til filterButton bar knapp element.
Steg 2
Bytt tilbake til visningsregulatorens implementeringsfil, og legg til en tom metodedeklarasjon for filterButtonTapped slik at programmet ikke krasjer hvis du trykker på bar-knappen.
- (void) filterButtonTapped
8. Legg til dynamiske oppføringer
Trinn 1
Før vi legger til dynamisk oppførsel, er det verdt å ta et sekund å tenke på hva vi vil at våre oppførsel skal gjøre, og hvordan vi kan oppnå det.
Når filterformen ikke er synlig, bør den være på skjermen. Vi kan bruke en UIGravityBehavior opptrer oppover for å hindre at den faller ned. Når Filter knappen er tappet, tyngdekraften skal begynne å virke nedover med form som faller til syne som et resultat.
Vi trenger også en UICollisionBehavior med grenser slik at skjemaet vil stige for å være like utenfor skjermen og bare falle så langt som på bunnen av skjermen. Neste skjermbilde viser de to endeformene i skjemaet, med de rosa linjene som angir kollisjonsgrensene. La oss oversette dette til kode.
Steg 2
I ViewController.h erklære a UIDynamicAnimator eiendom. Vi overfører våre oppføringer til denne animatoren, som bestemmer hva som må skje med skjemavisningen. Erklære a UIGravityBehaviorog a UICollisionBehavior.
I viewDidLoad, initial animatør som en dynamisk animator med visningskontrollørens visning som referansevisning. Neste, initialiser tyngde og konfigurer den til å opptre i en oppadgående retning med en vinkel på -M_PI_2 på filterForm utsikt.
Det er nå på tide å initialisere visningsregulatorens kollisjon eiendom ved å påkalle initWithItems: og passerer en matrise med bare self.filterForm i det. Vi legger til to grenser, en i bunnen av visningen og en øverst på utsikten. Slik oppdateres implementeringen av viewDidLoad ser ut som:
Når filterknappen er tappet, vil vi deaktivere knappen for å unngå å forvirre brukeren, og vi vil også at tyngdekraften skal begynne å fungere i en nedadgående retning for å gjøre skjemaet synlig. Oppdater filterButtonTapped handling som følger:
Trinn 5
Når Søke om knappen i skjemavisningen er tappet, vi vil at tyngdekraften skal begynne å opptre i en oppadgående retning for å sikre at skjemaet glir av skjermen. Vi aktiverer også Filter knappen igjen. Oppdater applyFilterButtonTapped handling som følger:
Før vi bygger og kjører prosjektet for siste gang, la oss flytte filterskjemaet på skjermen, slik at brukerne ikke ser skjemabildet på skjermen når programmet starter. Sett y posisjon for filterformevisningen til -568.
Steg 2
Bygg og kjør programmet. Trykk på Filter knappen og skjemaet skal glide inn i visningen og falle på plass med et forsiktig spor. Trykk på Søke om knappen og se skjemaet glatt på skjermen igjen.
Konklusjon
Det tok litt arbeid for å få brukergrensesnittet satt opp, men når vi hadde gjort det, var det en film å legge til en fysikkbasert animasjon. Det tok oss bare noen få linjer med kode.
Vi trengte ikke å kode hvordan fysikken - som sprettingen fungerte. Takket være UIKit Dynamics behøvde vi bare å spesifisere hvilke oppføringer vi ønsket og la UIDynamicAnimator objekt gjør jobben for oss.
Share
Accentsconagua
