Bedre kode: Grunnleggende om UISlider for Apple iOS

Skyvekontrollene er en flott måte å la brukerne enkelt angi tallverdier i appene dine. I metronomappen som er vist nedenfor, har jeg for eksempel brukt en glidebryter for å la brukeren raskt stille inn tempoet. Legg også merke til at glidebryteren har et tilpasset utseende, som ble oppnådd ved å bruke tilpassede bilder for glidebryteren og sporet. I dette innlegget lærer vi det grunnleggende om glidebryteroperasjoner og også hvordan du oppretter en tilpasset glidebryter som ligner den som er vist nedenfor. For dette prosjektet må du laste ned de tre tilpassede bildefilene vi har levert.

Start nytt prosjekt

Åpne Xcode, og velg Ny fra Fil-menyen og deretter Ny prosjekt. Et nytt arbeidsområdevindu vises, og du vil bli presentert med flere applikasjonsmaler du kan velge mellom.

På applikasjonen til venstre velger du Program fra iOS-delen. Velg program for enkeltvisning og klikk på Neste-knappen.

Figur A

I neste rute skriver du inn CustomSlider for produktnavnet og com.myappcompany som firmaidentifikator. (Du må gjerne bytte ut ditt eget produktnavn og firmanavn).

La klasseprefikset være som den er. Det skal være blankt - XYZ er bare et hint til et sted.

Forsikre deg om at bare Bruk automatisk referansetelling og bruk Storyboards er sjekket.

Sett Device Family til iPhone, og klikk Neste.

Figur B

En ny rute vises der du spør hvor du vil lagre prosjektet. XCode oppretter en CustomSlider-prosjektmappe i katalogen du velger.

Når prosjektet er opprettet, vil Xcode åpne et arbeidsvindu med det nye prosjektet.

Forbereder deg på å motta glidebryterarrangementer

Når brukeren beveger glidebryteren frem og tilbake, vil den sende hendelser for å fortelle oss at verdien endrer seg. Vi må tilby en metode for glidebryteren å ringe, så i Files and Groupes-ruten klikker du på ViewController.m og legger til følgende metode direkte under ViewDidLoad:

 - (IBAction) skyveknappen Forandret: (id) avsender 
 { 
 UISlider * skyveknapp = (UISlider *) avsender; 
 float val = glider.verdi; 
 self.myLabel.text = NSString stringWithFormat: @ "% f", val; 
 } 

IBAction er en makro som gjør vår metode tilgjengelig for Interface Builder, som vi trenger når vi konfigurerer brukergrensesnittet. Når glidebryteren kaller metoden vår, gir den en referanse til seg selv som avsender, men det er ganske enkelt en generisk objektreferanse. Før vi kan referere til glidebryterenes egenskaper, må vi derfor støpe den som et UISlider-objekt. Glidebryteren returnerer alltid en flytende punktverdi, og resten av metoden vår endrer ganske enkelt teksten på etiketten for å vise den verdien.

Sette opp brukergrensesnittet

Klikk nå på MainStoryboard.storyboard. Når det åpnes i Interface Builder, velger du Vis-objektet, klikker på Attributterinspektøren og endrer deretter visningens bakgrunnsfarge til en farge du velger.

Gå deretter til Objektbiblioteket som ligger på nedre høyre side av arbeidsområdet og dra et etikett på utsikten og sentrer det rett over midten av utsikten. Dra deretter en skyveknapp på utsikten og sentrer den rett under etiketten. Foreløpig ikke endre størrelsen på glidebryteren. Figur C viser situasjonen så langt.

Figur C

Deretter klikker du på Assistant Editor øverst til høyre i Xcode-grensesnittet.

Figur D

Assistent Editor vil vise ViewController.h i en tilstøtende rute som vist i figur E. Klikk på etiketten for å velge den, trykk deretter kontrolltasten og dra fra etiketten til rett under ordet "@ interface" i ViewController.h. Når du slipper fingeren fra musen, vises tilkoblingsdialogen. Skriv inn "myLabel" i feltet Navn og trykk Enter. Du har nå opprettet et utløp som heter myLabel og koblet det til UIL-etiketten i xib-filen. For mer informasjon om uttak, se Komme i gang med iOS-visninger og visningskontrollere: Del 1. Gjør det samme for glidebryteren ved å bruke navnet "mySlider".

