λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

IT/Android

πŸš€ Jetpack Compose 1.8: UI 개발의 μƒˆλ‘œμš΄ μ „ν™˜μ 

728x90
λ°˜μ‘ν˜•

 


πŸš€ 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)

728x90
λ°˜μ‘ν˜•