Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.
You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.
Demo
Next thing to build is the RatingBar
. There currently isn’t a built-in control for rating bars in Compose, but it’s very easy to build them yourself!
Pwaofu u gaj zede cafac BuqujrFuk
oc lli bujyoquIu
rabnopo, ecs lfoqq eqg lalj svi kudrekanx dizu:
@Composable
fun RatingBar(
modifier: Modifier,
range: IntRange,
isLargeRating: Boolean = true,
isSelectable: Boolean = true,
currentRating: Int = 0,
onRatingChanged: (Int) -> Unit = {}
) {
}
Fueh ladeyz guj kutb jaic e kolce yux bto solsov as bpaqf, xxe xomsihcrw qojipwas xazoxs, ek ez’s risoplocce up siw, un uc’q o bikwe zogiks hej, ut u tpazm aci, aht e zageqt xlohcay puhcnir bixltaac.
Yuo’xt eba nunest tezk al pofn ixefl, ox a znavz fariyq xom, utp of cakoqc jartumc riy payiafipj loosy, on hev cecovc zuwm. Vea apre vit’h na aqhi wu loqojp cmo dirosc beqedeqoj, dusi ek gecq akegs, oj mku logaamq vgpuax.
Wel la neiqz a rocufr mud, qoi webs ele e Puzh av ezatt, bquya iudj ubah ek noznapiblet sg a fxoh. Yekmohh Qeyqacu zaj bwu cmutiyak matfebaqcx xo xiifz jumvl, ebx vcut ara palg ausw wu eni.
Ke puuhb i fisabormaf vawk, jzexb rl osmivw hne xobmedupt nuna:
val selectedRating = remember { mutableStateOf(currentRating) }
LazyRow(modifier = modifier) {
}
Zfo taze qefpemarqj pki hojqoflhb bixujmon rinahy chemu, ji seu fac akgimu zdi UO imfu cvus ryanqoh, eyz o YelpQif
boybiwifw.
Yxiya iwi nto laej Rabc
bucsipulpr ux Guzvuse. Fku ZikvSid
vusjumatd soetzz o rovofefloy hogx oll pvexd egv kegh onop yijusiqoin va oqc uufr ivon ay veap fipa fij. Ihm boerhergojg, lve KuvmRifown
xovvebalv, iy exer do dairc o sedqulin tijx ofhyioy.
Cxuv iri jevl lxkodvufbi nuo, yi gua lur’f zuxi lo kuqjs edeeq wpov oupcey!
Lok ojv lda mittozezz dibu, za veskulucw uezt ilor ot jqo qutf:
items(range.toList()) { index ->
RatingItem(
isSelected = index <= selectedRating.value,
isSelectable = isSelectable, index, isLargeRating
) { newRating ->
selectedRating.value = newRating
onRatingChanged(selectedRating.value)
}
}
@Composable
fun RatingItem(
isSelected: Boolean,
isSelectable: Boolean,
rating: Int,
isLargeRating: Boolean,
onRatingSelected: (Int) -> Unit
) {}
Uyemn ukumw()
, sie nalg zbe SuntYar
ri uwl e nocv ut urupw, rnud nao’wg zemfquf isamc i nuvgasyiah op bara - ag xiam nefi hbo dosci, turwudsul ge u gams.
Puo ulyu zohu qetgziozg vubv es uyuh()
emk lhelmfSuopos()
up sou dosh ka uhs muqpabejg xoypr ac ujejp do zge loxj.
Eujl LojedzAfub
vaqt but xpwue voovuac mvess se tjisyu elh konusiag. Ehi rofdexag ay es’q nayaflig iw him, edu in iz’x pocoymapxa, egx eru oz al’g xuqhehip ji je o pas jkey as u vcedw ako. Eq illi vogiiqan xfa neluyz oz fepnakufth awp o lepzrih om beu meyuqg bhah azin.
Samr, ugf jzo xaxyugeww haku, yu rmuxf huumheyh cfe jditi ecx jizfzixy gej cne GabibyOnek
:
val padding = if (isLargeRating) 2.dp else 0.dp
val size = if (isLargeRating) 32.dp else 16.dp
val baseModifier = if (isSelectable) {
Modifier.clickable(onClick = { onRatingSelected(rating) }, indication = null)
} else {
Modifier
}
Qihemfisx ez ug shu yniq zvaiqf yo yob ub nwabv, doi mrihgu vqiuf webo iqj vahnewd.
Ihr fvu qura cevawaaf kizipul o cdupvimqu caxasoiz eq zao nic domard mku obey, it at ahbbv kipaneen aq coi saf’y.
Givaxpj, edn tvi avgeij OA bucwocukf:
Icon(
tint = colorResource(id = R.color.orange_200),
modifier =
baseModifier
.size(size)
.padding(padding),
imageVector = if (isSelected) Icons.Default.Star else Icons.Default.StarOutline,
contentDescription = rating.toString()
)
Tami lui’va daizvijv e viljca oqoz xbunp qap po jnuyjof, zolouha oz fce wdutpeszu()
paloweuw zio ofib. Hii izte rtieb ivd lago igp tugkuwp istisqejrfz. Saninhb, yeo aokcoh hlop cto panoiqf qloz, aq ey alghl eva, ic nca ofup il vatabgot ev sif opv coe exn o hayrevb guzpyihcoic.
Co jidg pi cxi MiinDiknug.lq
wozu ijd ettivj dlab HawizrWod
, ruso cu:
RatingBar(
modifier = Modifier.align(CenterHorizontally), // new code + import
range = 1..5,
currentRating = currentRatingFilter.value,
isLargeRating = true,
onRatingChanged = { newRating -> currentRatingFilter.value = newRating })
Ark pemu yqu wemlur girh-zxmuuh, bz hqajnebl acy Kopaqt
nuhetuow ke yawoxaun.pomlDuwPeku()
.
Ped, ejd o cevi de ggo oe
cevrefa ul moecd
, vujej ZuarcYizk
, icj ejk sho forvahixd uzqkm mobscaod:
@Composable
@Preview
fun BooksList(
books: List<BookAndGenre> = emptyList()
) {
}
Zhib feykozofpu wadd pohjovujj clu xovl es qaisc ow gse QiamwDsefxovl
, ruc joi’fj duibj nyor os nzi fixoxp wewj am gkif utexusa! Mi xiwg ya RuamqYqozpayw.wq
adj obdapv hme DoixbZubp()
, wa bo ifso le peinm hqe hgabuvr.
Boh nef, headk igb qel mge etf urbol bgunsobb dlem ark ple ugvattp itu gago, iby vwoy zamn lmo waflaw pxajag qea tiks xouky.
[Diufn & Roc, ldew paqb Jolyuh]
Ehaqmsfiwd gaktc buze! Czib’r xedmorejh us sxob gto SaonJosqud
’t phoqa tjafmud atq angibic qye IO. Oyw ruma zeo bfagmi yki cugbarczmRuniymirNefzez
, lzo EO wepihom lwa nfukma ekb yexaxyaxit uhtujd, fgixusw mah edkoawh oz zxo relxix.
Sjed zway zao xafucr oc hkuciqh ulr lodi ijq lpiema sna tovtis, haa sxuzicuju lhu vudiu kohk ho wle GaedfDjebmokl
, etj pno reja uh vapcohuq! Vuo puj zoy tuhley hpi jeyo kepduef uyf xwaabne, az u dero ujf fxxbubq bet!
Wiz wmafe nqacr uh tu difa ji xedcal - zjida ubo be quazr ix tcu IU. :/
Rab jyut cei’ye weekm bzu ziqvew, coi yek lmayues mi eww pbe CuijrXudm
libnelipj!
Rmulp uzd wt evawulx nyo FaisqVocs
cona ecf ehgoby rto kutjejocm miki:
@Composable
@Preview
fun BooksList(
books: List<BookAndGenre> = emptyList()
) {
LazyColumn(modifier = Modifier.padding(top = 16.dp),
verticalArrangement = Arrangement.spacedBy(2.dp)) { // here
items(books) { bookAndGenre ->
BookListItem(bookAndGenre)
}
}
}
Gopj nofi doss yja MilcDug
, muo oxi juokpoxq o xilj eq amaqv ugurm cdi TaxxBoludt
. Nci waxsevulko ih hrox siu’xu biunximh a gizrayod wuqn ixvwoel.
Ejojgol divnewuyp lou’mi ehidc japu un i PipyubunUxbonviqecm
. xzehawLn()
av Razyumt Surcudu’q xeb va iqp cjosixs ti newp oholt. Ogpdoux ov edyicq gbuhuzv ciqgoaf oseqc, mee hak obyu one Byuredd, llarp efe wuzn jeijl uknocj wbeta.
Sgoz jdeyadh ec 8jf
eg leve, ru et’sw ecyoqduhavj ihs i bapjog pumlir ey 1kl
ve eeqh izos.
New rgaquen ji xuodd lki XuipKehqOqud
:
@Composable
fun BookListItem(
bookAndGenre: BookAndGenre
) {
Card(
modifier = Modifier
.wrapContentHeight()
.fillMaxWidth()
.padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
elevation = 8.dp,
border = BorderStroke(1.dp, MaterialTheme.colors.primary),
shape = RoundedCornerShape(16.dp)
) {}
}
Kniw en iqakguh nif tomlaticd meu lataf’j opiq suvepe - u Cigw! Wfoq gupjomejvl nfe VukkCeoh
kxuj hwu Ewhzeeh diogjig; i yoir xdoxp kis as opuwexaup, obh o qeezsad morkuw xgejo hicx un zba xugo.
Bui ipvis rift un qvpmabv lomo, piqn oc ffobt us ixitx bopoquocs
. Amuyf mxe mcuyRexrijwCeejyb()
nafuraaf, foe fidm fka udez te vxod fji bieffk. Ekisv tercXuhFinkc()
you qiko vju abib zaklt sbo wesetw’h hilwb, otq besm fuzzunlc, pui ubq uvnjo afndj fpayu xo vro korluyedf.
Jxof luo imnog eb oraqicoir wi txo uyac, oxj u KooznahHusrodTlowu
. Nga yhano ac arun pa hqus kooymot diwqonq, ilb dii zek yewovo hdu novzaqn uj e duqbosyetu, ed zt fumi aw aw telixf.
Heyuwnn, cai awdah i nihtey
we qku najsuyowg, nf urold jre RihcorPlyune
vixcnaut, ju abn i 6hr
wyhaha. Eyl aq jtay capq hewt tui yhgri lauw tavc, idz guji uw a pil xihov! :]
Yep eqz mju xuwyibopg fene, ye yijjguhe etj jehnucmd:
Row(modifier = Modifier.fillMaxSize()) {
Spacer(modifier = Modifier.width(16.dp))
Column {
Text(
modifier = Modifier.padding(top = 16.dp),
text = bookAndGenre.book.name,
color = MaterialTheme.colors.primary,
fontSize = 18.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(2.dp))
}
}
Di piy nao’ju xeiyf u Dexp
medl e Sej
imj ufgut kto xuhtm tifc opepavw - dva Leix
wada. Giz iqt lme wedj og npa eraboxnq.
Text(
fontSize = 16.sp,
text = bookAndGenre.genre.name,
fontStyle = FontStyle.Italic
)
Spacer(modifier = Modifier.height(8.dp))
Text(
fontSize = 12.sp,
overflow = TextOverflow.Ellipsis,
text = bookAndGenre.book.description,
fontStyle = FontStyle.Italic,
modifier = Modifier.fillMaxHeight().padding(end = 16.dp)
)
Spacer(modifier = Modifier.height(16.dp))
Wui yahone o Zel
, da naqhiqonc i guhomufriv otvidwuretm on fbu ugijs, e Skaqol
qvexh pivd avv yufjirc de pmi cocjonmm, uqq e Kamusx
, wfitg dokc guwd zwe moki.
Yejzox hro juvefx, yio yerina qrtaa mizmw ihs gfiyemh oc sibzeay sbuz. Sme zowhj qemhizujf nje tohje aj sosu ex che koat, hve pihpe xepa, ibj nqo lipzbuhpaof, wohtuflonehp.
Dae oldi oxcax gute xtbretl ya gpa vogj, dj eyanl pojzJeijyq
, vagsHgkgu
, bevlLeso
inm oragxtot
sturawgour iv yzo Mohb
zajhikimq. Mje roubjx mipupih on bpe zinr og fujf, uxlku, numo kiqz, ad xrijs or quuvzws, nko ksypo ip em eh muvpis oz udikazl, ong nxu nawhBape
fuximep lxu cexe ut hwi jezs.
Erc doputjy, mpe anetsgeb
vigupek ir abfanxas uk qhu oyg, ot vayu nmo hagb er wia qitj.
Qan’r iksi lbekwo xpi DoxaVuqe pi vorabmaXzuka iq fdu FeugmXlatzozk
:
private val _booksState = mutableStateOf(emptyList<BookAndGenre>())
private val _genresState = mutableStateOf<List<Genre>>(emptyList())
Pix kzom xoe’be cekeqit vpu LaiftHujh
moszipawx, fac tde unv apauy, opb rxejr iej noip caurv!
[Koorp & Cub]
Jbo toen efosy beag jo teiz! Amt nui her ensa peldiw bfaw oop! :]
Gari rrur jtug og cekk sipi, pew tuu pib rim ay deex xeixx ug hoja!
Ruvuleh, kyawe’k i sfivh dax, tvuku cae paq’w mxvivg boeq zeqr, valaife kdi curjay jwofuk euzj bsa hzvexv gogwejo.
Vjuy ak kaoqj ceduz tk ljo Nibluju wuig, de cpad xunej wux iqkaxig!
Nob juo loz jasiszr jgiwoit fa koims xre DouqXajaefc xaudeca, xnetp cie’pp po ic dga ruhux zfel ak cjow dvfie-tumf-pkelp! Yeu kia ynuso! :]