[Android] Androidx Jetpack Compose 체험하기

안드로이드 Jetpack 라이브러리 중 Compose라는 것을 알게 되어 테스트를 해보려고 합니다.

 

developer.android.com/jetpack/compose/tutorial?hl=ko

Android 개발자  |  Android Developers

XML을 이용하여 UI를 구성하지 않고, Jetpack Compose 함수들을 이용하여 원하는 요소를 말하면 Compose 컴파일러가 알아서 UI를 만들어주는 라이브러리입니다.

 

살짝 훑어보니, 제가 작년부터 빠져있는 Flutter 와 동일한 방식으로 앱을 구현할 수 있게 도와주는 라이브러리이더군요.

갑자기 꽂혀서 테스트를 해보기로 합니다.

 

현재 Compose 라이브러리는 정식 버전은 아니고 알파 단계입니다.

developer.android.com/jetpack/androidx/versions/all-channel?hl=ko

최근 출시 노트  |  Android 개발자  |  Android Developers

우선 이 라이브러리르 쓰려면, Android studio 도 개발버전으로 받아야합니다.

 

developer.android.com/studio/preview?hl=ko

Android Studio Preview  |  Android 개발자  |  Android Developers

Android studio Canary 버전을 다운로드 해야하는데, 설지 방식은 아니고 압축을 풀고 실행파일을 실행하면 되는 방식이라 기존 Android Studio와의 충돌은 없었습니다.

(Canary가 계속 까나리로 읽혀서.. 찾아보니 새이름인 카나리아였습니다 -_-)

 

압축을 풀고 android-studio\bin\studio64.exe 를 실행 시키면 스튜디오가 실행됩니다. (32bit는 studio.exe 실행)

 

Canary 버전을 받아서 New project를 실행시키면 Empty Compose Activity 라고 나와 있어서, 귀찮은 gradle 설정을 피해갈 수 있습니다.

 

 

 

Compose 라이브러리를 어떻게 활용해서 UI를 만들 수 있는지에 대한 가이드는 아래 페이지를 참고하면 자세하게 나타난다.

developer.android.com/jetpack/compose/tutorial?hl=ko%EF%BB%BF

Android 개발자  |  Android Developers

문제는 라이브러리가 계속해서 업데이트 되는 중인데, 가이드는 이전 라이브러리의 API를 사용하고 있어서  이미 Deprecated 된 놈들이 많다는 것이다 -_-

덕분에 한참 삽질을 해댔다.

 

 

우선 app 레벨의 build.gradle 을 살펴 보았다.

 

compose 관련된 라이브러리가 꽤 많이 추가되어 있다.

그리고 res 폴더를 살펴보았다.

정말 layout 폴더가 사라졌다.

순수 코딩만으로 UI를 구성하겠다는 것이다.

 

위에 가이드가 있긴 하지만 그래도 제대로 동작하는지 확인해보기 위해서 다시한번 작성해보려고 한다.

(변경된 API들도 있고..)

 

우선 빈 액티비티 상태에서 빌드를 해본다.

 

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

빈 화면이 나타난다. 

 

코딩의 기본은 Hello world 아닌가. 바로 text를 뿌려본다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello Compose?")
        }
    }
}

바로 화면에 Text가 나타난다.

오 정말 Flutter 스러워졌다.

 

 

이번엔 Text를 함수로 뽑아 볼 차례다.

 

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            greeting("Hello Compose")
        }
    }
}

fun greeting(name : String) {
    return Text(name)
}

 

이렇게 하면 당연히 Text가 리턴되면서 잘 나타나겠지 하겠지만, 빌드에러가 난다.

 

그럼 return을 빼야하는건가..? 그래도 빌드에러가 난다.

 

그럼 어떻게 해야하는가

 

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            greeting("Hello Compose")
        }
    }
}

@Composable
fun greeting(name : String) {
    Text(name)
}

위에 @Composable 어노테이션을 붙여줘야 한다.

그리고 별도의 return 구문없이 Text나 다른 컴포넌트를 작성해주면 된다.

 

함수에 Composable 을 사용 하면 에뮬레이터나 단말에 apk를 올리지 않고도, IDE상에서 미리보기가 가능하다고 한다.

developer.android.com/jetpack/compose/tooling

Compose tooling  |  Jetpack Compose  |  Android Developers

 

단, 매개 변수를 받는 함수는 프리뷰가 안되기 때문에, 아래와 같이 미리보기 테스트 함수를 만들어 쓸 수 있다.

@Composable
fun greeting(name : String) {
    Text(name)
}

@Preview
@Composable
fun PreviewGreeting() {
    greeting("Hello Compose hi")
}

 

미리보기 함수에는 @Preview 어노테이션을 추가해주면된다. 

미리보기 화면을 보려면 우측 상단에 Code 옆에 Split 화면을 열어 주면된다.

하지만 아무리해도 프리뷰 화면이 나오지 않길래, 확인해보니, ui tool 버전이 beta가 나와있었다.

