Compose Recyclerview - 어댑터를 recyclerview로 설정하는 방법

이Jetpack compose tutorial에서는 Jetpack Compose를 사용하여 Android 애플리케이션에서 어댑터를 recyclerview로 설정하는 방법을 배웁니다.



RecyclerView를 사용하면 대규모 데이터 세트를 효율적으로 쉽게 표시할 수 있습니다. 데이터를 제공하고 각 항목의 모양을 정의하면 RecyclerView 라이브러리가 필요할 때 요소를 동적으로 생성합니다. 하지만 RecycleView에 세로 스크롤 목록을 표시하려면 RecyclerView 표시, 어댑터 클래스 생성, 어댑터 항목, 활동 또는 프래그먼트 클래스를 표시하는 레이아웃 파일 생성. 그러나 새로운 UI 접근 방식(예: Jetpack Compose)을 사용하면 목록을 표시하는 데 단일 기능이 필요합니다. Compose의 주요 이점은 수작업이 적은 간결한 코드입니다. 항목 목록을 표시하는 공통 항목에 대한 간단한 접근 방식은 LazyColumn입니다.

LazyColumn은 현재 보이는 항목만 구성하고 배치하는 수직 스크롤 목록입니다. 클래식 Android View 시스템의 Recyclerview와 유사합니다.

지연 열 데모

@Composable
fun LazyColumnDemo() {

    val users = listOf(
        User(id = "1", name = "Ankit Singh", emailId = "[email protected]"),
        User(id = "2", name = "Rishabh Shaw", emailId = "[email protected]"),
        User(id = "3", name = "Neha Shaw", emailId = "[email protected]"),
        User(id = "4", name = "Ekta Gupta", emailId = "[email protected]"),
        User(id = "5", name = "Rahul Jaiswal", emailId = "[email protected]"),
        User(id = "6", name = "Anindita Chatterjee", emailId = "[email protected]"),
        User(id = "7", name = "Aakash Raj", emailId = "[email protected]"),
        User(id = "8", name = "Arpita Ghosh", emailId = "[email protected]"),
        User(id = "9", name = "Arvind Patel", emailId = "[email protected]"),
        User(id = "10", name = "Akash Tiwari", emailId = "[email protected]")
    )
    LazyColumn() {
        items(
            items = users,
            itemContent = {
                UserListItem(user = it)
            })
    }
}

@Composable
fun UserListItem(user: User) {
    Card(
        modifier = Modifier
            .fillMaxWidth(),
        elevation = 4.dp
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = user.name,
                style = TextStyle(
                    color = Color.Blue,
                    fontSize = 21.sp,
                    fontWeight = FontWeight.Bold
                )
            )
            Text(text = user.emailId, modifier = Modifier.padding(top = 8.dp))
        }
    }
}

전체 보기Compose reyclerview Example