๊นจ์•Œ ๊ฐœ๋… ๐Ÿ“‘/Android 82

[Android] App layout - Custom layouts

#1 ๊ฐœ์š” ๋งž์ถค ๋ ˆ์ด์•„์›ƒ | Jetpack Compose | Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋งž์ถค ๋ ˆ์ด์•„์›ƒ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. Compose์—์„œ UI ์š”์†Œ๋Š” ํ˜ธ์ถœ๋  ๋•Œ UI ์š”์†Œdeveloper.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜๋งŒ์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. #2 ์ •ํ™•ํžˆ '๋ฌด์—‡'์„ ์ปค์Šคํ…€ํ•˜๋Š”๊ฐ€?๊ฒŒ์‹œ๊ธ€ [Android] App layout - ๊ธฐ์ดˆ์— ์žˆ๋Š” ๋„์‹๋„๋‹ค. ์ด ๋„์‹๋„๋Š” Layout ๋‚ด๋ถ€์  ๋™์ž‘ ๊ธฐ์ œ๋ฅผ ํ‘œํ˜„ํ•˜๊ณ  ์žˆ๋‹ค. Layout์„ ์ปค์Šคํ…€ํ•œ๋‹ค๋Š” ๊ฑด ์œ„ ๋„์‹๋„์—์„œ ์ฃผํ™ฉ์ƒ‰ ๋„ค๋ชจ ๋ฐ ํŒŒ๋ž€์ƒ‰ ๋„ค๋ชจ ์•ˆ์˜ ๋‚ด์šฉ์„ ์˜ค๋ฒ„๋ผ์ด๋“œํ•˜๋Š” ๊ฒƒ์ด๋‹ค. #3 Modifier.layout()#..

[Android] UI architecture - Phase์™€ State

#1 ์ด์ „ ๊ฒŒ์‹œ๊ธ€ [Android] UI architecture - Phases#1 ๊ฐœ์š” Jetpack Compose ๋‹จ๊ณ„  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Jetpack Compose ๋‹จ๊ณ„ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜kenel.tistory.com์œ„ ๊ฒŒ์‹œ๊ธ€์—์„œ ์ด์–ด์ง„๋‹ค. #2 State [Android] Jetpack Compose - State ๊ธฐ์ดˆ#1 ๊ฐœ์š” ์ƒํƒœ ๋ฐ Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ƒํƒœ ๋ฐ Jetpack Compose ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค..

[Android] UI architecture - Phases

#1 ๊ฐœ์š” Jetpack Compose ๋‹จ๊ณ„  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Jetpack Compose ๋‹จ๊ณ„ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. ๋Œ€๋ถ€๋ถ„์˜ ๋‹ค๋ฅธ UI ๋„๊ตฌ ํ‚คํŠธ์™€ ๋งˆ์ฐฌ๊ฐ€developer.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. #2 Compose Runtime์˜ 3๋‹จ๊ณ„#2-1 ๋„์‹๋„Jetpack Compose๊ฐ€ UI๋ฅผ ๊ทธ๋ ค๋‚ด๋Š” ๊ณผ์ •์˜ ๋„์‹๋„. Layout ๋‹จ๊ณ„๋Š” ์ด ๋‹จ๊ณ„๋Š” ์ธก์ •(measurement)๊ณผ ๋ฐฐ์น˜(placement)๋ผ๋Š” ๋‘ ๊ฐ€์ง€์˜ ํ•˜์œ„ ๋‹จ๊ณ„๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. ๊ฐ ๋‹จ๊ณ„์— ๋Œ€ํ•œ ๊ฐ„๋ฝํ•œ ์„ค๋ช…์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. 1. Composition: '๋ฌด์—‡'(W..

[Android] App layout - ๊ธฐ์ดˆ

#1 ๊ฐœ์š” Compose ๋ ˆ์ด์•„์›ƒ ๊ธฐ๋ณธ์‚ฌํ•ญ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Compose ๋ ˆ์ด์•„์›ƒ ๊ธฐ๋ณธ์‚ฌํ•ญ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. Jetpack Compose๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ฑ์˜developer.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. #2 ๊ธฐ๋ณธ ์ปดํฌ์ €๋ธ” [Android] Jetpack Compose - Layout, Arrangement, Alignment#1 Layout#1-1 ๊ฐœ์š” Compose ๋ ˆ์ด์•„์›ƒ ๊ธฐ๋ณธ์‚ฌํ•ญ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Tr..