build.gradle 에 아래와같이 beta 버전으로 변경했더. 잘 동작했다.

 

implementation "androidx.compose.ui:ui-tooling:1.0.0-beta01"

 

sync를 하고, refresh를 눌렀더니 아래와 같이 미리보기를 볼 수 있다.

텍스트를 누르고, Ctrl+ S 키를 눌렀더니, 자동으로 업데이트가 된다. 아직 플루터 수준으로 hot reload 되진 않지만 차츰 좋아 지지 않을까 싶다.

 

UI 누가다 할때 유용할듯하다.

 

다음은 레이아웃 부분이다.

 

아래와같이, Text를 3개 작성하면 어떻게 될 것인가?

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewStory()
        }
    }
}

@Composable
fun NewStory() {
    Text("오늘은 뭘 먹지")
    Text("짜장면이 좋을까")
    Text("떡볶이는 어때?")
}

@Preview
@Composable
fun PreviewGreeting() {
    NewStory()
}

기본적으로 FrameLayout이나 RelativeLayout처럼 좌상단에서 시작이 되며 Text가 모두 겹쳐서 보이게 된다.

때문에 정렬 및 배치를 위해서, 다른 Component로 감싸줘야한다.

 

만약 LinearLayout에 orientation을 vertical로 준것처럼 배치하려면 어떻게 해야할까?

 

Column이란 컴포넌트를 쓰면된다. (이것도 flutter와 동일하다)

@Composable
fun NewStory() {
    Column {
        Text("오늘은 뭘 먹지")
        Text("짜장면이 좋을까")
        Text("떡볶이는 어때?")
    }
}

 

각 요소에 속성을 적용할수도있다.

아래와 같이 modifier를 추가하면 padding값을 적용할 수도 있다.

@Composable
fun NewStory() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("오늘은 뭘 먹지")
        Text("짜장면이 좋을까")
        Text("떡볶이는 어때?")
    }
}

 

이번엔 예제에서처럼 Image를 추가해보려고 한다.

(여기서 예제 코드의 API가 변경된걸 모르고 한참을 삽질했다.)

@Composable
fun NewStory() {
    Column(modifier = Modifier.padding(16.dp)) {
        val image = painterResource(R.drawable.header)
        val imageModifier = Modifier
            .height(180.dp)
            .fillMaxWidth()
        Image(painter = image, contentDescription = "", modifier = imageModifier,
            contentScale = ContentScale.Crop)
        // Layout간의 공백을 추가하기위해Spacer라는 컴포넌트를 추가.
        Spacer(modifier = Modifier.height(16.dp))
        Text("오늘은 뭘 먹지")
        Text("짜장면이 좋을까")
        Text("떡볶이는 어때?")
    }
}

 

 

마지막으로 Material Design을 적용해보려고 한다.

Material Design을 적용하면 Shape를 이용하여 이미지 라운드 처리 등이 가능하다.

@Composable
fun NewStory() {
// Component를 MaterialTheme으로 감싼다.
    MaterialTheme() {
        val typography = MaterialTheme.typography
        Column(modifier = Modifier.padding(16.dp)) {
            val image = painterResource(R.drawable.header)
            val imageModifier = Modifier
                .height(180.dp)
                .fillMaxWidth()
                //아래 clip 을 이용하여 이미지 라운드 처리가 가능하다.
                .clip(RoundedCornerShape(16.dp))
            Image(painter = image, contentDescription = "", modifier = imageModifier,
                contentScale = ContentScale.Crop)
            Spacer(modifier = Modifier.height(16.dp))
            Text("오늘은 뭘 먹지")
            Text("짜장면이 좋을까")
            Text("떡볶이는 어때?")
        }
    }
}

 

텍스트 스타일도 쉽게 지정이 가능하다.

 

@Composable
fun NewStory() {
    MaterialTheme() {
        val typography = MaterialTheme.typography
        Column(modifier = Modifier.padding(16.dp)) {
            val image = painterResource(R.drawable.header)
            val imageModifier = Modifier
                .height(180.dp)
                .fillMaxWidth()
                .clip(RoundedCornerShape(16.dp))
            Image(painter = image, contentDescription = "", modifier = imageModifier,
                contentScale = ContentScale.Crop)
            Spacer(modifier = Modifier.height(16.dp))
            // Text에 Style을 추가해보았다.
            Text("오늘은 뭘 먹지", style = typography.h1)
            Text("짜장면이 좋을까", style = typography.body1)
            Text("떡볶이는 어때?", style = typography.body2)
        }
    }
}

 

 

Compose 라이브러리도 정식 릴리즈가 되면, 유용하게 잘 사용할 수 있을 것다.

귀찮은 xml 작업을 하지 않아도 되고, 직관적이기 때문이다.

 

Compose 라이브러리를 보면서, Google이 Flutter를 더 밀려는게 아닌가 싶은 생각도 든다.

 

끈을 놓지 말고 좀더 공부해야겠음..