[Kotlin][Android] Jetpack Compose 로 텍스트 목록 만들기

 

안녕하세요 오늘은 

Jetpack Compose 를 사용하여 스크롤이 가능한 간단한 텍스트 목록을 만들어보겠습니다. 

 

Jetpack compose 는 코틀린 기반 선언형 ui 도구 키트 라이브러리로 

안드로이드 애플리케이션 개발 시 UI를 보다 간편하게 구축할 수 있게 도와줍니다 

 

 

먼저 새로운 프로젝트를 생성해줍니다

Empty Activity 선택하면 compose 를 바로 사용할 수 있도록 세팅됩니다. 

Jetpack Compose 는 API 21 부터 사용 가능하니 minimumSdkVersion  선택 시 API 21 이상 버전을 선택해주시면 됩니다

 

 

아이템 목록을 만드는 함수입니다 

아래 코드를 통해 text view 를 생성하고, 아이템 간 마진을 설정합니다 

// item list
@Composable
fun ItemList (cnt : Int) {
    val items = List (cnt) { "Item ${it + 1}"} 
    
    // Lazy Column 을 사용하여 스크롤 가능한 목록 생성
    LazyColumn {
        items(items) {
            item -> BasicText(text = item,
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp))  // 각 텍스트 간의 마진 추가)
        }
    }
}

 

기존 안드로이드 자바에서는 리사이클러뷰와 어댑터를 사용해서 목록을 생성했다면 

Lazy column 컴포넌트에서는 위와 같이 간단한 코드만을 이용해 스크롤이 가능한 수직 목록을 만들 수 있습니다 ! 

 

 

전체 코드입니다 

MainActivity.kt

package com.example.kotlin_example


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Kotlin_exampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ItemList(cnt = 100)
                }
            }
        }
    }
}


// item list
@Composable
fun ItemList (cnt : Int) {
    val items = List (cnt) { "Item ${it + 1}"} 
    
    
    // Lazy Column 을 사용하여 스크롤 가능한 목록 생성
    LazyColumn {
        items(items) {
            item -> BasicText(text = item,
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp))  // 각 텍스트 간의 마진 추가
        }
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Kotlin_exampleTheme {
//        Greeting("Android")
        ItemList(cnt = 100)
    }
}

 

Jetpack Compose를 사용하면 XML 레이아웃 파일을 생성하지 않고도

 UI 요소를 직접 Kotlin 코드로 간편하게 구축할 수 있습니다 ! 

 

 

시연 영상입니다

 

 

 

감사합니다