[Android Compose] LazyColumn을 활용한 복수 선택 기능 구현

이 포스팅에선 Compose를 사용해 리스트뷰를 만들고 아이템을 선택하면 체크상태를 변경해 표시하는 예제를 확인한다. 전체 코드는 아래 영상을 참고했다.

 

https://www.youtube.com/watch?v=pvNcJXprrKM

 

전체 코드는 아래와 같다.

 

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun MultiSelectionScreen(modifier: Modifier = Modifier) {
    var items by remember {
        mutableStateOf(
            (1..100).map {
                ListItem(
                    title = "아이템 $it",
                    isSelected = false
                )
            }
        )
    }

    LazyColumn(
        modifier = modifier.fillMaxSize()
    ) {
        items(items.size) { i ->
            Row(
                modifier = Modifier.fillMaxWidth()
                    .clickable {
                        items = items.mapIndexed { j, item ->
                            if (i == j) {
                                item.copy(isSelected = !item.isSelected)
                            } else {
                                item
                            }
                        }
                    }
                    .padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(text = items[i].title)
                if (items[i].isSelected) {
                    Icon(
                        imageVector = Icons.Default.Check,
                        contentDescription = "Selected",
                        tint = Color.Green,
                        modifier = Modifier.size(20.dp)
                    )
                }
            }
        }
    }
}

 

data class ListItem(
    val title: String,
    val isSelected: Boolean,
)

 

이를 실행하면 100개의 아이템이 리스트에 표시되고 클릭하면 우측에 녹색 체크 아이콘이 표시된다. 선택한 아이템을 다시 선택하면 체크 아이콘은 사라진다.

클릭 시 copy를 써서 선택한 아이템의 체크 상태를 바꾸는 부분 외에는 딱히 특별할 게 없다. 클릭 시 선택된 아이템들을 알고 싶다면 clickable 마지막에 filter를 사용해서 로그를 출력하면 확인할 수 있다.

 

clickable {
    items = items.mapIndexed { j, item ->
        if (i == j) {
            item.copy(isSelected = !item.isSelected)
        } else {
            item
        }
    }
    Log.e("test", "filter : ${items.filter { it.isSelected }}")
}

 

여기서 얻은 선택된 아이템들은 별도 리스트에 담아서 다른 곳에서 활용하면 될 것이다.