将 jetpack compose 添加到现有项目

Dar*_*ish 8 android android-layout kotlin android-jetpack-compose

我有一个现有的 android studio 项目,我想在我的项目中使用 jetpack compose。文档说明了如何使用 jetpack compose 创建新项目,但如何将其与现有项目一起使用?

Dar*_*ish 9

Jetpack compose 需要minSdkVersion至少 21 个。因此在您的app/build.gradle文件中添加/更新以下内容

android{ 
   //...
   defaultConfig {       
      minSdkVersion 21
      targetSdkVersion 29
      //...
   }
  //...
 }
Run Code Online (Sandbox Code Playgroud)

此外,您还需要使用Android Studio (来自 Canary 频道)才能使用具有最新功能的 jetpack-compose。

现有项目的最简单方法

第1步:

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

或者

File -> new -> compose -> Empty compose activity.
Run Code Online (Sandbox Code Playgroud)

第2步

将出现一个对话窗口。填写必填字段并单击Finish

在此处输入图片说明

就这样。


现有项目的手动配置

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

例子:

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()
    }
}
Run Code Online (Sandbox Code Playgroud)

在您的 中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"
}
Run Code Online (Sandbox Code Playgroud)

第 2 步: 将撰写活动添加到您的清单文件中。

 <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>
Run Code Online (Sandbox Code Playgroud)

第 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")
    }
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

在此处输入图片说明

就这样。快乐编码:)