Mukautetun suunnittelujärjestelmän rakentaminen
Laajentakaa teemaa omilla tunnisteillanne.
Mukautetun suunnittelujärjestelmän rakentaminen on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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 Jetpack Compose Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.
Oletusasetuksia pidemmälle
Oikeat brändit tarvitsevat enemmän kuin Materialin sisäänrakennetut ominaisuudet. design system kokoaa värit, typografian, muodot ja ylimääräiset tunnisteet yhdeksi uudelleenkäytettäväksi teemaksi. 🏗️
MaterialThemen kääriminen
Aloittakaa kirjoittamalla oma AppTheme-Composable-komponenttinne, joka määrittää MaterialThemen asetukset ja tarjoaa koko sovellukselle yhden nimetyn aloituspisteen.
@Composable
fun AppTheme(content: @Composable () -> Unit) { /* ... */ }Välitä omat tunnisteesi
AppTheme-komponentin sisällä välitätte MaterialThemelle mukautetut colorScheme-, typography- ja shapes-rakenteet, jolloin jokainen näyttö perii brand-asetuksen automaattisesti.
MaterialTheme(
colorScheme = brandColors,
typography = brandType,
shapes = brandShapes
) { content() }Materialista puuttuu joitakin tunnisteita
Joillakin brändin arvoilla, kuten onnistumista ilmaisevalla vihreällä tai mukautetulla välistysyksiköllä, ei ole Material-roolia. Lisäätte ne omina extra tokens-tunnisteinanne.
Ylimääräisten värien säilyttäminen
Ryhmitätte ylimääräiset värit pieneen data class -luokkaan, joka tarjoaa siistin paikan brändin arvoille, joita Material ei tarjoa valmiina.
data class BrandColors(
val success: Color,
val warning: Color
)CompositionLocal
Jos haluatte jakaa mukautettuja tunnisteita puussa ilman parametrien välittämistä, käytätte CompositionLocal-mekanismia, joka on Composen sisäänrakennettu tapa välittää ympäristöarvoja.
Luokaa Local
Määrittelette oletusarvolla varustetun staticCompositionLocalOf-arvon, jolloin luotte väylän, josta mikä tahansa Composable voi lukea brändinne värit.
val LocalBrand = staticCompositionLocalOf { defaultBrand }Tarjotkaa arvot
AppThemessa ympäröitte sisällön CompositionLocalProvider-komponentilla ja välitätte brändinne tunnisteet puuhun MaterialThemen rinnalla.
CompositionLocalProvider(LocalBrand provides brand) {
MaterialTheme(/* ... */) { content() }
}Lukekaa mukautetut tunnisteet
Alapuolella oleva Composable lukee LocalBrand.current-arvon saadakseen mukautetut arvonne samalla tavalla kuin MaterialTheme tarjoaa omansa.
val success = LocalBrand.current.successTarjotkaa selkeä rajapinta
Monet tiimit tarjoavat olion, jotta kutsut näyttävät muodolta AppTheme.brand.success. Se toimii taustalla olevan CompositionLocalin helppokäyttöisenä julkisivuna.
Yksi totuuden lähde
Nyt värit, typografia, muodot ja mukautetut tunnisteet tulevat kaikki yhdestä teemasta, joten sovellus pysyy yhtenäisenä ja sitä on helppo kehittää. ✨
Pikatarkistus
Tarvitsette brändivärin, jolle Materialilla ei ole omaa roolia ja jota käytetään koko sovelluksessa. Mitä käytätte?
Kertaus: oma teema
Ympäröitte MaterialThemen AppTheme-teemalla, lisäsitte ylimääräisiä tunnisteita CompositionLocalin avulla ja annoitte sovelluksellenne yhden brändin totuuden lähteen. 🎉
Opi Kotlin 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
Usein kysytyt kysymykset
Onko oppitunti ”Mukautetun suunnittelujärjestelmän rakentaminen” ilmainen?
Kyllä – oppitunnin ”Mukautetun suunnittelujärjestelmän 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 Jetpack Compose Academy-kurssin, päivitä CoddyKit PROhon. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Mukautetun suunnittelujärjestelmän rakentaminen”?
Laajentakaa teemaa omilla tunnisteillanne. Harjoittelet Jetpack Compose Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Jetpack Compose Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Jetpack Compose Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Mukautetun suunnittelujärjestelmän 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ä Jetpack Compose Academy-oppitunnilla?
Kyllä. Jokainen Jetpack Compose 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
- MaterialTheme ja värimallit
- Typografia- ja muototunnisteet
- Tumma tila ja dynaaminen väri
- Mukautetun suunnittelujärjestelmän rakentaminen