[Android Compose] LazyColumn이란?

"게으른 기둥" 정도로 번역되는 LazyColumn은 무엇일까? 안드로이드 디벨로퍼에선 아래와 같이 말하고 있다.

 

https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary?hl=ko#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1) 

androidx.compose.foundation.lazy  |  Android Developers

현재 보이는 아이템만 구성, 배치하는 세로 스크롤 리스트다. 컨텐츠 블록은 다양한 유형의 아이템을 내보낼 수 있는 DSL을 정의한다. 예를 들어 LazyListScope.item을 써서 단일 아이템을 추가하고 LazyListScope.items를 써서 아이템 리스트를 추가할 수 있다

 

설명만 놓고 보면 기존에 자주 사용하던 리사이클러뷰다. LazyColumn이 세로로 아이템들을 표시한다면 LazyRow는 가로로 아이템들을 표시한다.

LazyColumn의 원형은 아래와 같다.

 

@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: @ExtensionFunctionType LazyListScope.() -> Unit
): Unit

 

• Modifier : 이 레이아웃(LazyColumn)에 적용할 modifier
• LazyListState : 리스트 상태를 제어, 관찰할 때 사용하는 상태값. offset을 가져오는 프로퍼티, 드래그 이벤트를 가져오는 프로퍼티 등을 사용할 수 있다
• PaddingValues : 전체 컨텐츠 주위에 패딩을 추가하고 싶을 때 사용. 첫 번째 또는 마지막 아이템 뒤에 패딩을 추가할 때도 쓸 수 있다. 각 아이템 사이에 간격을 추가하려면 verticalArrangement를 사용한다
• reverseLayout : 스크롤, 레이아웃 방향을 반대로 뒤집는 프로퍼티. true면 아이템들이 역순으로 배치된다
• verticalArrangement : 레이아웃의 자식들의 세로 배열. 아이템 사이 간격을 추가하고 전체 최소 크기를 채우기에 아이템 개수가 충분하지 않을 때 아이템 배열을 지정할 수 있다
• horizontalAlignment : 아이템에 가로 정렬을 적용할 때 사용
• flingBehavior : 플링 동작을 설명하는 로직
• userControlEnabled : 사용자의 제스처 또는 접근성 작업을 통한 스크롤이 허용되는지 여부. 비활성으로 설정해도 상태를 사용해서 프로그래밍 방식으로 스크롤할 수 있다
• content : 내용을 설명하는 블럭. LazyListScope.item()으로 단일 아이템을 추가하거나 LazyListScope.items()를 써서 여러 아이템들을 추가할 수 있다

 

플링이란 말이 좀 낯설게 느껴질 수 있는데 안드로이드 디벨로퍼에서 플링을 확인해보면 아래와 같이 작동하는 걸 플링이라고 하는 듯하다.

 

https://developer.android.com/guide/topics/graphics/fling-animation?hl=ko

 

아래는 간단한 예시 코드다.

 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Text
import androidx.compose.ui.unit.sp
import com.example.composeprac.ui.theme.ComposePracTheme

class LazyColumnActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposePracTheme {
                LazyColumn {
                    item {
                        Text(
                            text = "첫 번째 아이템",
                            fontSize = 40.sp
                        )
                    }
                    items(30) { index ->
                        Text(
                            text = "${index}번째 아이템",
                            fontSize = 30.sp
                        )
                    }
                    item {
                        Text(
                            text = "마지막 아이템",
                            fontSize = 40.sp
                        )
                    }
                }
            }
        }
    }
}

 

 

이렇게 하고 앱을 실행하면 아래와 같이 작동하는 걸 볼 수 있다.

 

 

이번엔 클릭 아이템까지 같이 넣고 이것에 @Composable을 붙여 사용해보자.

 

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Divider
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composeprac.ui.theme.ComposePracTheme

class LazyColumnActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposePracTheme {
                ClickableLazyColumn() {
                    Toast.makeText(this, "아이템 $it", Toast.LENGTH_SHORT).show()
                }
            }
        }
    }
}

@Composable
fun ClickableLazyColumn(selectedItem: (Int) -> Unit) {
    LazyColumn {
        items(200) {
            Surface(
                modifier = Modifier.clickable { selectedItem(it + 1) }
            ) {
                Text(
                    text = "아이템 ${it + 1}",
                    fontSize = 40.sp,
                    modifier = Modifier.padding(10.dp)
                )
                Divider(
                    color = Color.Gray,
                    thickness = 1.dp
                )
            }
        }
    }
}

 

Compose 이전에 리사이클러뷰를 만들고 클릭 이벤트를 처리하는 로직을 짤 때를 생각해보면 눈물겹게 간결한 걸 볼 수 있다. 그놈의 빌어먹을 어댑터 실행하면 아래와 같이 작동한다.