Compose (12/N) - 与xml互操作
一、xml中使用Compose
<androidx.compose.ui.platform.ComposeViewandroid:id="@+id/composeView"android:layout_width="match_parent"android:layout_height="match_parent"/>
val composeView = findViewById<ComposeView>(R.id.composeView)
composeView.setContent { }
二、Compose中使用xml
@Composable
fun SwipeableSample(str: String) {val content = remember(str){ Html.fromHtml(str, 1) }AndroidView(factory = { context ->TextView(context).apply {movementMethod = LinkMovementMethod.getInstance() //超链接可点击}},update = {textView ->textView.text = content})
}
三、使用Navigation
public fun NavHost( navController: NavHostController, startDestination: String, //默认显示的界面 modifier: Modifier = Modifier, route: String? = null, builder: NavGraphBuilder.() -> Unit //构建导航图 ) |
public fun NavGraphBuilder.composable( route: String, //路线到哪去,类似于传统写法中的action arguments: List<NamedNavArgument> = emptyList(), deepLinks: List<NavDeepLink> = emptyList(), content: @Composable (NavBackStackEntry) -> Unit ) |
//枚举类,定义三个页面
enum class Region(val tag: String,val content: @Composable () -> Unit
) {Home("Home", { Home() }),Msg("Msg", { Msg() }),Mine("Mine", { Mine() })
}
@Composable
fun Home() {Box(modifier = Modifier.background(Color.Blue).fillMaxSize().wrapContentSize(align = Alignment.Center)) {Text(text = "Home", fontSize = 100.sp, color = Color.White)}
}
@Composable
fun Msg() {Box(modifier = Modifier.background(Color.Green).fillMaxSize().wrapContentSize(align = Alignment.Center)) {Text(text = "Msg", fontSize = 100.sp, color = Color.White)}
}
@Composable
fun Mine() {Box(modifier = Modifier.background(Color.Red).fillMaxSize().wrapContentSize(align = Alignment.Center)) {Text(text = "Mine", fontSize = 100.sp, color = Color.White)}
}
//根节点
@Composable
fun Screen(modifier: Modifier = Modifier,navController: NavHostController
) {Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Top) {SwitchButton(modifier = modifier, navController = navController)SwitchRegion(modifier = modifier, navController = navController)}
}
//三个按钮点击切换
@Composable
fun SwitchButton(modifier: Modifier = Modifier,navController: NavHostController
) {Row(modifier = modifier.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceAround) {Button(onClick = { navController.navigate(Region.Home.tag) }) {Text(text = "Home")}Button(onClick = { navController.navigate(Region.Msg.tag) }) {Text(text = "Msg")}Button(onClick = { navController.navigate(Region.Mine.tag) }) {Text(text = "Mine")}}
}
//切换区域
@Composable
fun SwitchRegion(modifier: Modifier = Modifier,navController: NavHostController
) {NavHost(navController = navController,startDestination = Region.Home.tag,) {composable(route = Region.Home.tag){Region.Home.content()}composable(route = Region.Msg.tag){Region.Msg.content()}composable(route = Region.Mine.tag){Region.Mine.content()}}
}