SwiftUI Academy · Oppitunti

Välilehtipalkin rakentaminen

Ryhmittele näytöt TabViewn alle nimiöiden avulla

Oppitunti 1/413 vaihetta

Välilehtipalkin rakentaminen on ilmainen SwiftUI Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu SwiftUI Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. SwiftUI Academy-kurssilla on yhteensä 4 oppituntia.

Välilehtipalkin tehtävä

tab bar sijaitsee sovelluksen alareunassa ja antaa käyttäjien siirtyä muutaman päätason näytön välillä yhdellä napautuksella. 📱

Tutustu TabViewiin

SwiftUIssa tällainen palkki rakennetaan TabView-näkymällä. Se sisältää useita näyttöjä, mutta näyttää niistä vain yhden kerrallaan.

TabView {
    HomeScreen()
    SettingsScreen()
}

Jokainen lapsi on välilehti

Jokaisesta suoraan TabViewn sisälle sijoitetusta näkymästä tulee yksi tab-välilehti. Kaksi lapsinäkymää tarkoittaa palkissa kahta välilehteä.

Välilehden nimeäminen

Ilman otsaketta välilehdellä ei näy mitään hyödyllistä. tabItem-modifikaattori antaa kullekin välilehdelle kuvakkeen ja tekstin.

HomeScreen()
    .tabItem {
        Label("Home", systemImage: "house")
    }

Labelin käyttäminen tabItemissä

tabItemin sisälle sijoitetaan yleensä Label, joka yhdistää otsikon ja SF Symbol -kuvakkeen siistiksi, natiiviksi kokonaisuudeksi.

Esimerkki kahdesta välilehdestä

Tässä kokonainen TabView näyttää Koti- ja Asetukset-välilehdet, joilla kummallakin on oma icon-kuvakkeensa ja näyttönsä.

TabView {
    HomeScreen()
        .tabItem { Label("Home", systemImage: "house") }
    SettingsScreen()
        .tabItem { Label("Settings", systemImage: "gear") }
}

Yksi näyttö kerrallaan

TabView pitää kaikki välilehdet aktiivisina, mutta näyttää vain selected-valitun välilehden. Toisen välilehden napauttaminen vaihtaa näkyvän näytön heti.

Mihin TabView sijoitetaan

Tee TabViewista sovelluksesi root-juurinäkymä, jotta palkki pysyy näkyvissä aktiivisesta välilehdestä riippumatta.

Pidä välilehtien määrä pienenä

iOS näyttää enintään viisi välilehteä mukavasti. Pyri kolmeen–viiteen selkeään osioon, jotta käyttäjät eivät koskaan eksy. ✨

Välilehdet ovat itsenäisiä

Kukin välilehti hallitsee omaa sisältöään. Yhden välilehden vierittäminen tai muokkaaminen ei reset-nollaa muita, kun vaihdat välilehteä.

Natiivimainen tuntuma automaattisesti

Koska TabView on sisäänrakennettu, saat iOS-käyttäjien odottaman vakioulkoasun, sumennuksen ja animations-animaatiot.

Pikatarkistus

Tarkistetaan, miten annat välilehdelle kuvakkeen ja otsikon.

Vastaa interaktiivisessa oppitunnissa

Kertaus: välilehtipalkin rakentaminen

TabView muuttaa jokaisen lapsinäkymän välilehdeksi, ja tabItem antaa jokaiselle välilehdelle otsakkeen, jotta käyttäjät voivat siirtyä näyttöjen välillä yhdellä napautuksella. 🎉

Aloita maksutta

Opi Swift tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Välilehtipalkin rakentaminen” ilmainen?

Kyllä – oppitunnin ”Välilehtipalkin rakentaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko SwiftUI Academy-kurssin, päivitä CoddyKit PROhon. SwiftUI Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Välilehtipalkin rakentaminen”?

Ryhmittele näytöt TabViewn alle nimiöiden avulla Harjoittelet SwiftUI Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni SwiftUI Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin SwiftUI Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Välilehtipalkin rakentaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä SwiftUI Academy-oppitunnilla?

Kyllä. Jokainen SwiftUI Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: SwiftUI Academy