[안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

안녕하세요. 이번 시간에는 LazyColumn를 통해서 정보를 리스트로 보여주는 방법에 대하여 알아보겠습니다.

RecyclerView를 사용했던 xml 방식보다 훨씬 쉽게 구현할 수 있다는 사실을 알 수 있습니다. 

---

목차

1. 실행 화면
2. 데이터 클래스
3. UserView 함수
4. SimpleListView 함수
5. 전체 코드

---

1. 실행 화면

 

2. 데이터 클래스

  - 설명

 1. name : 사용자 이름

 2. age: 사용자 나이

data class Users(
    val name: String,
    val age: String
)

3. UserView 함수

 - 설명 

 1. padding(8.dp) : 외부와 간격

 2. fillMaxWidth() : 가로 크기 최대

 3. elevation : 음영 정도

 4. shape : 둥근 정도

 5. Column : 세로 정렬

 6. users: Users: 사용자 정보 리스트

@Composable
fun UserView(users: Users){

    //카드뷰
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        elevation = 10.dp, //음영
        shape = RoundedCornerShape(5.dp) //둥근정도

    ) {
        Column() {
            Text(text =  users.name, fontSize = 20.sp, modifier = Modifier.padding(10.dp))
            Text(text =  users.age, fontSize = 15.sp, modifier = Modifier.padding(10.dp))
        }
    }
}

 

반응형

 

4. SimpleListView 함수

 - 설명

 1. (20..80).random() : 20 ~ 80 사이 랜덤한 숫자 생성

 2. fillMaxSize() : 화면 최대 크기

 3. LazyColumn : 스크롤 목록 생성(세로) 

 4. items(users) : 데이터 개수만큼 리스트로 생성

 5. it : 사용자 정보 리스트

@Composable
fun SimpleListView(){

    //1. 샘플 데이터 생성
    val users = ArrayList<Users>()

    for (i in 1..100){
        val user = Users("user-$i", (20..80).random().toString())
        users.add(user)
    }

    //2. 리스트 생성
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ){
        items(users){
            UserView(users = it)
        }
    }
}

 

5. 전체 코드

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSampleTheme {
                SimpleListView()
            }
        }
    }
}

@Composable
fun SimpleListView(){

    //1. 샘플 데이터
    val users = ArrayList<Users>()

    for(i in 1..100){
        val user = Users("user-$i", (20..80).random().toString())
        users.add(user)
    }

    //2. 리스트 생성
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ){
        items(users) {
            UserView(it)
        }
    }
}

@Composable
fun UserView(user: Users){

    //카드뷰
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        elevation = 10.dp,
        shape = RoundedCornerShape(5.dp)
    ) {
        Column() {
            Text(text = user.name, fontSize = 20.sp, modifier = Modifier.padding(10.dp))
            Text(text = user.age, fontSize = 15.sp, modifier = Modifier.padding(10.dp))
        }
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {
        SimpleListView()
    }
}

 

2023.05.15 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

[안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

2023.05.08 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

[안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

2023.05.01 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

[안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법