Jetpack Compose - 2

zxcmnb05·2021년 6월 6일
12

Jetpack Compose

목록 보기
2/2
post-thumbnail

Compose의 Layout들

Layout을 들어가기 전에 먼저 Text 3개를 출력하여 보세요

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
    Text(text = "I'm Compose")
    Text(text = "Have a good day")
}

혹시 위의 코드와 유사하게 코드를 짜셨나요? 위의 코드처럼 짜시면 Text 가 서로 겹쳐진 채로 출력될 것 입니다.

Compose 에서는 xml에서의 LinearLayout, FrameLayout과 유사한 함수가 존재 합니다.

@Composable
fun Greeting(name: String) {
    Column { // LinearLayout vertical
        // TODO
    }
    Row { // LinearLayout horizontal
        // TODO
    }
    Box { // FrameLayout
        // TODO
    }
}


[ 2021/06/14 ConstraintLayout 내용 추가 ]

ConstraintLayout을 사용하기 위해서는 종속성을 추가하여야 합니다.

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha06"

종속성을 추가하여 준 다음 아래 코드처럼 사용하시면 됩니다.

    ...

    ConstraintLayout { // ConstraintLayout
        // TODO
    }

    ...

특정 위젯을 식별하기 위해서 createRef() 함수를 사용해 text1, text2, text3을 식별자를 만들어주고 Text에 constrainAs(text1)를 사용하여 Text 위젯을 식별할 수 있게 text1을 연결하여 줍니다.

연결을 한 다음에는 linkTo() 함수를 사용하여 다른 위젯의 위치를 설정해 줄 수 있습니다.


혹시나 수정 및 보완할 점이 있다면 댓글 남겨주세요
profile
안드로이드 개발&공부중인 DGSW5기

관심 있을 만한 포스트

2개의 댓글

comment-user-thumbnail
2021년 6월 6일

혹시 ConstraintLayout은 어떻게 쓰나요?

1개의 답글