๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“ฑ| Android/๐Ÿš€ | Jetpack

[Android, Kotlin] Compose UI ์ •๋ฆฌ(3)

by immgga 2022. 12. 4.

์ด์ „ ํฌ์ŠคํŒ…

https://rkdrkd-history.tistory.com/42

 

[Android, Kotlin] Compose UI ์ •๋ฆฌ(2)

์ง€๋‚œ ํฌ์ŠคํŒ… https://rkdrkd-history.tistory.com/41 [Android, Kotlin] Compose UI ์ •๋ฆฌ(1) 1. layout 1. Column ํ•˜์œ„์˜ ๋ทฐ๋“ค์„ ์ˆ˜์ง ์ •๋ ฌํ•ด์ค€๋‹ค(vertical). // ํ…์ŠคํŠธ ๋ทฐ @Composable fun Greeting(name: String) { Text(text = name) } // ๋ทฐ๋ฅผ

rkdrkd-history.tistory.com

 

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์Šคํฌ๋กค ๊ฐ€๋Šฅํ•œ ๋ทฐ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ๋‹ค.


3. Scrollable View

1. ScrollView

 

scrollView์— ์‚ฌ์šฉํ•  ์•„์ดํ…œ ์ƒ์„ฑ

@Composable
fun ScrollItem(num: Int) {
    Card(
        modifier = Modifier
            .padding(10.dp)
            .border(width = 5.dp, color = Color.Blue)
            .fillMaxWidth()
            .height(100.dp)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text(text = "text $num", color = Color.Blue)
        }
    }
}

border: ๋ทฐ์˜ ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ทธ๋ ค์ค€๋‹ค.

 

ScrollView ์ƒ์„ฑ

@Preview(showBackground = true)
@Composable
fun DefaultPreview3() {
    ComposeUITheme {
        val scroll = rememberScrollState()
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(12.dp)
                .verticalScroll(scroll)
        ) {
            for (i in 0..10) {
                ScrollItem(num = i)
            }
        }
    }
}
  • fillMaxSize: width, height์„ match_parent๋กœ ์„ค์ •
  • verticalScroll: ์•„๋ž˜๋กœ ์Šคํฌ๋กค๋˜๊ฒŒ ํ•ด์ฃผ๋Š” ์—ญํ• 

 

์‹คํ–‰ ๊ฒฐ๊ณผ

์Šคํฌ๋กค์ด ์ž˜ ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๋‹จ์ : ํ•„์ž๋Š” for๋ฌธ์„ 10๋ฒˆ ๋ฐ˜๋ณตํ–ˆ์ง€๋งŒ, ๋ฐ˜๋ณต ํšŸ์ˆ˜๊ฐ€ ์ปค์งˆ์ˆ˜๋ก ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค.

 

2. RecyclerView

 

์•„์ดํ…œ์€ ScrollView์—์„œ ์‚ฌ์šฉํ–ˆ๋˜ ์•„์ดํ…œ์—์„œ CircleShape(๋‘ฅ๊ทผ ํ…Œ๋‘๋ฆฌ)๋งŒ ์‚ฌ์šฉํ–ˆ๋‹ค.

@Composable
fun ScrollItem(num: Int) {
    Card(
        modifier = Modifier
            .padding(10.dp)
            .border(width = 5.dp, color = Color.Blue, shape = CircleShape)
            .fillMaxWidth()
            .height(100.dp)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text(text = "text $num", color = Color.Blue)
        }
    }
}

 

RecyclerView ์ƒ์„ฑ

LazyColumn์„ ์‚ฌ์šฉํ•ด ์ƒ์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

@Preview(showBackground = true)
@Composable
fun DefaultPreview3() {
    ComposeUITheme {
        LazyColumn {
            itemsIndexed(listOf(1,2,3,4,5,6,7,8,9,10)) { index, item ->  
                ScrollItem(num = item)
            }
        }
    }
}

 

 

์‹คํ–‰ ๊ฒฐ๊ณผ

๋‘ฅ๊ทผ ํ…Œ๋‘๋ฆฌ์™€ item๋“ค์ด ๋ชจ๋‘ ์ž˜ ๋“ค์–ด๊ฐ„ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.


์ •๋ฆฌ

RecyclerView๋Š” recyclerView adapter๋ฅผ ์•ˆ ์จ๋„ ๋ผ์„œ xml๋ณด๋‹ค ๊ฐ„๋‹จํ–ˆ๋‹ค.

 

๋‹ค์Œ ํฌ์ŠคํŒ…์€ compose recyclerview๋ฅผ ์ด์šฉํ•œ ์‹ค์Šต์„ ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.

728x90