Jetpack Compose(第三趴)——迁移到Jetpack Compose-五八三

1、简介

1.1、学习内容

您将学习：

你可以遵循的不同迁移路径
如何逐步将应用迁移到Compose
如何将Compose添加到使用View构建的现有界面
如何在Compose中使用View
如何在Compose中使用基于View的主题
如何测试使用View和Compose编写的混合界面

1.2、前提条件

有使用Kotlin语法（包括lambda）的经验
了解Jetpack Compose(第二趴)——Compose 基础知识（上）、Jetpack Compose(第二趴)——Compose 基础知识（下）。

所需条件

最新版Android Studio

2、迁移简介

JetPack Compose从设计之初就考虑到了View互操性能。如需迁移到Compose，我们建议您执行增量迁移（Compose和View在代码库中共存），直到应用完全迁移至Compose为止。

推荐的迁移策略如下：

使用Compose构建新功能
在构建功能时，确定可重复使用的元素，并开始创建常见界面组件库。
以此替换一个界面的现有功能。

2.1、使用Compose构建新功能

使用它Compose构建新功能是提高Compose采用率的最佳方式。这样，您添加的新功能就可以利用Compose的优势了。

一项新功能可能涵盖整个界面，在这种情况下，整个界面都是Compose中。如果您使用的是基于fragment的导航，这意味着您需要创建新的fragment，并在Compose中添加其内容。

另一方面，如果您构建的新功能是现有界面的一部分，则View和Compose将共存在同一个界面上。例如，假设您要添加的功能是RecyclerView中的一种新的视图类型。在这种情况下，新的视图类型将位于Compose中，而其他项目保持不变。

2.2、构建常见界面组件库

使用Compose构建功能时，您很快就会意识到，您最终会构建组件库。您需要确定可重复使用的组件，促使在应用中重复使用这些组件，以便共享组件具有单一可信来源。您构建的功能随后可以依赖于这个库。

2.3、使用Compose替换现有功能

除了构建新功能之外，您还需要逐步将应用中的现有功能迁移到Compose。具体采用哪种方法由您决定，下面是一些适合的方法：

接单界面 – 包含少数界面元素和动态元素（例如欢迎界面、确认界面或设置界面）的简单界面。这些界面非常适合迁移到Compose，因为只需几行代码就能搞定。
混合View和Compose界面 – 已包含少量Compose代码的界面是另一个不错的选择，因为您可以继续逐步迁移该界面中的元素。如果您的某各界面在Compose中只有一个子树，您可以继续迁移该树的其他部分，知道整个界面位于Compose中。这称为自下而上的迁移方法。

3、准备工作

原始展现UI：

4、Sunflower中的Compose

我们以一个例子来讲解

首先我沃恩打开应用级build.gradle文件后，查看该文件如何导入Compose依赖项，以及如何导入Compose依赖项，以及如何使用buildFeatures { compose true }标志让Android Studio能够运行Compose。

app/build.gradle

android {
    // ...

    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        // ...
        compose true
    }


    composeOptions {
        kotlinCompilerExtensionVersion '1.3.2'
    }
}

dependencies {
    // ...
    // Compose
    def composeBom = platform('androidx.compose:compose-bom:2022.10.00')
    implementation(composeBom)
    androidTestImplementation(composeBom)
    
    implementation "androidx.compose.runtime:runtime"
    implementation "androidx.compose.ui:ui"
    implementation "androidx.compose.foundation:foundation"
    implementation "androidx.compose.material:material"
    implementation "androidx.compose.runtime:runtime-livedata"
    implementation "androidx.compose.ui:ui-tooling"
    implementation "com.google.accompanist:accompanist-themeadapter-material:0.28.0"
    // ...
}

这些依赖项的版本在项目级build.gradle文件中定义。

5、欢迎使用Compose

在植物详情界面中，我们需要将对植物的说明书迁移到Compose，同时让界面的总体结构保持完好。

Compose需要有宿主activity或fragment才能呈现界面。在Sunflower中，所有界面都使用fragment，因此你需要使用ComposeView:这是Android View可以使用其setContent方法方法托管setContent方法托管Compose界面内容。

