JetpackComposeを既存のプロジェクトで試す

こちらを参考にしながらとりあえず触ってみました.

developer.android.com

まずはセットアップ

こちらを参考にbuild.gradleに変更を加えていきます...が先に言っておくとうまく動きませんでした笑 developer.android.com

Could not find method buildFeatures() for arguments...

私の場合まずは以下のエラーが出ました.

gradleのバージョンがよろしく無かったようですので, projectのbuild.gradleとgradle-wrapper.properties に変更を加えます.

classpath 'com.android.tools.build:gradle:4.2.0-alpha10'

distributionUrl=https://services.gradle.org/distributions/gradle-6.6.1-bin.zip

これでsyncに成功しましたが以下のエラーがでてきてビルドに失敗します.

e: java.lang.IncompatibleClassChangeError: Found interface org.jetbrains.kotlin.backend.common.extensions.IrPluginContext, but class was expected

試行錯誤して, 結局こうなりました... devじゃなく, alpha版をつかったり, その他諸々dependenciesに追加しています.

projectのgradleはこちら.

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext.kotlin_version = '1.4.0'
    ext.compose_version = '1.0.0-alpha01'
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.0-alpha10'
        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()
        jcenter()
        maven { url 'https://dl.bintray.com/lisawray/maven' }
    }
}

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

appのgradle. 既存プロジェクトに使用しているライブラリも含まれています.

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.0"
    defaultConfig {
        applicationId "wally.wally.android_practice"
        minSdkVersion 23
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    dataBinding {
        enabled true
    }
    androidExtensions {
        experimental = true
    }
    viewBinding {
        enabled = true
    }
    buildFeatures {
        compose true
    }


    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

    composeOptions {
        kotlinCompilerVersion "1.4.0"
        kotlinCompilerExtensionVersion = '1.0.0-alpha01'
    }
}


tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
    kotlinOptions {
        jvmTarget = "1.8"
        freeCompilerArgs += ["-Xallow-jvm-ir-dependencies", "-Xskip-prerelease-check"]
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation 'com.google.android.material:material:1.2.0-beta01'
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    def groupie_version = "2.8.0"
    implementation "com.xwray:groupie:$groupie_version"
    implementation "com.xwray:groupie-kotlin-android-extensions:$groupie_version"
    implementation "com.xwray:groupie-viewbinding:$groupie_version"
    // ここからしたが追加したもの
    implementation "androidx.compose.runtime:runtime:$compose_version"
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.foundation:foundation-layout:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.material:material-icons-extended:$compose_version"
    implementation "androidx.compose.foundation:foundation:$compose_version"
    implementation "androidx.compose.animation:animation:$compose_version"
    implementation "androidx.ui:ui-tooling:$compose_version"
}

UIを作る！

めっちゃ簡単でした. 以下は最終的な1つのアクティビティです.

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

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

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Previewを見ることもできます...！感動.