Figur E

Den siste tingen vi trenger å gjøre er å koble glidebryteren med glidebryterenChanged: -metoden. Kontroller dra fra glidebryteren til View Controller som vist i figur F. Når du slipper musen, vises en popup. Velg glidebryteren forandret: for å opprette tilkoblingen, og klikk deretter på Standard Editor-knappen for å fjerne Assistant Editor-vinduet fra skjermen.

Figur F

Nå, bygg og kjør appen. Legg merke til hvordan verdien endres fra 0 til 1 når du beveger glidebryteren. Gå tilbake til storyboard og strekk glidebryteren slik at den er nesten bredden på skjermen og kjør appen igjen. Legg merke til hvordan verdien nå endres mye mer gradvis fordi glidebryteren har et større bevegelsesområde.

Ofte er det mest nyttig å ha glidebryterenes heltallverdier innenfor et spesifisert område. For å gjøre det, gå til ViewController.m og endre viewDidLoad: som vist nedenfor:

 - (ugyldig) viewDidLoad 
 { 
 super viewDidLoad; 
 self.mySlider.minimumValue = 30; 
 self.mySlider.maximumValue = 240; 
 } 
 Gjør deretter følgende endringer til glidebryteren: 
 - (IBAction) skyveknappen Forandret: (id) avsender 
 { 
 UISlider * skyveknapp = (UISlider *) avsender; 
 NSInteger val = lround (glider.verdi); 
 self.myLabel.text = NSString stringWithFormat: @ "% d", val; 
 } 

Når vi bygger og kjører på nytt appen denne gangen, returnerer glidebryteren heltallverdier i det spesifiserte området vårt fra 30 til 240. Legg merke til at lround-funksjonen konverterer flytepunktverdien til et heltall.

Å kle opp glidebryteren

En glidebryters utseende kan endres på flere måter ved å endre dens egenskaper. I vårt tilfelle kommer vi til å endre både tommelbildet som brukeren berører, og sporet som den kjøres på. Det er tre egenskaper i spill, som vist i figur G.

Figur G

Dra de tre bildefilene du lastet ned til prosjektet ditt rett under ViewController.m. Forsikre deg om at "Kopier elementer til målgruppens mappe" er merket av før du klikker Fullfør.

Figur H

Legg deretter til følgende linjer til viewDidLoad:

 - (ugyldig) viewDidLoad 
 { 
 super viewDidLoad; 
 self.mySlider.minimumValue = 30; 
 self.mySlider.maximumValue = 240; 
 self.mySlider setThumbImage: UIImage imageNames: @ "slider_tab.png" 
 forState: UIControlStateNormal; 
 self.mySlider setThumbImage: UIImage imageNames: @ "slider_tab.png" 
 forState: UIControlStateHighlighted; 
 self.mySlider setMinimumTrackImage: UIImage imageNames: @ "slider_minimum.png" 
 forState: UIControlStateNormal; 
 self.mySlider setMaximumTrackImage: UIImage imageNames: @ "slider_maximum.png" 
 forState: UIControlStateNormal; 
 } 

Tommelfingerbildet endres til en uthevet tilstand når du berører den, så vi må spesifisere vårt tilpassede bilde for både berørte (uthevede) og uberørte (normale) tilstander på glidebryteren.

Bygg og kjør appen en gang til og voila! Vi har nå en mye fin glidebryter som vist nedenfor.

Vi har nettopp klødd på overflaten av hva som er mulig med UISlider, men du bør nå ha det grunnleggende godt i hånden. Husk som alltid å lese Apples utmerkede dokumentasjon for å få en dypere forståelse. Hvis du vil vite om metronome-appen som er vist ovenfor, kan du gjerne kontakte meg ved å bruke kontaktinformasjonen nedenfor.

Les også:

  • Forstå tilstandene og overgangene til en iOS-app
  • Velg riktig tastatur på skjermen for iOS-appen din
  • Graner opp iOS-appene dine med enkle animasjoner: Del 1

© Copyright 2021 | pepebotifarra.com