5.1、移除XML代码

我们先从迁移开始！打开fragment_plant_detail.xml并执行以下操作：
1. 切换到代码视图
2. 移除NestedScrollView中的ConstraintLayout代码和嵌套的4个TextView
3. 添加一个ComposeView，它会改为托管Compose代码，并以compose_view作为视图ID

fragment_plant_detail.xml

<androidx.core.widget.NextedScrollView
    android:id="@+id/plant_detail_scrollview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:paddingBottom="@dimen/fab_bottom_padding"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
       <!-- Step 2) Comment out ConstraintLayout and its children -->
       <androidx.constraintlayout.widget.ConstraintLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_margin="@dimen/margin_normal">
       <TextView
           android:id="@+id/plant_detail_name"
       ...
   </androidx.comstraintLayout.widget.ConstraintLayout>
   <!-- End Step 2) Comment out until here -->
   
   <!-- Step 3) Add a ComposeView to host Compose code -->
   <androidx.compose.ui.platform.ComposeView
       android:id="@+id/compose_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

</androidx.core.widget.NestedScrollView>

5.2、添加Compose代码

现在，您可以开始将植物详情页界面迁移到Compose了！

在整个Codelab中，您都需要将Compose代码添加到plantdetail文件夹下的PlantDetailDescription.kt文件夹中。打开该文件，看看项目中是否有占位符Hello Compose文本。

PlantDetailDescription.kt

fun PlantDetailDescription() {
    Surface {
        Text("Hello Compose")
    }
}

我们从在上一步中添加ComposeView中调用此可组合项，即可在界面上显示此内容。打开PlantDetailFragment.kt。

界面使用的是数据绑定，因此您可以直接访问composeView并调用setContent，以便在界面上显示Compose代码。您需要在MaterialTheme哪调用PlantDetailDescription可组合项，因为Sunflower使用的是Material Design。

PlantDetailFragment.kt

class PlantDetailFragment: Fragment() {


    // ...

    override fun onCreateView(...): View? {

        val binding = DataBindingUtil.inflate<FragmentPlantDetailBinding>(inflate, R.layout.fragment_plant_detail, container, false
        ).apply {
            // ...
            composeView.setContent {
                // You're in Compose world!
                MaterialTheme {
                    PlantDetailDescription()
                }
            }
        }
        // ...
    }

}

6、使用XML创建可组合项

我们首先迁移植物的名称。更确切地说，就是您在fragment_plant_detail.xml中移除的ID为@+id/plant_detail_name的TextView。XML代码如下：

<TextView

    android:id="@+id/plant_detail_name"
    ...


    android:layout_marginStart="@dimen/margin_small"

    android:layout_marginEnd="@dimen/margin_small"
    android:gravity="center_horizontal"
    android:text="@{viewModel.plant.name}"
    android:textAppearance="?attr/textAppearanceHeadline5"
    .../>

请查看他是否为textAppearanceHandline5样式，水平外边距为8.dp,以及是否在界面上水平居中。不过，要显示的标题是从由代码库层PlantDetailViewModel公开的LiveData中观察到的。

如何观察LivData将稍后介绍，因此先假设我们有可用的名称，并以参数形式将其传递到我们在PlantDetailDescription.kt文件中创建的新PlantName可组合项。稍后，将从PlantDetailDescription可组合项调用此可组合项。

PlantDetailDescription.kt

@Composable




private fun PlantName(name: String) {
    Text(
        text = name,
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = dimensionResource(R.dimen.margin_small))
            .wrapContentWidth(Alignment.CenterHorizontally)
    )
}




@Preview
@Composable
private fun PlantNamePreview() {
    MaterialTheme {

        PlantName("Apple")
    }

}

预览如下：

其中：

