[Android] Jetpack Compose - Lazy Column

#1 Lazy Column

#1-1 개요

목록 및 그리드  |  Jetpack Compose  |  Android Developers

Lazy lists는 Jetpack Compose 버전에서의 RecyclerView다. Lazy lists는 가로로 아이템이 정렬되는 Lazy Row와 세로로 아이템이 정렬되는 Lazy Column이 있는데, 주로 후자가 쓰인다. 본 게시글에서 Lazy Column을 구현해본다.

 

#1-2 구조

LazyColumn {
    // Add a single item
    item {
        Text(text = "First item")
    }

    // Add 5 items
    items(5) { index ->
        Text(text = "Item: $index")
    }

    // ↑ 메소드 오버로딩 관계 ↓

    /* List<T> 타입을 받는 items
     * import androidx.compose.foundation.lazy.items 필요
     */
    items(messages) { message ->
        MessageRow(message)
    }
}

LazyColumn 내부(LazyListScope)에는 item { ... } 및 items { ... }을 사용할 수 있다. 이게 끝이다. 기존 전통적인 방식의 RecyclerView와 비교하면 어마어마하게 간단한 코드다. 코드는 간단하지만, 그 (컴퓨팅 및 메모리 자원 절약이라는) 효과는 동일하다. 여담으로 LazyColumn은 기본적으로 스크롤 가능하기에 관련한 Modifier 메소드를 호출할 필요가 없다.

 

#2 Lazy Column 사용 예시

// package com.example.lazycolumn

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.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.sp
import com.example.lazycolumn.ui.theme.LazyColumnTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LazyColumnTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val list = ArrayList<String>()
                    for (i: Int in 1..20) {
                        list.add("$i")
                    }
                    val modifier = Modifier.fillMaxSize()
                    LazyColumnExample(list, modifier)
                }
            }
        }
    }
}

@Composable
fun LazyColumnExample(itemsParam: List<String>, modifierParam: Modifier = Modifier) {
    val context = LocalContext.current

    LazyColumn(
        modifier = modifierParam

    ) {
        items(itemsParam) {
            val modifier = Modifier.clickable {
                Toast.makeText(context, "Clicked item $it", Toast.LENGTH_SHORT).show()
            }
            TextExample("$it", modifier)
        }
    }
}

@Composable
fun TextExample(
    name: String,
    modifierParam: Modifier = Modifier,
    fontSizeParam: TextUnit = 40.sp
) {
    Text(
        text = "$name",
        modifier = modifierParam,
        fontSize = fontSizeParam,
        textAlign = TextAlign.Center
    )
}

20개의 아이템을 주입시켰고 각 아이템에 Modifier.clickable()를 전달해 (토스트 메시지를 표시하는) 클릭 동작을 구현했다. 여기의 Text()는 일종의 TextButton처럼 동작한다.

 

#3 작동 확인

 

#4 요약

LazyColumn은 쉬운 RecyclerView다.

 

#5 완성된 앱

android-practice/jetpack-compose/LazyColumn at master · Kanmanemone/android-practice