π Jetpack Compose 1.8: UI κ°λ°μ μλ‘μ΄ μ νμ
Jetpack Compose 1.8μ΄ μΆμλμμ΅λλ€! μ΄λ² μ λ°μ΄νΈλ Android UI κ°λ°μλ€μκ² λ€μν κΈ°λ₯ κ°μ κ³Ό μμ μ±μ μ 곡ν©λλ€. νΉν μ λλ©μ΄μ , ν μ€νΈ μ²λ¦¬, HTML μ§μ λ±μμ ν° λ°μ μ΄ μμμ΅λλ€. μ΄ κΈμμλ μ£Όμ λ³κ²½ μ¬νμ μ λ¦¬ν΄ λ³΄κ² μ΅λλ€.(Medium)
π§± API μμ μ± λ° μ£Όμ μ 리
Compose 1.7μμ 170κ°μ μ€νμ API μ€ 1.8μμλ 70κ°λ§ λ¨κ² λμ΄, κ±°μ 50%κ° μ μ APIλ‘ μ νλμμ΅λλ€. μ΄λ Composeμ μ±μλλ₯Ό λμ΄κ³ , ν₯ν λ³κ²½μ λν κ±±μ μ μ€μ¬μ€λλ€.(Medium)
μΆκ° κ°μ μ¬ν:
- μ 체 νλ©΄ λ€μ΄μΌλ‘κ·Έκ° μμ€ν λ° λ€μ κ·Έλ €μ§
- 리μ€νΈμμ OverscrollEffect μ§μ
- ContextFlowRow λ° ContextualFlowColumnμ΄ deprecatedλκ³ , FlowRowμ FlowColumnμΌλ‘ λ체(Medium)
β¨ LookAheadScopeλ₯Ό ν΅ν ν₯μλ μ λλ©μ΄μ
μ΄μ LookAheadScopeλ₯Ό μ¬μ©νμ¬ μ»΄ν¬μ λΈ λ΄λΆμ κ²½κ³ μ λλ©μ΄μ μ μλμΌλ‘ μ²λ¦¬ν μ μμ΅λλ€. μ΄λ UI μ νμ λμ± λΆλλ½κ² λ§λ€μ΄μ€λλ€.(Medium)
Modifier
.width(if (expanded) 180.dp else 110.dp)
.offset(x = if (expanded) 0.dp else 100.dp)
.animateBounds(lookaheadScope = this@LookaheadScope)
.background(Color.LightGray, shape = RoundedCornerShape(12.dp))
.height(50.dp)
π κ°μμ± μΆμ μ κ°νΈν
μ΄μ μλ μ»΄ν¬μ λΈμ κ°μμ±μ μΆμ νλ κ²μ΄ λ²κ±°λ‘μ μ§λ§, μ΄μ λ μλ‘μ΄ onLayoutRectChanged λͺ¨λνμ΄μ΄λ₯Ό μ¬μ©νμ¬ μ½κ² κ΄λ¦¬ν μ μμ΅λλ€.(Medium)
Modifier.onLayoutRectChanged(
throttleMillis = 0,
debounceMillis = 64,
callback = { bounds ->
// κ°μμ± λ‘μ§ μ²λ¦¬
}
)
π Composeμμμ λ€μ΄ν°λΈ HTML μ§μ
λλμ΄ Composeμμ <ul>, <li>μ κ°μ HTML νκ·Έλ₯Ό λ€μ΄ν°λΈλ‘ μ§μν©λλ€. μ΄μ 볡μ‘ν μλνν° HTML λ λλ§ μμ΄λ κ°λ¨νκ² κ΅¬νν μ μμ΅λλ€.
Text(
AnnotatedString.fromHtml("""
<h1>HTML content</h1>
<ul>
<li>Hello,</li>
<li>World</li>
</ul>
""".trimIndent())
)
π μ€λ§νΈν ν μ€νΈ μ²λ¦¬
μλ‘μ΄ autoSize μμ±μ ν΅ν΄ ν μ€νΈ ν¬κΈ°λ₯Ό λμ μΌλ‘ μ‘°μ ν μ μμ΅λλ€. StepBased λ‘μ§μ ν¬ν¨νμ¬ λ€μν ν¬κΈ° μ‘°μ μ΄ κ°λ₯ν©λλ€.(Medium)
BasicText(
text = "Hello World",
maxLines = 1,
autoSize = TextAutoSize.StepBased()
)
π ν₯μλ μλ μμ± κΈ°λ₯
μ΄μ TextFieldμ contentTypeμ μ§μ νλ©΄, Composeκ° μλμΌλ‘ μ μ ν μλ μμ± κΈ°λ₯μ μ 곡ν©λλ€. μ±μ΄ λ°±κ·ΈλΌμ΄λμ μμ λλ μλν©λλ€.(Medium)
TextField(
state = rememberTextFieldState(),
modifier = Modifier.semantics {
contentType = ContentType.Username
}
)
π§ λ§λ¬΄λ¦¬
Jetpack Compose 1.8μ μμ μ± ν₯μκ³Ό κ°λ ₯ν UI λꡬλ₯Ό ν΅ν΄ νλ‘λμ μ± κ°λ°μ λμ± μ ν©ν΄μ‘μ΅λλ€. μ΄μ λ Composeλ‘ μ ννκ±°λ μ κ·Έλ μ΄λν μ΅μ μ μκΈ°μ λλ€.
μλ¬Έ μμ±μ: Esha Gajjar
μλ¬Έ λ§ν¬: Jetpack Compose 1.8 is Here — And It's a Game Changer!(Medium, Medium)