Text的样式为MaterialTheme.typography.h5，类似于XML代码中的textAppearanceHeadline5。
修饰符会修饰Text，使其看起来像XML版本：
使用fillMaxWidth修饰符，使其占据最大可用宽度。此修饰符对应XML代码中layout_width属性的match_parent值。
使用padding修饰符，以便应用水平内边距距值margin_small。这对应于XML中的marginStart和marginEnd声明。margin_small值也是使用dimensionResource辅助函数提取的现有尺寸资源。
wrapContentWidth修饰符用于对齐文本，以使其水平居中。这类似于在XML中gravity为center_horizontal。

注意：Compose提供了从dimens.xml和strings.xml文件获取值的简单方法，即由此一来，您可以将View系统视为可信来源。

7、ViewModel和LiveData

现在，我们将标题链接到界面。如需执行此操作，您需要使用PlantDetailViewModel加载数据。为此，Compose集成了ViewModel和LiveData。

7.1、ViewModel

由于在fragment中使用PlantDetailViewModel的实例，因此我们可以将其作为参数传递给PlantDetailDescription，就这么简单。

PlantDetailDescription.kt

@Composable




fun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) {

    // ...
}

现在，请在从fragment调用此可组合项时传递ViewModel实例：

PlantDetailFragment.kt

class PlantDetailFragment: Fragment() {


    ...

    override fun onCreateView(...): View? {

        ...

        composeView.setContent {
            MaterialTheme {
                PlantDetailDescription(plantDetailViewModel)

            }

        }

    }


}

7.2、LiveData

有了LiveData，您已有权访问PlantDetailViewModel的LiveData<Plant>字段，以获取植物的名称。

如需从可组合项观察LiveData，请使用LiveData.observeAsState()函数。

注意：LiveData.observeAsState()开始观察LiveData，并以State对象表示它的值。每次向LiveData发布一个新值时，返回的State都会更新，这会导致所有State.value用例重组。

由于LiveData发出的值可以是null，因此您需要将其用例封装在null检查中。有鉴于此，以及为了实现可重用性，最好将LiveData的使用和监听拆分到不同的可组合项中。因此，我们来创建一个名为PlantDetailContent的新可组合项，用于显示Plant信息。

完成这些更新后，PlantDetailDescription.kt文件现在应如下所示：
PlantDetailDescription.kt

@Composable




fun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) {

    // Observes values coming from the VM's LiveData<Plant> field
    val plant by plantDetailViewModel.plant.observeAsState()
    
    // If plant is not null, display the content
    plant?.let {
        PlantDetailContent(it)
    }


}



@Composable
fun PlantDetailContent(plant: Plant) {
    PlantName(plant.name)
}

@Preview
@Composable
private fun PlantDetailContentPreview() {
    val plant = Plant("id", "Apple", "description", 3, 30, "")
    MaterialTheme {
        PlantDetailContent(plant)
    }


}

PlantNamePreview应反应我们的更改，而无需直接更新，因为PlantDetailContent仅调用PlantName：

现在，您已连接ViewModel，使植物名称在Compose中显示。在接下来的几部分中，您将构建其余可组合项，并以类似的方式将它们连接到ViewModel。

8、更多XML代码迁移

现在，我们可以更轻松地将界面中缺少的内容补充完整：浇水信息和植物说明。您已经可以按照之前类似的方法迁移界面的其余部分了。

您之前从fragment_plant_detail.xml移除的浇水信息XML代码由两个ID位plant_watering_header和plant_watering的TextView组成。

<TextView

    android:id="@+id/plant_watering_header"
    ...


    android:layout_marginStart="@dimen/margin_small"

    android:layout_marginTop="@dimen/margin_normal"
    android:layout_marginEnd="@dimen/margin_normal"
    android:gravity="center_horizontal"
    android:text="@string/watering_needs_prefix"
    android:textColor="?attr/colorAccent"
    android:textStyle="bold"
    .../>
    
<TextView
    android:id="@+id/plant_watering"
    ...
    android:layout_marginStart="@dimen/margin_small"
    android:layout_marginEnd="@dimen/margin_small"
    android:gravity="center_horizontal"
    app:watingText="@{viewModel.plant.wateringInterval}"
    .../>

与您之前的操作类似，请创建一个名为PlantWatering的新可组合项并添加Text可组合项，以在界面上显示浇水信息：
PlantDetailDescription.kt

