• Kotlin Compose 与原生 嵌套使用

    依赖

    1. android {
    2.     ...
    3.     kotlinOptions {
    4.         jvmTarget = '1.8'
    5.         useIR = true
    6.     }
    7.     buildFeatures {
    8.         ...
    9.         compose true
    10.     }
    11.     composeOptions {
    12.         kotlinCompilerExtensionVersion rootProject.composeVersion
    13.     }
    14. }
    15.  
    16. dependencies {
    17.     ...
    18.     // Compose
    19.     implementation "androidx.compose.runtime:runtime:$rootProject.composeVersion"
    20.     implementation "androidx.compose.ui:ui:$rootProject.composeVersion"
    21.     implementation "androidx.compose.foundation:foundation:$rootProject.composeVersion"
    22.     implementation "androidx.compose.foundation:foundation-layout:$rootProject.composeVersion"
    23.     implementation "androidx.compose.material:material:$rootProject.composeVersion"
    24.     implementation "androidx.compose.runtime:runtime-livedata:$rootProject.composeVersion"
    25.     implementation "androidx.compose.ui:ui-tooling:$rootProject.composeVersion"
    26.     implementation "com.google.android.material:compose-theme-adapter:$rootProject.composeVersion"
    27.     ...
    28. }

    用到的版本如下

    1. /*
    2.  * Copyright 2018 Google LLC
    3.  *
    4.  * Licensed under the Apache License, Version 2.0 (the "License");
    5.  * you may not use this file except in compliance with the License.
    6.  * You may obtain a copy of the License at
    7.  *
    8.  *     https://www.apache.org/licenses/LICENSE-2.0
    9.  *
    10.  * Unless required by applicable law or agreed to in writing, software
    11.  * distributed under the License is distributed on an "AS IS" BASIS,
    12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13.  * See the License for the specific language governing permissions and
    14.  * limitations under the License.
    15.  */
    16.  
    17. buildscript {
    18.     // Define versions in a single place
    19.     ext {
    20.         // Sdk and tools
    21.         compileSdkVersion = 31
    22.         minSdkVersion = 21
    23.         targetSdkVersion = 31
    24.  
    25.         // App dependencies
    26.         appCompatVersion = '1.4.1'
    27.         composeVersion = '1.1.1'
    28.         constraintLayoutVersion = '2.1.3'
    29.         coreTestingVersion = '2.1.0'
    30.         coroutinesVersion = "1.6.0"
    31.         // TODO: Updating to 3.4.0 leads to dependency conflicts
    32.         espressoVersion = '3.3.0'
    33.         fragmentVersion = '1.4.1'
    34.         glideVersion = '4.12.0'
    35.         gradleVersion = '7.2.0'
    36.         gsonVersion = '2.8.6'
    37.         junitVersion = '4.13.2'
    38.         kotlinVersion = '1.6.10'
    39.         ktlintVersion = '0.37.2'
    40.         ktxVersion = '1.7.0'
    41.         lifecycleVersion = '2.4.0'
    42.         materialVersion = '1.5.0'
    43.         materialComposeAdapterVersion = '1.1.5'
    44.         navigationVersion = '2.5.0-alpha01'
    45.         recyclerViewVersion = '1.2.1'
    46.         roomVersion = '2.4.1'
    47.         runnerVersion = '1.0.1'
    48.         truthVersion = '1.1.2'
    49.         testExtJunit = '1.1.3'
    50.         uiAutomatorVersion = '2.2.0'
    51.         viewPagerVersion = '1.0.0'
    52.         workVersion = '2.7.1'
    53.     }
    54.  
    55.     repositories {
    56.         google()
    57.         mavenCentral()
    58.     }
    59.  
    60.     dependencies {
    61.         classpath "com.android.tools.build:gradle:$gradleVersion"
    62.         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
    63.         classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$navigationVersion"
    64.     }
    65. }
    66.  
    67. plugins {
    68.     id "com.diffplug.spotless" version "5.12.4"
    69. }
    70.  
    71. allprojects {
    72.     repositories {
    73.         google()
    74.         mavenCentral()
    75.     }
    76. }
    77.  
    78. spotless {
    79.     kotlin {
    80.         target "**/*.kt"
    81.         targetExclude("$buildDir/**/*.kt")
    82.         targetExclude('bin/**/*.kt')
    83.         ktlint(ktlintVersion)
    84.     }
    85. }

    这次我们修改 原生布局为Compse

    这些布局为 

    ConstraintLayout  且里面有四个TextView
    1.       <androidx.constraintlayout.widget.ConstraintLayout
    2.                 android:layout_width="match_parent"
    3.                 android:layout_height="match_parent"
    4.                 android:layout_margin="@dimen/margin_normal">
    5.  
    6.                 <TextView
    7.                     android:id="@+id/plant_detail_name"
    8.                     android:layout_width="0dp"
    9.                     android:layout_height="wrap_content"
    10.                     android:layout_marginStart="@dimen/margin_small"
    11.                     android:layout_marginEnd="@dimen/margin_small"
    12.                     android:gravity="center_horizontal"
    13.                     android:text="@{viewModel.plant.name}"
    14.                     android:textAppearance="?attr/textAppearanceHeadline5"
    15.                     app:layout_constraintEnd_toEndOf="parent"
    16.                     app:layout_constraintStart_toStartOf="parent"
    17.                     app:layout_constraintTop_toTopOf="parent"
    18.                     tools:text="Apple" />
    19.  
    20.                 <TextView
    21.                     android:id="@+id/plant_watering_header"
    22.                     android:layout_width="0dp"
    23.                     android:layout_height="wrap_content"
    24.                     android:layout_marginStart="@dimen/margin_small"
    25.                     android:layout_marginTop="@dimen/margin_normal"
    26.                     android:layout_marginEnd="@dimen/margin_small"
    27.                     android:gravity="center_horizontal"
    28.                     android:text="@string/watering_needs_prefix"
    29.                     android:textColor="?attr/colorAccent"
    30.                     android:textStyle="bold"
    31.                     app:layout_constraintEnd_toEndOf="parent"
    32.                     app:layout_constraintStart_toStartOf="parent"
    33.                     app:layout_constraintTop_toBottomOf="@id/plant_detail_name" />
    34.  
    35.                 <TextView
    36.                     android:id="@+id/plant_watering"
    37.                     android:layout_width="0dp"
    38.                     android:layout_height="wrap_content"
    39.                     android:layout_marginStart="@dimen/margin_small"
    40.                     android:layout_marginEnd="@dimen/margin_small"
    41.                     android:gravity="center_horizontal"
    42.                     app:layout_constraintEnd_toEndOf="parent"
    43.                     app:layout_constraintStart_toStartOf="parent"
    44.                     app:layout_constraintTop_toBottomOf="@id/plant_watering_header"
    45.                     app:wateringText="@{viewModel.plant.wateringInterval}"
    46.                     tools:text="every 7 days" />
    47.  
    48.                 <TextView
    49.                     android:id="@+id/plant_description"
    50.                     style="?android:attr/textAppearanceMedium"
    51.                     android:layout_width="0dp"
    52.                     android:layout_height="wrap_content"
    53.                     android:layout_marginStart="@dimen/margin_small"
    54.                     android:layout_marginTop="@dimen/margin_small"
    55.                     android:layout_marginEnd="@dimen/margin_small"
    56.                     android:minHeight="@dimen/plant_description_min_height"
    57.                     app:layout_constraintEnd_toEndOf="parent"
    58.                     app:layout_constraintStart_toStartOf="parent"
    59.                     app:layout_constraintTop_toBottomOf="@id/plant_watering"
    60.                     app:renderHtml="@{viewModel.plant.description}"
    61.                     tools:text="Details about the plant" />
    62.  
    63.             </androidx.constraintlayout.widget.ConstraintLayout>

    我们注释掉这些布局并替换为

    1.     <androidx.compose.ui.platform.ComposeView
    2.                 android:id="@+id/compose_view"
    3.                 android:layout_width="match_parent"
    4.                 android:layout_height="match_parent">
    5.  
    6.             </androidx.compose.ui.platform.ComposeView>

    ComposeView

     找到这个view的Id并对其进行设置

    整个Compose的代码如下

    1. /*
    2.  * Copyright 2020 Google LLC
    3.  *
    4.  * Licensed under the Apache License, Version 2.0 (the "License");
    5.  * you may not use this file except in compliance with the License.
    6.  * You may obtain a copy of the License at
    7.  *
    8.  *     https://www.apache.org/licenses/LICENSE-2.0
    9.  *
    10.  * Unless required by applicable law or agreed to in writing, software
    11.  * distributed under the License is distributed on an "AS IS" BASIS,
    12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13.  * See the License for the specific language governing permissions and
    14.  * limitations under the License.
    15.  */
    16.  
    17. package com.google.samples.apps.sunflower.plantdetail
    18.  
    19. import android.content.res.Configuration
    20. import android.text.method.LinkMovementMethod
    21. import android.widget.TextView
    22. import androidx.compose.foundation.layout.*
    23. import androidx.compose.material.MaterialTheme
    24. import androidx.compose.material.Surface
    25. import androidx.compose.material.Text
    26. import androidx.compose.runtime.Composable
    27. import androidx.compose.runtime.getValue
    28. import androidx.compose.runtime.livedata.observeAsState
    29. import androidx.compose.ui.Alignment
    30. import androidx.compose.ui.Modifier
    31. import androidx.compose.ui.platform.LocalContext
    32. import androidx.compose.ui.res.dimensionResource
    33. import androidx.compose.ui.res.stringResource
    34. import androidx.compose.ui.text.font.FontWeight
    35. import androidx.compose.ui.tooling.preview.Preview
    36. import androidx.compose.ui.unit.dp
    37. import androidx.compose.ui.viewinterop.AndroidView
    38. import androidx.core.text.HtmlCompat
    39. import androidx.core.widget.TextViewCompat
    40. import com.google.android.material.composethemeadapter.MdcTheme
    41. import com.google.samples.apps.sunflower.R
    42. import com.google.samples.apps.sunflower.data.Plant
    43. import com.google.samples.apps.sunflower.viewmodels.PlantDetailViewModel
    44. import kotlin.math.min
    45.  
    46. @Composable //Stateful :opinionated
    47. fun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) {
    48.     val currentPlant by plantDetailViewModel.plant.observeAsState()
    49.  
    50.     currentPlant?.let { plant ->
    51.         PlantDetailDescription(plant)
    52.     }
    53.  
    54. }
    55.  
    56. @Composable //Stateless:Preview+reusable
    57. private fun PlantDetailDescription(plant: Plant) {
    58.     Surface {
    59.         Column(modifier = Modifier
    60.             .padding(dimensionResource(id = R.dimen.margin_normal))) {
    61.             PlantName(plant.name)
    62.             //Watering
    63.             PlantWatering(plant.wateringInterval)
    64.             //PlantDescription
    65.             PlantDescription(description = plant.description)
    66.         }
    67.     }
    68.  
    69. }
    70.  
    71. @Composable
    72. fun PlantWatering(wateringInterval: Int) {
    73.     Column(horizontalAlignment = Alignment.CenterHorizontally,
    74.         modifier = Modifier
    75.             .padding(horizontal = dimensionResource(id = R.dimen.margin_normal)
    76.             )
    77.             .fillMaxWidth()
    78.     ) {
    79.         Text(text = stringResource(id = R.string.watering_needs_prefix),
    80.             modifier = Modifier
    81.                 .padding(top = dimensionResource(id = R.dimen.margin_normal)),
    82.             color = MaterialTheme.colors.primaryVariant,
    83.             fontWeight = FontWeight.Bold
    84.         )
    85.  
    86.         val resources = LocalContext.current.resources
    87.         val quantityString = resources.getQuantityString(
    88.             R.plurals.watering_needs_suffix,
    89.             wateringInterval, wateringInterval
    90.         )
    91.         Text(text = quantityString)
    92.     }
    93. }
    94.  
    95. @Composable
    96. fun PlantDescription(description: String) {
    97.     AndroidView(factory = { context ->
    98.         TextView(context).apply {
    99.             movementMethod = LinkMovementMethod.getInstance()
    100.             TextViewCompat.setTextAppearance(this, android.R.style.TextAppearance_Medium)
    101.         }
    102.     },
    103.         update = { tv ->
    104.             tv.text = HtmlCompat.fromHtml(description, HtmlCompat.FROM_HTML_MODE_COMPACT)
    105.         },
    106.         modifier =
    107.         Modifier
    108.             .padding(horizontal = dimensionResource(id = R.dimen.margin_small))
    109.             .padding(top = dimensionResource(id = R.dimen.margin_small))
    110.             .heightIn(min = dimensionResource(id = R.dimen.plant_description_min_height))
    111.     )
    112.  
    113. }
    114.  
    115.  
    116. @Composable
    117. fun PlantName(name: String) {
    118.     Text(text = name,
    119.         modifier = Modifier
    120.             .padding(horizontal = dimensionResource(id = R.dimen.margin_small))
    121.             .fillMaxWidth()
    122.             .wrapContentWidth(Alignment.CenterHorizontally),
    123.         style = MaterialTheme.typography.h5
    124.     )
    125. }
    126.  
    127. @Preview
    128. @Composable
    129. fun PlantNamePreview() {
    130.     PlantName(name = "狗蛋")
    131. }
    132. @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
    133. @Preview
    134. @Composable
    135. fun PlantDetailDescriptionPreview() {
    136.     val fakePlant = Plant("asd", "asdas", "dasdahjskdhjasdj", 1, 3, "")
    137.     MdcTheme() {
    138.         PlantDetailDescription(plant = fakePlant)
    139.     }
    140. }
    141.  
    142.  
    143.

    在第四个的TextView用到了spnner 也就是html文本

    其实。这个时候compose是暂时不支持的

    我们要切换到原生view

    大家看到这个了吗

    PlantDescription
    1.  
    2. @Composable
    3. fun PlantDescription(description: String) {
    4.     AndroidView(factory = { context ->
    5.         TextView(context).apply {
    6.             movementMethod = LinkMovementMethod.getInstance()
    7.             TextViewCompat.setTextAppearance(this, android.R.style.TextAppearance_Medium)
    8.         }
    9.     },
    10.         update = { tv ->
    11.             tv.text = HtmlCompat.fromHtml(description, HtmlCompat.FROM_HTML_MODE_COMPACT)
    12.         },
    13.         modifier =
    14.         Modifier
    15.             .padding(horizontal = dimensionResource(id = R.dimen.margin_small))
    16.             .padding(top = dimensionResource(id = R.dimen.margin_small))
    17.             .heightIn(min = dimensionResource(id = R.dimen.plant_description_min_height))
    18.     )
    19.  
    20. }

    对其进行设置 就可以了。 而不是引入textView xml了。

    这就要求我们充分的使用Compose咯

  • 相关阅读:
    【组合递归】【StringBuilder】Leetcode 17. 电话号码的字母组合
    React-4 组件知识
    Python编程 字符串介绍以及切片
    [开发|JAVA] dateease编译资料笔记
    SQL教程之性能不仅仅是查询
    map 模拟与用法
    Redis系列：Redis的数据结构
    服务器端请求伪造（SSRF）
    Nginx 高性能架构解析
    呼叫系统使用webRTC网页软电话到底好不好？
  • 原文地址：https://blog.csdn.net/mp624183768/article/details/125591127