[Kotlin] Compose 입문 #1 - Column, Row, 컴포저블, 리스트

Compose가 뭔데!

xml 없이 화면 UI 구성할 수 있는 툴

제트팩 컴포즈

모던 안드로이드 컴포즈 입문을 통해 공부해 보도록 하겠다

 

일단 나는 플라밍고 버전을 쓰고있었고,

New Project를 하니 Empty Compose Activity가 나오지 않았다

해커톤 협업하느라 버전 업그레이드를 했는데 다시 다운그레이드 해보자

 

Electric Eel 2022.1.1 버전으로 다운그레이드 했다

이 과정에서 안드로이드 이전 버전이 2021년까지만 뜨는 현상이 있었는데

언어 설정을 영어로 바꾸니 목록이 정상적으로 모두 떴다

 

아무튼 ! 버전 다운그레이드 하니 Empty Compose Activity 뜬다 짝짝

 

 

Column, Row, Text

Like,, Linear Layout

Column{} -> 수직으로 정렬

Row -> 수평으로 정렬

 

 

Row - 가로

Column - 세로

Spacer - 문자열 사이 간격을 주고 싶을 때

Row {
                        Text("Hello")
                        Spacer(Modifier.width(16.dp))
                        Text("World")
                    }

xml dp와 달리 Int형 변수에 .찍고 dp

Modifier 사용해서 크기, 길이, 속성 등을 조정할 수 있다!

Column(
    modifier = Modifier
            // 순서에 상관이 있음을 유의!
        .fillMaxSize()  // 화면 꽉채우기
        .background(color = Color.Gray)
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,  // 중앙 정렬
    verticalArrangement = Arrangement.SpaceBetween
){
Text("Hello")
Text("World")
}

text 적는 부분을 Row(Column)Scope 라고 한다

 

 

 

컴포저블, 프리뷰

 

컴포저블은 함수명 첫 글자 대문자!

 

Box 컴포저블

Box(modifier = Modifier.background(color = Color.Green)) {
                Text("Hello")
                Text("12344~~~~")
            }

Box로 겹쳐서 나타내기

setContent {
            Box(modifier = Modifier
                .background(color = Color.Green)
                .fillMaxWidth()
                .height(200.dp),
            contentAlignment = Alignment.Center,
            ) {
                Text("Hello")
                Box(
                    modifier = Modifier.fillMaxSize()
                        .padding(16.dp),

                    contentAlignment = Alignment.BottomEnd,
                ) {
                    Text("12344~~~~")
                }
            }

컴포저블, 박스 등을 이용하여 레이아웃 구성하기

 

 

 

리스트, LazyColumn

// 스크롤 정보를 기억해주는 객체
val scrollState =rememberScrollState()

Column(
                modifier = Modifier
                    .background(color = Color.Green)
                    .fillMaxWidth()
                    .verticalScroll(scrollState)   // 스크롤 추가
            ) {
            }

일반 Column 이용해서 스크롤뷰 만들기

LazyColumn을 이용하면 scrollState 없이도

스크롤이 가능하다

// 컴포즈가 시작되는 영역은 setContent 부터!
        setContent {

            // for문으로 작성 불가능
            LazyColumn(
                modifier = Modifier
                    .background(color = Color.Green)
                    .fillMaxWidth()
            ) {
                // 50개짜리 아이템 만들기
                items(50) {index -> // item의 인덱스
                    Text("글씨 $index")
                }
            }
        }

LazyColumn에서 padding, item간 간격 주기

// 컴포즈가 시작되는 영역은 setContent 부터!
        setContent {

            // for문으로 작성 불가능
            LazyColumn(
                modifier = Modifier
                    .background(color = Color.Green)
                    .fillMaxWidth(),
                contentPadding = PaddingValues(16.dp),   // 사방에 패딩 두르기
                verticalArrangement = Arrangement.spacedBy(4.dp),   // item 간의 스페이스 적용

            ) {
                item {
                    Text("Header")
                }
                // 50개짜리 아이템 만들기
                items(50) {index -> // item의 인덱스
                    Text("글씨 $index")
                }
                item {
                    Text("Footer")
                }
            }
        }