@OptIn(ExperimentalComposeUiApi::class)
@Composable
private fun PlantWatering(wateringInterval: Int) {
    Column(Modifier.fillMaxWidth()) {
        // Same modifier used by both Texts
        val centerWithPaddingModifier = Modifier
            .padding(horizontal = dimensionResource(R.dimen.margin_small))
            .align(Alignment.CenterHorizontally)
            
        val normalPadding = dimensionResource(R.dimen.margin_normal)
        
        Text(
            text = stringResource(R.string.watering_needs_prefix),
            color = MaterialTheme.colors.primaryVariant,
            fontWeight = FontWeight.Bold,
            modifier = centerWithPaddingModifier.padding(top = normalPadding)
        )
        
        val wateringIntervalText = pluraStringResource(
            R.plurals.watering_needs_suffix, wateringInterval, wateringInterval
        )
        Text(
            text = wateringIntervalText,
            modifier = centerWithPaddingModifier.padding(bottom = normalPadding)
        )
    }
}

@Preview
@Composable
private fun PlantWateringPreview() {
    MaterialTheme {
        PlantWatering(7)
    }
}

预览图如下：

需要注意以下几点：

由于Text可组合项会共享水平内边距和对齐修饰，因此您可以将修饰符跟配给局部变量（即centerWithPaddingModifier），以重复使用修饰符。修饰符是标准的Kotlin对象，因此可以重复使用。
Compose的MaterialTheme与plant_watering_header中使用的colorAccent不完全匹配。现在，我们可以使用将在互操作性主题设置部分中加以改进的MaterialTheme.colors.primaryVariant。
在Compose1.2.1中，必须选择启用ExperimentalComposeUiApi才能使用pluralStringResource。在将来的Compose版本中，可能不再需要这样做。

我们将各个部分组合在一起，然后同样从PlantDetailContent调用PlantWatering。我们一开始移除的ConstraintLayout XML代码的外边距16.dp,我们需要将该值添加到Compose代码中。

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/margin_normal">

请在PlantDetailContent中创建一个Column以同时显示名称和浇水信息，并将其作为内边距。另外，为了确保背景颜色和所用的文本颜色均合适，请添加Surface用于处理这种设置。

PlantDetailDescription.kt

@Composable
fun PlantDetailContent(plant: Plant) {
    Surface {

        Column(Modifier.padding(dimensionResource(R.dimen.margin_normal))) {
            PlantName(plant.name)
            PlantWatering(plant.waterInterval)
        }
    }
}

刷新预览后，你会看到以下内容：

9、Compose代码中的View

现在，我们来迁移植物说明。fragment_plant_detail.xml中的代码具有包含app:renderHtml="@{viewModel.plant.description}"的TextView，用于告知XML在界面上显示哪些文本。renderHtml是一个绑定适配器，可在PlantDetailBindingAdapter.kt文件中找到。该实现使用HtmlCompat.fromHtml在TextView上设置文本！

但是，Compose目前不支持Spanned类，也不支持显示HTML格式的文本。因此，我们需要在Compose代码中使用View系统中的TextView来绕过此限制。

由于，Compose目前还无法呈现HTML代码，因此你需要使用AndroidView API程序化地创建一个TextView，从而实现此目的。

AndroidView使您能够在Vire的factorylambda中构建该View。它还提供了一个updatelambda，它会在View膨胀和后续重组时被调用。

为此，请创建新的PlantDescription可组合项。可组合项将调用AndroidView，后者会在factorylambda中构造TextView。在factorylambda中，初始化显示HTML格式文本的TextView，然后将movementMethod设置为LinkMovementMethod的实例。最后，在updatelambda中的TextView的文呢么射中为htmlDescription。

PlantDetailDescription.kt

@Composable




private fun PlantDescription(description: String) {
    // Remembers the HTML formatted description. Re-executes on a new description
    val htmlDescription = remember(description) {
        HtmlCompat.fromHtml(description, HtmlCompat.FROM_HTML_MODE_COMPACT)
    }
}

