[英]Add jetpack compose to existing project
I have an existing android studio project and I want to use jetpack compose in my project.我有一个现有的 android 工作室项目,我想在我的项目中使用 jetpack compose。 The documentation says how to create a new project with jetpack compose, but how to use it with existing projects?
文档说明了如何使用 jetpack compose 创建一个新项目,但是如何将它与现有项目一起使用?
Jetpack compose requires a minSdkVersion
of at least 21. So add/update the following in your app/build.gradle
file Jetpack compose 要求
minSdkVersion
至少为 21。因此在您的app/build.gradle
文件中添加/更新以下内容
android{
//...
defaultConfig {
minSdkVersion 21
targetSdkVersion 29
//...
}
//...
}
Also you need to use Android studio (from canary channel) in order to use jetpack-compose with the latest features.您还需要使用Android 工作室(来自金丝雀频道)才能使用最新功能的 jetpack-compose。
Step 1:步骤1:
In project window, right click on the package you want to include the compose activity -> compose -> Empty compose activity
.在项目 window 中,
right click on the package you want to include the compose activity -> compose -> Empty compose activity
。
or或者
File -> new -> compose -> Empty compose activity.
Step 2第2步
A dialog window will appear.将出现一个对话框 window。 Fill up the required fields and click
Finish
.填写必填字段,然后单击
Finish
。
That's all.就这样。
Step 1: Use latest version of kotlin and gradle plugins in your project/build.gradle
file.第 1 步:在
project/build.gradle
文件中使用最新版本的 kotlin 和 gradle 插件。
Example:例子:
buildscript {
ext {
compose_version = '1.0.0-beta08'
}
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:7.1.0-alpha02'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10"
}
}
allprojects {
repositories {
google()
jcenter()
}
}
In your project/app/build.gradle
, add the following在您的
project/app/build.gradle
中,添加以下内容
android{
//...
defaultConfig {
minSdkVersion 21
targetSdkVersion 30
//...
}
//...
kotlinOptions {
jvmTarget = "1.8"
useIR = true
}
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion compose_version
kotlinCompilerVersion '1.4.32'
}
}
dependencies {
implementation 'androidx.core:core-ktx:1.5.2'
implementation 'androidx.appcompat:appcompat:1.3.0'
implementation 'com.google.android.material:material:1.3.0'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
implementation 'androidx.activity:activity-compose:1.3.0-beta1'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
}
Step 2: Add the compose activity into your manifest file.第 2 步:将 compose 活动添加到清单文件中。
<application
android:label="@string/app_name"
<!-- ... -->
>
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.MyApp.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- ... -->
</application>
Step 3:第 3 步:
Create the jetpack-compose Activity.创建 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")
}
}
That's all.就这样。 Happy coding:)
快乐编码:)
Just follow theofficial setup .只需按照官方设置即可。 Add in your
build.gradle
:添加您的
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'
...
}
Also starting with 1.0.0-alpha01
you can combine Compose with your existing UI design.同样从
1.0.0-alpha01
开始,您可以将 Compose 与您现有的 UI 设计相结合。
Add in your layout the ComposeView
:在您的布局中添加
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>
In your Activity
, set the ComposeView
using the XML ID, and call setContent()
to use Compose:在您的
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)
}
}
}
}
In your root level
build.gradle Add compose version variable inside buildscript
在您的
root level
build.gradle 在buildscript
中添加 compose 版本变量
ext {
compose_version = '1.0.1'
}
Now in your app level
build.gradle add buildFeatures and composeOptions inside your android { } block现在在您的
app level
build.gradle 在您的 android { } 块中添加 buildFeatures 和 composeOptions
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion compose_version
}
and in your depenendencies在你的依赖中
// Jetpack dependencies
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation 'androidx.activity:activity-compose:1.4.0'
// Jetpack debug dependencies
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
Now you can start using compose in your existing/new project现在您可以开始在现有/新项目中使用 compose
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// your compose code goes here
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.