Android 배워보자 Compose! (2)

이전 글..

Android 배워보자 Compose - (1)

 

RecyclerView? Lazy List!

오늘은 Compose 에서 이전까지 우리가 RecyclerView 라고 불러왔던 Lazy List 라는 개념을 알아보겠습니다.

아래 링크는 Android 에서 제공하는 RecycerView -> Lazy List 에 대한 Migration Guide 입니다.

https://developer.android.com/jetpack/compose/migrate/migration-scenarios/recycler-view?hl=ko 

RecyclerView를 Lazy 목록으로 이전  |  Jetpack Compose  |  Android Developers

 

제 기준으론 이전까지

onCreateViewHolder 에서 ViewHolder 에 Binding 을 집어넣고

bindViewHolder 에서 binding 에 data 를 넣은 뒤 xml 에 작성된 로직대로 View 가 그려지는 형태로 구현했었는데

 

뭐 대략 지금은 컴포저블이 다 해줍니다 ㅎㅎ 라고 적혀있습니다.

 

실제로 구현해봤을 때 가장 큰 차이점이라 하면 

이전엔

• ItemView Layout 작성 
• Adapter class 작성
• Databinding 을 사용하고부턴 그나마 가벼워진 ViewHolder class 작성

최소한 위 세 작업은 거쳐야 RecyclerView 를 구현할 수 있었고 여기에

Listener 도 달아줘야하고

ItemDecoration 도 달아줘야하고

행여나 역동적인 디자인을 필요로하면 Custom Drawable 을 또 별도로 작성해야했습니다.

 

하지만 Compose 에서는 위 작업들이 없거나 대폭 생략되었다고 하죠.

더 설명하기보단 그럼 코드부터 살펴보겠습니다.

우측 하단의 버튼을 누르면 리스트에 아이템이 추가되는 RecyclerView 를 Compose 로 구현해보았습니다.

Model

data class Contents(val name: String,
                    val date: String,
                    val content: String) {
}

 

ItemView

@Composable
fun ContentsItem(contents: Contents) {
    val context =LocalContext.current
    Column(
        Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(vertical = 10.dp)
            .clickable {
                Toast.makeText(context, contents.content, Toast.LENGTH_LONG).show()
            }) {
        Text(
            modifier = Modifier.wrapContentHeight(),
            text = contents.name)
        Spacer(modifier = Modifier.height(10.dp))
        Text(
            modifier = Modifier.wrapContentHeight(),
            text = contents.date)
        Spacer(modifier = Modifier.height(10.dp))
        Text(
            modifier = Modifier.wrapContentHeight(),
            text = contents.content)
    }
}

 

Main View

@Preview
@Composable
fun ContentsApp() {
    var contentList by remember { mutableStateOf(listOf<Contents>()) }
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        LazyColumn(Modifier.padding(12.dp)){
            items(contentList) { item: Contents ->
                ContentsItem(item)
            }
        }

        Button(
            onClick = {
                contentList = contentList + Contents(
                    name = "Content ${contentList.size + 1}",
                    date = "${contentList.size + 1}",
                    content = "${contentList.size + 1} 번째 내용입니다."
                )
            },
            // 이 아래는 디자인 적인 요소입니다.
            modifier = Modifier
                .padding(24.dp)
                .size(90.dp)
                .align(Alignment.BottomEnd),
            colors = ButtonDefaults.buttonColors(containerColor = PurpleGrey80)
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_demo),
                    contentDescription = "android_button",
                    modifier = Modifier
                        .size(32.dp),
                    tint = Pink40
                )
                Spacer(modifier = Modifier.height(8.dp))
                Text(
                    modifier = Modifier.wrapContentSize(),
                    text = "Press!",
                    color = Pink40,
                    fontSize = 11.sp,
                    maxLines = 1
                )
            }
        }
    }
}

 

 

위 코드를 동작시켜보면 아래와 같습니다

 

리스트 스크롤까지 보여주기 위한 다급한 클릭..

 

자세히 보시면 버튼 디자인짜는 코드가 제일깁니다..

 

딱 원하던 동작대로 잘 작동하는 모습입니다.