//Displays the TextView on the screen and updates with the HTML description when inflated
// Updates to htmlDescription will make AndroidView recompose and update the text.
AndroidView(
    factory = { context -> 
        TextView(context).apply {
            movementMethod = LinkMovementMethod.getInstance()
        }
    },
    update = {
        it.text = htmlDescription
    }
)

@Preview
@Composable
private fun PlantDescriptionPreview() {
    MaterialTheme {
        PlantDescription("HTML<br><br>description")
    }
}

预览：

请注意，htmlDescription会记住作为参数传递的指定description的HTML说明。如果description参数发生变化，系统会再次执行remember中的htmlDescription代码。

因此，如果htmlDescription发生变化，AndroidView更新会回调将重组。在updatelambda中读取的任何状态都会导致重组。

我们将PlantDescription添加到PlantDetailContent可组合项，并更改预览代码，以便同样显示HTML说明：

PlantDetailDescription.kt

@Composable




fun PlantDetailContent(plant: Plant) {
    Surface {

        Column(Modifier.padding(dimensionResource(R.dimen.margin_normal))) {
            PlantName(plant.name)
            PlantWatering(plant.wateringInterval)
            PlantDescription(plant.description)
        }
    }


}



@Preview
@Composable
private fun PlantDetailContentPreview() {
    val plant = Plant("id", "Apple", "HTML<br><br>description", 3, 30, "")
    MaterialTheme {

        PlantDetailContent(plant)
    }

}

预览如下：

现在，您已经将原始ConstraintLayout中的所有内容迁移到Compose。您可以运行应用，检查其是否按预期运行。

10、ViewCompositionStrategy

只要ComposeView与窗口分离，Compose就会处理组合。如果Fragment中使用了ComposeView，这种情况是不可取的，原因有两个：

组合必须遵循fragment的视图生命周期，Compose界面View类型才能保存状态。
发生过渡时，底层ComposeView将处于分离状态。不过，在这些过渡期间，Compose界面元素仍然可见。

如果修改此行为，请使用适当的ViewCompositionStrategy调用setViewCompositionStrategy，使其改为遵循fragment的视图生命周期。具体而言，您需要在fragment的LifecycleOwner被销毁时使用DisponseOnViewTreeLifecycleDestroyed策略处置组合、

由于PlantDetailFragment包含进入和退出过渡，并且我们稍后会在Compose中使用View类型，因此我们需要确保ComposeView使用DisposeOnViewTreeLifecycleDestroyed策略。不过，在fragment中使用ComposeView时，最好始终设置此策略。

PlantDetailFragment.kt

import androidx.compose.ui.platform.ViewCompositionStrategy
...

class PlantDetailFragment: Fragment() {
    ...
    override fun onCreateView(...): View? {
        val binding = DataBindingUtil.inflate<FragmentPlantDetailBinding>(inflate, R.layout.fragment_plant_detail, container, false
        ).apply {
            ...
            composeView.apply {
                // Dispose the Composition when the view's LifecycleOwner
                // is destroyed
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                setContent {
                    MaterialTheme {
                        PlantDetailDescription(plantDetailViewModel)
                    }
                }
            }
        }
    }
}

11、互操作性主题设置

我们已将朱武详情的文本内容迁移到Compose。不过，您可能已经注意到，Compose使用的主题颜色有误。当植物名称应该使用绿色时，它使用的是紫色。

在这个迁移的早期阶段，您可能需要Compose继承View系统中可用的主题，而不是从头开始在Compose中重新编写您自己的Material主题。Material主题可与Compose附带的所有Material Design组件完美配合使用。

如需在Compose中重复使用View系统的Material Design Components（MDC）主题，您可以使用Accompanist Material Theme Adapter 库。MdcTheme函数将自动读取逐级上下文的MDC主题，并代表您将它们传递给MateriamTheme，以用于浅色和深色主题。即使您只需要适用于此Codelab的主题颜色，该库也会读取Vide系统的形状和排版。

该库已包含在app/build.gradle文件中，如下所示：

...
dependencies {
    ...


    implementation "com.google.accompanist:accompanist-themeadapter-material:$rootProject.accompanistVersion"
}

