[Android, Kotlin] Compose UI 정리(3)

이전 포스팅

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

[Android, Kotlin] Compose UI 정리(2)

 

이번 포스팅에서는 스크롤 가능한 뷰를 만들어 보겠다.

---

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를 이용한 실습을 하도록 하겠다.