Jetpack Compose

바텀 네비를 만드려고 다양한 바텀 네비 디자인을 보고 있었는데

이런 걸 봐버렸다.

특히 2번째 공이 통통 튀는 애니메이션을 보고 아이디어가 샘솟아 버렸다.

현재 이미지 검색앱을 만들고 있는데

이런식으로 토끼를 마스코트로 만들고 있었다

바텀 네비를 보고 든 생각이 저기 있는토끼가 공처럼 점프하는 애니메이션을 넣으면 재밋지 않을까?

하는 생각이 꽂혀 어떻게 만들었는지 알아보게됬다.

https://github.com/exyte/AndroidAnimatedNavigationBar

깃에 이동하면 위 어떻게 구성했는지 볼 수 있는데

Jetpack Compose를 이용해서 구현했다.

무서워서 미루고 있었지만 슬슬 컴포즈도 시도해보는게 좋은 경험이지 않을까 생각이 들어

처음엔 위 깃에 나온 라이브러리를 까봤는데 전혀 모르겠다

Jetpack Compose는 처음부터 공부해야겠다 생각이 들었다.

프로젝트 생성

Jetpack Compose는 기존의 방식과 달리 xml을 사용하지 않는다.

그래서 Empty Activity로 가운데 저 큐브 모양 있는 레이아웃을 선택해서 만든다.

만들게 되면 메인액티비티를 보는데

xml처럼 split, Design을 볼수가 있다.

@Composable 위에 @Preview를 설정하면 이렇게 미리 보기로 볼 수 가 있다.

그리고 @Composable 아래에 있는 함수들을 보면 함수인데 파스칼 케이스로 선언한걸 볼 수 있다.

이걸 소문자로 고치게되면 경고를 하기에 @Composable 아래에 있는 함수들은 파스칼 케이스로 만드는걸 권장한다

Composable에 관한건 setContent부분을 보고 말하겠다.

setContent

setContent {
            PracticeComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }

onCreate까지는 기존의 xml을 쓰던 방식과 같다 하지만 그 밑에 setContent가 뭐냐?

setContent안에 있는걸로 Ui를 구성한다고 보면 된다.

PracticeComposeTheme는 theme패키지를 보면 구성되어있는데 여기선 테마를 설정해주고

Surface안에 내용물을 넣어주면 된다.

Modifier.fillMaxSize()는 xml에서 너비와 높이를 match_parent로 설정해준것 처럼 보면된다.

뒤에 배경 색을 칠해주고

내용물로 Greeting("Android")를 넣어줘서 위의 이미지처럼 Hello Android!를 출력한것이다

setContent를 간단하게 변경해보겠다.

setContent {
            PracticeComposeTheme {
                Surface(color = colorResource(id = R.color.teal_200)) {
                    Column(//Row
                        modifier = Modifier
                            .fillMaxSize()
                            .background(color = Color.Cyan)
                            .padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.SpaceBetween
                    ) {
                        Greeting(name = "Android")
                        Greeting(name = "World")
                    }
                }
            }
        }

Surface

Surface의 색상은 원래 Color(0xFF009688)이런식으로 받는데

리소스에 정의된 color를 사용하기 위해 colorResource를 이용해 정해줬다

xml로 치면 레이아웃같은 느낌인것 같다.

색상외에도

public fun Surface(
    modifier: Modifier,
    shape: Shape,
    color: Color,
    contentColor: Color,
    tonalElevation: Dp,
    shadowElevation: Dp,
    border: BorderStroke?,
    content: @Composable () -> Unit
): Unit

이런식으로 구성되어 있기 때문에 다양하게 변경할수 있다.

Column

Column은 리니어 레이아웃같은 느낌이었는데,

orientation이 vertical인 리니어 레이아웃같았다. 아래 문자들이 세로로 정렬되는 특징이 있다

Raw를 쓰면 horizontal 처럼 가로로 정렬된다.

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {
    val measurePolicy = columnMeasurePolicy(verticalArrangement, horizontalAlignment)
    Layout(
        content = { ColumnScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}

Column을 들어가면 이런식으로 설정되어 있다

Modifier

modifier에서 사이즈 백그라운드 컬러 패딩등등을 쓸수 있는데 내부는

companion object : Modifier {
        override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R = initial
        override fun <R> foldOut(initial: R, operation: (Element, R) -> R): R = initial
        override fun any(predicate: (Element) -> Boolean): Boolean = false
        override fun all(predicate: (Element) -> Boolean): Boolean = true
        override infix fun then(other: Modifier): Modifier = other
        override fun toString() = "Modifier"
    }

이렇게 구성되어있다.

그렇다,뭔지 모르겠다...

자동 완성목록을 보면 투명도 블러 사이즈 등등 시각적인걸 설정할 수 있다.

정렬

Column에서 Modifier아래엔

                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.SpaceBetween

이런식으로 설정된걸 볼 수 있는데

여기서 Column 안의 뷰들의 Gravity를 설정해준 느낌이라 보면된다

Horizon은 중앙으로 Vertical은 위아래로 나눠서 배치시켰다

이걸 프리뷰로 이동시켜서보면

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    PracticeComposeTheme {
        Surface(color = colorResource(id = R.color.teal_200)) {
            Column(//Row
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = Color.Cyan)
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.SpaceBetween
            ) {
                Greeting(name = "Android")
                Greeting(name = "World")
            }
        }
    }
}

앱을 실행시키지않고 디자인창에서 이런식으로 나타내는걸 볼 수 있다.