如需使用词库，请不要使用MaterialTheme,改为使用MdcTheme。例如，在PlantDetailFragment中

PlantDetailFragment.kt

class PlantDetailFragment: Fragment() {


    ...

    composeView.apply {
        ...

        setContent {
            MdcTheme {
                PlantDetailDescription(plantDetailViewModel)

            }

        }

    }


}

此外还有PlantDetailDescription.kt文件中的所有预览可组合项：

PlantDetailDescription.kt

@Preview
@Composable
private fun PlantDetailContentPreview() {
    val plant = Plant("id", "Apple", "HTML<br><br>description", 3, 30, "")
    MdcTheme {
        PlantDetailContent(plant)
    }
}

@Preview
@Composable
private fun PlantNamePreview() {
    MdcTheme {
        PlantName("Apple")
    }

}


@Preview
@Composable
private fun PlantWateringPreview() {
    MdcTheme {
        PlantWatering(7)
    }


}



@Preview
@Composable
private fun PlantDescriptionPreview() {
    MdcTheem {
        PlantDescroption("HTML<br><br>description")
    }
}

在预览中您可以看到，MdcTheme会从style.xml文件中的主题中提取颜色。

您卡可以在深色主题中预览界面，方法是创建新函数并将Configuration.UI_MODE_NIGHT_YES传递给预览的uiMode：

import android.content.res.Configuration
...


@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun PlantDetailContentDarkPreview() {
    val plant = Plant("id", "Apple", "HTML<br><br>description", 3, 30, "")
    MdcTheme {
        PlantDetailContent(plant)
    }


}

预览如下：

如果您运行应用，它在浅色主题和深色主题下的行为都将与迁移前完全相同：

12、测试

将植物详情界面的各个部分迁移到Compose之后，务必要进行测试，确保您没有损坏任何内容。

注意：在真实应用中，如果没有测试，则不应该重写旧代码。将代码迁移到Compose时，您还应该重构测试并确保测试结果合格。

在Sunflower中，位于androidTest文件夹的PlantDetailFragmentTest用于测试应用的某些功能。ging打开该文件并查看当前的代码：

testPlantName用于检查界面上的植物名称。
testShareTextIntent用于检查点按分享按钮后是否触发了正确的intent

当activity或fragment使用Compose时，您不需要使用ActivityScenarioRule,而需要使用createAndroidComposeRule，它将ActivityScenarioRule与ComposeTestRule集成，让您可以测试Compose代码。

在PlantDetailFragmentTest中，将用法ActivityScenarioRule替换为createAndroidComposeRule。如果需要使用activity规则来配置测试，请使用createAndroidComposeRule中的activityRule属性，具体代码如下所示：

@RunWith(AndroidJunit4::class)
class PlantDetailFragmentTest {
    
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<GardenActivity>()
    
    ...
    
    @Before
    fun jumpToPlantDetailFragment() {
        populateDatabase()
        
        composeTestRule.activityRule.scenario.onActrivity { gardenActivity ->
        activity = gardenActivity
        
        val bundle = Bundle().apply {
            putString("plantId", "malus-pumila")
        }
        findNavController(activity, R.id.nav_host).navigate(R.id.plant_detail_fragment, bundle)
        
        }
    }


}

如果您运行测试，testPlantName会失败！testPlantName检查界面上是否存在TextView。不过，您已将这部分的界面迁移Compose。因此，您需要改用Compose断言：

@Test
fun testPlantName() {
    composeTestRule.onNodeWithText("Apple").assertIsDisplayed()
}

如果运行测试，您会看到所有测试均会通过。

13、恭喜

恭喜，您已成功完成此 Codelab！

原始 Sunflower GitHub 项目的 compose 分支会将植物详细信息界面完全迁移到 Compose。除了您在此 Codelab 中完成的操作之外，该分支还会模拟 CollapsingToolbarLayout 的行为。这些行为包括：

使用 Compose 加载图片
动画
更出色的尺寸处理
等等！

翻译原文：Compose 基础知识

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

Android
# Kotlin