一些前置的参考
- 支持在 Jetpack 撰写中重用 Android XML 主题的材料组件的库。
复用Android XML 主题
- Compose 布局中的固有特性测量
Compose 有一项规则，即，子项只能测量一次，测量两次就会引发运行时异常。但是，有时需要先收集一些关于子项的信息，然后再测量子项。
借助固有特性，可以先查询子项，然后再进行实际测量。
参考：
https://github.com/material-components/material-components-android-compose-theme-adapter
我的配置
为了少走弯路，去官网，查找稳定版本之间的配合,
全局config.gradle
ext {
kotlinAnnotationsVersion = '1.4.0'
compose_version = '1.3.1'
work_version = "2.7.0"
coroutines_version = '1.6.0'
accompanist_version = '0.23.0'
kotlin_version = '1.7.10'
//android开发版本配置
android = [
compileSdkVersion: 33,
buildToolsVersion: "30.0.3",
applicationId : "xxxxxxx",
minSdkVersion : 21,
targetSdkVersion : 30,
versionCode : 1,
versionName : "1.0",
]
//version配置
versions = [
"junit-version" : "4.13.2",
"junit-test-ext-version" : "1.1.3",
"jnuit-test-espresso-core-version": "3.4.0",
"androidx-test-runner-version" : "1.2.0",
]
//support配置
support = [
"constraint-layout" : "androidx.constraintlayout:constraintlayout:1.1.3",
"appcompat" : 'androidx.appcompat:appcompat:1.4.1',
"recyclerview" : 'androidx.recyclerunit-test-espresso-coresunit-test-espresso-coresview:recyclerview:1.2.1',
"material" : 'com.google.android.material:material:1.1.0',
"animated-vector-drawable" : "androidx.vectordrawable:vectordrawable-animated:1.0.0",
"junit" : "junit:junit:${versions["junit-version"]}",
"junit-test-ext" : "androidx.test.ext:junit:${versions["junit-test-ext-version"]}",
"junit-test-espresso-core" : "androidx.test.espresso:espresso-core:${versions["jnuit-test-espresso-core-version"]}",
"androidx-test-runner" : "androidx.test:runner:${versions["androidx-test-runner-version"]}",
"work-runtime-ktx" : "androidx.work:work-runtime-ktx:${work_version}",
"work-runtime" : "androidx.work:work-runtime:${work_version}",
"kotlinx-coroutines-core" : "org.jetbrains.kotlinx:kotlinx-coroutines-core:${coroutines_version}",
"kotlinx-coroutines-android" : "org.jetbrains.kotlinx:kotlinx-coroutines-android:${coroutines_version}",
"room-runtime" : "androidx.room:room-runtime:2.3.0",
"room-compiler" : "androidx.room:room-compiler:2.3.0",
"room-ktx" : "androidx.room:room-ktx:2.3.0",
"coordinatorlayout" : "androidx.coordinatorlayout:coordinatorlayout:1.1.0",
"multidex" : "com.android.support:multidex:1.0.3",
............
]
}
app.gradle
//use compose
// Integration with activities
implementation 'androidx.activity:activity-compose:1.5.1'
// Compose Material Design
implementation 'androidx.compose.material:material:1.2.1'
// Animations
implementation 'androidx.compose.animation:animation:1.2.1'
// Tooling support (Previews, etc.)
implementation 'androidx.compose.ui:ui-tooling:1.2.1'
// Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.2.1'
注意这两个点 compose_version = '1.3.1' 和 kotlin_version = '1.7.10'
封装了两个控件测试
@Composable
fun SettingsActivityItemText(text: String, iconStart: Int, iconEnd: Int, onClick: () -> Unit) {
MaterialTheme {
Row(
modifier = Modifier
.padding(20.dp, 0.dp, 20.dp, 0.dp)
.fillMaxWidth()
.height(66.dp)
.clickable {
onClick.invoke()
},
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Image(
bitmap = ImageBitmap.imageResource(id = iconStart),
contentDescription = "icon_set_logout"
)
Box(
Modifier
.fillMaxSize()
.padding(start = 16.dp).background(Color.Red),
contentAlignment = Alignment.CenterStart,
propagateMinConstraints = false
) {
Text(
text = text,
style = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Bold,
fontSize = 14.sp, color = text_color_2,
),
textAlign = TextAlign.Justify,
modifier = Modifier.background(Color.Blue),
)
Image(
bitmap = ImageBitmap.imageResource(id = iconEnd),
contentDescription = "icon_set_logout",
Modifier.align(alignment = Alignment.CenterEnd)
)
}
}
}
}
@Composable
fun SettingsActivityLogoText(text: String) {
MaterialTheme {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.icon_home_title_dido),
contentDescription = "icon_home_title_dido"
)
Text(
text = text, Modifier.padding(0.dp, 4.dp, 0.dp, 0.dp),
style = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Bold,
fontSize = 11.sp, color = text_color_1
)
)
}
}
}
好处是，可以针对不同页面在一个脚本文件封装测试
项目中引入
为了兼容原来项目的xml
// 控件1
val logoutCompseView = findViewById<ComposeView>(R.id.compose_logout)
logoutCompseView.setContent {
SettingsActivityItemText(text = getString(R.string.log_out),R.drawable.icon_set_logout,R.drawable.icon_next_page,
onClick = {
你的业务逻辑
})
}
// 控件2
val versionText = findViewById<ComposeView>(R.id.version_text)
versionText.setContent {
SettingsActivityLogoText(text = "${getString(R.string.version)} ${AppUtils.getVersionName(this)}")
}
xml 布局声明的内容
......
<androidx.compose.ui.platform.ComposeView
android:id="@+id/compose_logout"
android:layout_width="match_parent"
android:layout_height="66dp"
android:background="@color/white"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="@id/version_text" />
......
<androidx.compose.ui.platform.ComposeView
android:id="@+id/version_text"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_logout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
......
image.png
去除点击效果
// 去除点击效果
indication = null,
interactionSource = remember {
MutableInteractionSource()
}
混合调用，ComposeView使用xml布局
@Composable
fun SettingActivityComposeAndroidViewItem(text: String, iconStart: Int, iconEnd: Int, onClick: () -> Unit){
MaterialTheme{
AndroidView(modifier = Modifier.fillMaxWidth().clickable {
onClick
},factory = {
val view = LayoutInflater.from(it)
.inflate(R.layout.composeview_android_setting_version,null)
val textView = view.findViewById<TextView>(R.id.tv_version)
textView.setCompoundDrawablesRelativeWithIntrinsicBounds(iconStart,0,iconEnd,0)
textView.text = text
view
})
}
}
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_version"
android:layout_width="match_parent"
android:layout_height="66dp"
android:drawableStart="@drawable/icon_set_update"
android:drawablePadding="16dp"
android:drawableEnd="@drawable/icon_next_page"
android:gravity="center_vertical"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:textColor="@color/text_black_dark"
android:textSize="@dimen/text_title_small"
android:background="@color/white"
android:text="@string/version" />
</LinearLayout>
网友评论