Jetpack Compose Setting

https://github.com/DNights/JetpackComposeSample/tree/master

DNights/JetpackComposeSample

 

작성일 2021.06.30 기준으로 jetpack Compose는 Android Studio Preview에서 사용이 가능합니다.

preview 버전을 아래 URL 에서 다운로드 받으실 수 있습니다.

https://developer.android.com/studio/preview 

Android Studio Preview  |  Android 개발자  |  Android Developers

 

Jetpack Compose 기본적인 샛팅에 대한 내용은 아래의 URL을 참고하시면 됩니다.

https://developer.android.com/jetpack/compose/setup

Jetpack Compose와 함께 Android 스튜디오 사용  |  Android Developers

 

작성일 2021.6.30 기준으로 Beta09가 최신 버전으로 되어있고 샘플코드도 Beta09로 작성하였습니다.

 

Beta09 버전을 적용하려면 kotlin 버전을 1.5.10 이상을 사용 하셔야 합니다.

 

build.gradle 파일의 전체 내용을 아래와 같습니다.

 

[build.gradle (app module)]

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdkVersion 30

    defaultConfig {
        applicationId "dev.dnights.jetpackcompsesample"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }

    composeOptions {
        kotlinCompilerVersion "1.5.10"
        kotlinCompilerExtensionVersion '1.0.0-beta09'
    }
}

dependencies {

    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.5.0'
    implementation 'androidx.appcompat:appcompat:1.3.0'
    implementation 'com.google.android.material:material:1.3.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    implementation "androidx.compose.compiler:compiler:1.0.0-beta09"
    implementation 'androidx.compose.ui:ui:1.0.0-beta09'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-beta09'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-beta09'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-beta09'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-beta09'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-beta09'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.0-beta02'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-beta09'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-beta09'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-beta09'

    // compose tooling
    implementation "androidx.compose.ui:ui-tooling:1.0.0-beta09"
}

 

[build.gradle(project)]

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.5.10"
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

 

gradle 셋팅을 완료한 이후에 화면에 기존에 사용하던 layout xml을 사용하지 않고

Jetpack Compose 로 작성하여 "Hello World!"를 표기해보겠습니다.

 

MainActivity 코드에서 기존에 setContentView(R.layout.activity_main) 라고 작성하부분을 setContent {Text("Hello world!")}로 변경하여 줍니다.

 

[MainActivity]

package dev.dnights.jetpackcompsesample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.material.Text

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

 

그리고 빌드를 진행하면 아래의 이미지 처럼 디바이스에 "Hello world!" 가 정상적으료 표기되는 것을 확인 할 수 있습니다.

 

 

하지만 IDE에서는 아래의 이미지 처럼 미리보기 회면이 표시되지 않고 있습니다.

미리보기 화면을 띄우기 위해서는 Jetpack Compose Tooling을 추가하여야 합니다.

 

 

https://developer.android.com/jetpack/compose/tooling

Compose 도구  |  Jetpack Compose  |  Android Developers

Jetpack Compose Tooling 을 셋팅하여야 미리보기가 가능합니다.

 

build.gradle 의 dependencies 에 아래내용을 추가 합니다.

// compose tooling
implementation "androidx.compose.ui:ui-tooling:1.0.0-beta09"

 

그리고 @Composable 어노테이션을 추가한 fun 을 만들고

미리보기를 할 fun을 추가하여 아래 어노테이션을 추가합니다.

@Preview(showSystemUi = true)
@Composable

 

 

[MainActivity]

package dev.dnights.jetpackcompsesample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

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

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

@Preview(showSystemUi = true)
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

 

작성후에는 아래 이미지와 같이 우측에 미리보기 화면이 뜨는것을 볼 수 있습니다.

 

간단하게 Jectpack Compose를 셋팅하고 확인해보았고

차후에 여러가지를 해보면서 포스팅을 추가하도록 할 예정입니다.

 

 

[참고 링크]

developer.android.com/jetpack/compose?gclid=Cj0KCQjwytOEBhD5ARIsANnRjVjD_hAic6qAtTny9qwksgZXENRXsgTTs3mIemZgpXVm2w98R1fuV4saAl4bEALw_wcB&gclsrc=aw.ds

Jetpack Compose  |  Android Developers

https://stackoverflow.com/questions/67600344/jetpack-compose-on-kotlin-1-5-0

Jetpack Compose on Kotlin 1.5.0

 

https://foso.github.io/Jetpack-Compose-Playground/

Overview - Jetpack Compose Playground