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

지난 포스팅

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

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

 

이번 포스팅에서는 지난 포스팅에서 다뤘던 compose recyclerview를 이용해 실습을 해보겠다.

 

사용자의 정보를 담는 데이터 클래스 생성

data class Practice2Data(
    val name: String,
    val age: Int,
    val phoneNum: String
)

간단하게 이름, 나이, 전화번호만 줘봤다.

 

recyclerView 아이템 생성

@Composable
fun ExampleItem(item: Practice2Data) {
    Card(
        modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth()
            .height(100.dp)
    ) {
        // 배경 박스
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.LightGray)
                .padding(start = 15.dp, end = 15.dp)
        ) {
        }

        Box(
            contentAlignment = Alignment.CenterStart
        ) {
            Column(modifier = Modifier.offset(x = 10.dp)) {
                Text(text = "이름:"+item.name, modifier = Modifier.offset(y = (-5).dp))
                Text(text = "나이:"+item.age.toString(), modifier = Modifier.offset(y = 5.dp))
            }
        }

        Box(
            contentAlignment = Alignment.CenterEnd,
            modifier = Modifier.offset(x = (-5).dp)
        ) {
            Text(text = "phone:"+item.phoneNum)
        }
    }
}

 

recyclerview 생성

@Preview(showBackground = true)
@Composable
fun DefaultPreview3() {
    val item = mutableListOf<Practice2Data>()
    item.add(0, Practice2Data("name1", 16, "010-1234-5678"))
    item.add(1, Practice2Data("name2", 18, "010-2345-6789"))
    item.add(2, Practice2Data("name3", 20, "010-3456-7890"))
    item.add(3, Practice2Data("name4", 18, "010-1111-2222"))
    item.add(4, Practice2Data("name5", 20, "010-2222-3333"))
    item.add(5, Practice2Data("name6", 24, "010-3333-4444"))
    item.add(6, Practice2Data("name7", 15, "010-4444-5555"))

    ComposeUITheme {
        LazyColumn {
            itemsIndexed(item) { index, data ->  
                ExampleItem(item = data)
            }
        }
    }
}

 

실행 결과

정상적으로 잘 출력된 것을 볼 수 있다.