[Android] Pointer input - Nested Scroll

#1 ์ด์ „ ๊ฒŒ์‹œ๊ธ€ [Android] Pointer input - Scroll#1 ๊ฐœ์š” ์Šคํฌ๋กค  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋กค ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธkenel.tistory.com์Šคํฌ๋กค์— ๋Œ€ํ•ด ๋‹ค๋ฃฌ ์œ„ ๊ฒŒ์‹œ๊ธ€์—์„œ๋ถ€ํ„ฐ ์ด์–ด์ง„๋‹ค. #2 ์ค‘์ฒฉ(Nested) ์Šคํฌ๋กค#2-1 ๊ฐœ์š”์ค‘์ฒฉ(Nested) ์Šคํฌ๋กค์ด๋ž€, ๋ง ๊ทธ๋Œ€๋กœ ๊ฐ™์€ ๋ฐฉํ–ฅ(์ˆ˜์ง ๋˜๋Š” ์ˆ˜ํ‰)์œผ๋กœ ์Šคํฌ๋กค ํ•˜๋Š” ์ปจํ…Œ์ด๋„ˆ 2๊ฐœ๊ฐ€ ๋ถ€๋ชจ-์ž์‹ ๊ด€๊ณ„๋ฅผ ํ˜•์„ฑํ•œ ๊ฒƒ์„ ๋œปํ•œ๋‹ค. ์ฆ‰ verticalScroll()์ด ์ ์šฉ๋œ Column() ์†์— ๋‹ค์‹œ verticalScroll()์ด ์ ์šฉ๋œ Column()..

[Android] Pointer input - Scroll

#1 ๊ฐœ์š” ์Šคํฌ๋กค  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋กค ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. ์ฐธ๊ณ : ํ•ญ๋ชฉ ๋ชฉ๋ก์„ ํ‘œ์‹œํ•˜๋ ค๋ฉด ์ด๋Ÿฌํ•œ API ๋Œ€์‹ developer.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ–ˆ๋‹ค. #2 ์Šคํฌ๋กค'๋˜๋Š”' Modifier#2-1 Modifier.verticalScroll()fun Modifier.verticalScroll( state: ScrollState, enabled: Boolean = true, flingBehavior: FlingBehavior? = null, reverseScroll..

[Android] Pointer input - Gesture

#1 ๊ฐœ์š”#1-1 ์ด์ „ ๊ฒŒ์‹œ๊ธ€ [Android] Pointer input - PointerInputChange, PointerEvent#1 ๊ฐœ์š” ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €kenel.tistory.com์œ„์˜ ๊ฒŒ์‹œ๊ธ€์—์„œ ์ด์–ด์ง„๋‹ค. ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€์—์„œ ๋จผ์ € PointerInputChange ๋ฐ PointerEvent์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ํ•ด์•ผ ๋ณธ ๊ฒŒ์‹œ๊ธ€์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค. #1-2 ๊ณต์‹ ๋ฌธ์„œ ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Tran..

[Android] Pointer input - AwaitPointerEventScope()์˜ ๋ฉ”์†Œ๋“œ๋“ค

#1 ๊ฐœ์š”#1-1 ์ด์ „ ๊ฒŒ์‹œ๊ธ€ [Android] Pointer input - PointerInputChange, PointerEvent#1 ๊ฐœ์š” ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €kenel.tistory.com์œ„ ๊ฒŒ์‹œ๊ธ€์—์„œ AwaitPointerEventScope()์˜ ๊ฐ€์žฅ ๋Œ€ํ‘œ์ ์ธ ๋ฉ”์†Œ๋“œ์ธ awaitPointerEvent()์— ๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์„ค๋ช…ํ–ˆ๋‹ค. ๋ณธ ๊ฒŒ์‹œ๊ธ€์—์„  awaitPointerEvent()๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ๋ฉ”์†Œ๋“œ๋“ค์„ ์„ค๋ช…ํ•œ๋‹ค. #1-2 ๊ณต์‹ ๋ฌธ์„œ AwaitPointerEventScope  | ..

