Question

我有一个现有的android studio项目，并且想在项目中使用jetpack compose。该文档说如何使用jetpack compose创建一个新项目，但是如何在现有项目中使用它？

Answer 1

Jetpack撰写要求minSdkVersion至少为21。因此请在您的app/build.gradle文件中添加/更新以下内容

android{ 
   //...
   defaultConfig {       
      minSdkVersion 21
      targetSdkVersion 29
      //...
   }
  //...
 }

此外，您还需要使用Android studio 4.1（来自金丝雀频道）才能使用jetpack-compose。

现有项目的最简便方法

注意：当前（截至2020-05-02），最新版本的Android Studio (4.1)在canary频道下，并且为jetpack-compose使用了过时的依赖版本，因此建议手动配置依赖性（如本答案底部所述），直到Google修复此问题为止。

步骤1：

在项目窗口中，right click on the package you want to include the compose activity -> compose -> Empty compose activity。

或

File -> new -> compose -> Empty compose activity.

第2步

将出现一个对话框。填写必填字段，然后单击Finish。

仅此而已。

现有项目的手动配置：现在建议在Android Studio稳定之前

步骤1： 在project/build.gradle文件中使用最新版本的kotlin和gradle插件。

示例：

buildscript {
    ext.kotlin_version = '1.3.71'

    def compose_release_version = "dev10"
    ext.compose_version = "0.1.0-$compose_release_version"
    ext.compose_compiler_extension_version = "0.1.0-$compose_release_version"

    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0-alpha08'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

在您的project/app/build.gradle中，添加以下内容

 android{ 
   //...
   defaultConfig {       
      minSdkVersion 21
      targetSdkVersion 29
      //...
   }
  //...

  kotlinOptions {
       jvmTarget = "1.8"
  }

  buildFeatures {
    compose true
  }
  composeOptions {
    kotlinCompilerVersion "1.3.70-dev-withExperimentalGoogleExtensions-20200424"
    kotlinCompilerExtensionVersion "$compose_compiler_extension_version"
  }
}


dependencies {
  implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version")
  implementation("androidx.compose:compose-runtime:$compose_version")
  implementation("androidx.ui:ui-framework:$compose_version")
  implementation("androidx.ui:ui-layout:$compose_version")
  implementation("androidx.ui:ui-material:$compose_version")
  implementation("androidx.ui:ui-foundation:$compose_version")
  implementation("androidx.ui:ui-animation:$compose_version")
  implementation "androidx.ui:ui-tooling:$compose_version"
  implementation('androidx.appcompat:appcompat:1.1.0')
  implementation('androidx.activity:activity-ktx:1.1.0')
  implementation "androidx.core:core-ktx:1.2.0"
}

步骤2： 将compose活动添加到清单文件中。

 <application      
    android:label="@string/app_name"
     <!-- ... -->
     >
    <activity
        android:name=".ui.MainComposeActivity"
        android:label="@string/title_activity_main_compose"
        android:theme="@style/Theme.ComposeExperiment.NoActionBar">
    </activity>

      <!-- ... -->
  </application>

第3步：

创建jetpack-compose活动。

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.ui.foundation.Text
import androidx.ui.core.setContent
import androidx.ui.material.MaterialTheme
import androidx.ui.tooling.preview.Preview

class MainComposeActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Greeting("Android")
            }
        }
    }
}

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

@Preview
@Composable
fun DefaultPreview() {
    MaterialTheme {
        Greeting("Android")
    }
}

仅此而已。编码愉快：）

Answer 2

只需遵循official setup。添加您的build.gradle：

plugins {
  id 'org.jetbrains.kotlin.android' version '1.4.0'
}

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

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

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion "1.0.0-alpha01"
    }
}

dependencies {
    // You also need to include the following Compose toolkit dependencies.
    implementation 'androidx.compose.ui:ui:1.0.0-alpha01'
    implementation 'androidx.compose.material:material:1.0.0-alpha01'
    implementation 'androidx.ui:ui-tooling:1.0.0-alpha01'
    ...
}

还可以从 1.0.0-alpha01 开始，将Compose与现有的UI设计结合使用。

在布局中添加ComposeView：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <TextView/>

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

在您的Activity中，使用XML ID设置ComposeView，然后调用 setContent() 以使用Compose：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main_std)
    .apply {
        findViewById<ComposeView>(R.id.compose_view).setContent {
           MaterialTheme () {
              Text(text = "Compose text", style = MaterialTheme.typography.body2)
           }
         }
    }
}

将jetpack撰写到现有项目中

2 个答案:

现有项目的最简便方法

现有项目的手动配置：现在建议在Android Studio稳定之前