Jetpack Compose Academy · Oppitunti

Väri, kohdistus ja ylivuoto

Värjätkää teksti ja käsitelkää pitkä sisältö hallitusti.

Oppitunti 3/413 vaihetta

Väri, kohdistus ja ylivuoto on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.

Muutakin kuin mustaa tekstiä

Oletusteksti käyttää teemasi väriä, mutta joskus tarvitset tietyn sävyn. Composessa voit määrittää color-värin ja käsitellä pitkää sisältöä helposti.

Väritä color-parametrilla

Välitä color-parametrille väri, jolla voit vaihtaa minkä tahansa Text-funktion värin. Käytä Color-arvoja suoraan tai hae semanttiset värit MaterialTheme-teemasta, jotta tulos mukautuu teemaan.

Text("Error", color = Color.Red)

Suosi teeman värejä

Kovakoodatut värit rikkoutuvat tummassa tilassa. Käytä MaterialTheme.colorScheme-arvoja, jotta tekstisi pysyy luettavana kaikilla taustoilla.

Text("Hi", color = MaterialTheme.colorScheme.primary)

Tasaa teksti

Hallitse vaakasuuntaista tasausta textAlign-parametrilla. Keskitä otsikko tai tasaa kappale molempiin reunoihin; asetuksella on vaikutusta vain, kun Text-funktiolla on täytettävää leveyttä.

Text("Centered", textAlign = TextAlign.Center)

Tasaus tarvitsee leveyttä

Jotta textAlign näkyisi, Text-funktion on oltava sanojaan leveämpi, yleensä fillMaxWidth-funktion avulla. Muuten se mukautuu tekstin leveyteen eikä mikään siirry.

Text("Hi", modifier = Modifier.fillMaxWidth(),
     textAlign = TextAlign.Center)

Ylivuoto-ongelma

Oikea data voi olla tilaasi pidempää. Ilman suunnitelmaa teksti voi venyttää asettelua tai leikkautua hankalasti. Overflow-käsittely ratkaisee tämän.

Rajoita maxLines-arvolla

Rajoita korkeutta asettamalla maxLines. Teksti piirtää enintään määritetyn määrän rivejä ja lopettaa sitten hiljaa, jolloin rivit pysyvät ennakoitavan kokoisina.

Text(longBio, maxLines = 2)

Näytä ellipsi

Yhdistä maxLines ja overflow = TextOverflow.Ellipsis, jolloin tekstin loppuun tulee kolme pistettä osoittamaan, että luettavaa on vielä lisää.

Text(longBio, maxLines = 1,
     overflow = TextOverflow.Ellipsis)

Muut ylivuototilat

TextOverflow tarjoaa myös Clip-tilan, joka leikkaa tekstin yksinkertaisesti reunasta, sekä Visible-tilan, joka sallii tekstin valua ulos. Ellipsis on käyttäjäystävällisin oletus. 🙂

Varaa tilaa vähimmäisriveille

Käytä minLines-parametria tilan varaamiseen, jotta kortin korkeus ei muutu, kun yhden luettelokohteen teksti on toista lyhyempi.

Text(caption, minLines = 2, maxLines = 2)

Viimeisteltyä ja ennakoitavaa tekstiä

Väri selkeyttää merkitystä, tasaus ohjaa katsetta ja overflow-säännöt pitävät asettelun vakaana riippumatta siitä, kuinka pitkäksi todellinen data kasvaa.

Pikatarkistus

Haluat yksirivisen tekstin, jonka loppuun tulee liian pitkänä kolme pistettä. Mitä asetat?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte värittämään tekstiä color-asetuksella, sijoittamaan sen textAlign-asetuksella ja hallitsemaan pitkää sisältöä maxLines- ja overflow-asetuksilla. Asettelu pysyy siistinä. ✨

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Väri, kohdistus ja ylivuoto” ilmainen?

Kyllä – oppitunnin ”Väri, kohdistus ja ylivuoto” 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 ”Väri, kohdistus ja ylivuoto”?

Värjätkää teksti ja käsitelkää pitkä sisältö hallitusti. 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 3/4.

Kuinka kauan ”Väri, kohdistus ja ylivuoto”-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

← Takaisin: Jetpack Compose Academy