[Android] Pointer input - PointerInputChange, PointerEvent

#1 ๊ฐœ์š” ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ  |  Jetpack Compose  |  Android Developers์ด ํŽ˜์ด์ง€๋Š” Cloud Translation API๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋™์ž‘ ์ดํ•ดํ•˜๊ธฐ ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. ์ดํ•ดํ•ด์•ผ ํ•  ๋ช‡ ๊ฐ€์ง€ ์šฉ์–ด์™€ ๊ฐœ๋…์ด ์žˆdeveloper.android.com์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋‚˜์˜ ์–ธ์–ด๋กœ ์ •๋ฆฌํ•˜๊ณ , ์ƒ˜ํ”Œ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ดค๋‹ค. #2 Pointer#2-1 ํฌ์ธํ„ฐ๋Š” ํ•˜๋“œ์›จ์–ด๋‹คํ™”๋ฉด์˜ ํŠน์ • ์ขŒํ‘œ๋ฅผ ์ฐ์„(point) ์ˆ˜ ์žˆ๋Š” ์‚ฌ๋ฌผ(ํ•˜๋“œ์›จ์–ด)์„ ์˜๋ฏธํ•œ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋ก  ์†๊ฐ€๋ฝ์„ ์˜๋ฏธํ•œ๋‹ค. ํ˜น์€ ๊ฐค๋Ÿญ์‹œ์˜ SํŽœ์ด ํ•ด๋‹น๋œ๋‹ค. ํ‚ค๋ณด๋“œ๋Š” ํ„ฐ์น˜ ์Šคํฌ๋ฆฐ์˜ ์–ด๋Š ์ขŒํ‘œ๋ฅผ ๊ฐ€๋ฆฌํ‚ฌ(point) ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ํฌ์ธํ„ฐ๊ฐ€ ์•„๋‹ˆ๋‹ค. #2-2 PointerTypepacka..

[Android] Jetpack Compose - Navigation์˜ Destination ๊ฐ„ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ (NavBackStackEntry.

#1 ์ด์ „ ๊ธ€ [Android] Jetpack Compose - Navigation ๊ธฐ์ดˆ#1 ๊ฐœ์š”#1-1 ์ „ํ†ต์ ์ธ ์•ˆ๋“œ๋กœ์ด๋“œ ํ”„๋กœ์ ํŠธ์—์„œ์˜ Navigation [Android] Navigation - ๊ธฐ์ดˆ#1 ์ด์ „ ๊ธ€ [Android] Navigation - ํ™˜๊ฒฝ ์„ค์ • #1 Navigation#1-1 ์•กํ‹ฐ๋น„ํ‹ฐ ๋ฐ ํ”„๋ž˜๊ทธ๋จผํŠธ ๊ตฌ์„ฑ์˜ ํŠธ๋ Œ๋“œ์š”์ฆ˜ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœkenel.tistory.com๋ณธ ๊ฒŒ์‹œ๊ธ€์—์„  ์œ„ ๊ฒŒ์‹œ๊ธ€์˜ ์™„์„ฑ๋œ ์•ฑ์„ ์ผ๋ถ€ ์ˆ˜์ •ํ•˜์—ฌ, Destination๋ผ๋ฆฌ ์„œ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ฒŒ ๋งŒ๋“ค์–ด๋ณธ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ ๋จผ์ € NavBackStackEntry์— ๋Œ€ํ•ด ์•Œ์•„์•ผ ํ•œ๋‹ค. ์ด๋ฆ„์—์„œ ๋ณด๋“ฏ, NavBackStackEntry์€ ๋ฐฑ ์Šคํƒ์„ ๊ด€๋ฆฌํ•˜๋Š” ๊ฐ์ฒด๋‹ค. ๋”ฐ๋ผ์„œ, Back Stack(๋ฐฑ ์Šคํƒ)์ด ๋ญ”์ง€ ์•Œ์•„์•ผ Na..