Reaaliaikaisen edistymärenkaan rakentaminen
Yhdistäkää canvas ja tila widgetiksi.
Reaaliaikaisen edistymärenkaan 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.
Tavoite
On aika rakentaa jotain todellista: progress ring -edistymisrengas, joka täyttyy arvon kasvaessa. Siinä yhdistyvät canvas-piirtäminen ja elävä Compose-tila.
Kaari, ei ympyrä
Rengas on oikeastaan arc eli kaari. Piirrämme taustalle haalean kokonaisen ympyrän ja sen päälle kirkkaan kaaren, joka näyttää tähänastisen edistymisen.
Tallenna edistyminen
Tallenna arvo state-tilaan, jotta rengas piirretään uudelleen sen muuttuessa. Liukuluku välillä 0f–1f vastaa luontevasti aluetta nollasta täyteen.
var progress by remember { mutableStateOf(0.25f) }Piirrä taustaraita
Maalaa ensin taustarengas drawCircle-kutsulla ja Stroke-tyylillä. Pehmeänharmaa raita näyttää koko reitin, jonka edistyminen täyttää.
drawCircle(
color = Color.LightGray,
style = Stroke(width = 24f)
)Tutustu drawArc-kutsuun
Pääosassa on drawArc. Se piirtää ympyrän osan, jonka määrittävät aloituskulma ja pyyhkäisykulma, molemmat asteina.
drawArc(
color = Color.Blue,
startAngle = -90f,
sweepAngle = 90f,
useCenter = false
)Aloita ylhäältä
Kulma 0 osoittaa oikealle, joten käytämme startAngle-arvoa -90f aloittaaksemme ylhäältä. Se tuntuu edistymisen ilmaisimessa luontevalta.
Pyyhkäise edistymisen mukaan
Kokonainen ympyrä on 360 astetta, joten sweepAngle on yksinkertaisesti edistyminen kerrottuna luvulla 360. Arvolla 0.5f kaari kattaa täsmälleen puolet renkaasta.
val sweep = progress * 360f
drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false)useCenter pysyy epätotena
Pidä useCenter-arvo epätotena, jotta piirrät renkaan osan etkä täytettyä piirakkasektoria. Stroke-tyylillä tuloksena on siisti, pyöristetty raita.
drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(width = 24f, cap = StrokeCap.Round))Animoi arvo
Kääri arvo animateFloatAsState-kutsuun, jotta muutokset liukuvat paikoilleen hyppäämisen sijaan. Rengas kasvaa silloin tasaisesti kohti jokaista uutta tavoitetta.
val animated by animateFloatAsState(targetValue = progress)Lisää liukuväri
Vaihda tasainen väri sweepGradient-siveltimeen, niin rengas saa eloisan ja modernin ilmeen värien kiertäessä sen ympäri.
drawArc(brush = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)), startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(24f))Aseta selite kerrokseksi
Sijoita prosenttiosuuden näyttävä Text keskitettynä Canvasin päälle Box-säilöön. Nyt komponenttisi näyttää valmiilta ja viimeistellyltä ohjaimelta.
Pikatarkistus
Miten muutat väliltä 0f–1f olevan edistymisarvon kaaren pyyhkäisykulmaksi?
Kertaus
Rakensit elävän renkaan: taustaympyrän, edistymisen kertoimella 360 määritetyn drawArc-kaaren, animoidun tilan ja liukuväriviivan. Hienoa työtä! 🌀
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 ”Reaaliaikaisen edistymärenkaan rakentaminen” ilmainen?
Kyllä – oppitunnin ”Reaaliaikaisen edistymärenkaan 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 ”Reaaliaikaisen edistymärenkaan rakentaminen”?
Yhdistäkää canvas ja tila widgetiksi. 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 ”Reaaliaikaisen edistymärenkaan 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
- DrawScope: viivat, suorakulmiot ja ympyrät
- Polut, liukuvärit ja sekoitustilat
- drawWithCache ja suorituskyky
- Reaaliaikaisen edistymärenkaan rakentaminen