尝试jetpack compose

官网地址: https://developer.android.google.cn/jetpack/compose/interop/adding

初始准备

1.在项目级build.gradle的buildscript中

dependencies {
	classpath "com.android.tools.build:gradle:7.0.3"
	classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"
}

2.在module级build.gradle中

android {
    defaultConfig {
        ...
        //minSdkVersion需要大于等于 21
        minSdkVersion 21
        ...
    }

    buildFeatures {
        compose true
    }
    ...
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.0.5'
    }
}

dependencies{
	...
	//添加compose 工具包依赖
	// Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.0.5'
    // Animations
    implementation 'androidx.compose.animation:animation:1.0.5'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.5'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.5'
    // When using a MDC theme
    implementation "com.google.android.material:compose-theme-adapter:1.0.5"
    // When using a AppCompat theme
    implementation "com.google.accompanist:accompanist-appcompat-theme:0.16.0"
}

使用compose

1.在新建的activity中使用

override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	//替换之前的setContentView()
    setContent {
    	MaterialTheme {
	        Scaffold(backgroundColor = Color.White) {
            	HelloText()	        
            }
        }
    }
}

@Composable
fun HelloText(){
	Text(text = "hello")
}

2.在已有的activity中使用

2.1 在原有的布局中先用原来的view布局好，在用ComposeView代替原来的view，保留布局参数,id,代码如下

//先用原来的view布局
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv"
        android:text="我是已有的activity"
        android:textSize="16sp"
        android:textColor="@color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <View
        android:id="@+id/v_compose"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>
//用ComposeView代替原来的view 代替之后代码如下
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv"
        .../>

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/v_compose"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

2.2 在已有的activity中

override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_test)
	//先用原来的方法，通过id找到这个view
	val composeView = findViewById<ComposeView>(R.id.v_compose)
	//在用这个view调用setContent来用compose来写页面
	composeView.setContent {
    	MaterialTheme {
    		HelloText()
        }
    }
}

@Composable
fun HelloText(){
	Text(text = "hello 我是compose view")
}