初学Compose：无缝衔接xml的神奇魔法

前言

日常作业，业务需求中的界面布局是至关重要的一部分，长期以来，我们一向都是运用XML布局文件来定义自己的用户界面，但跟着Jetpack Compose现已锋芒毕露，无疑成为了一种强壮的UI东西，容许我们以更声明性和可组合的方法构建用户界面。

到现在为止，Compose正在逐渐替代XML，越来越多的技术团队现已初步广泛运用。下面笔者将以初学者的角度动身，简略论述如何将现有的XML布局文件转换为Jetpack Compose，完结无缝联接，以便逐渐搬家运用程序的用户界面。

为什么要运用Jetpack Compose

Jetpack Compose是Google官方供应的声明式UI东西包，它引入了一种全新的方法来构建用户界面，根据Kotlin编写，而Kotlin作为现在Android的第一生产力语言，这无疑是相辅相成的。由于笔者长期运用XML编写布局，虽然近期才初步重新学习Compose并初步实践用于作业和学习傍边， 但Compose必定是未来大势所趋的；虽然现在国内还未彻底广泛，运用市场上仍是有许多运用还在运用着传统的XML布局；

不得不说，现在更新后的AS（笔者这儿是Android Studio Giraffe | 2022.3.1 Patch 2）创建的新项目都是默认运用Compose进行界面编写，彻底摒弃了传统XML界面布局，这现已阐明Compose底子上成为了Google官方主推的UI东西包了；

这时分有人就会说了，既然会成为干流，那它必定有巨大的优势吧；没错，与传统的XML布局文件比较，Jetpack Compose供应了以下优势：

• 声明性UI编程：Compose容许以声明性的方法描绘UI，而不再需求手动操作XML布局文件。这使得UI代码更易于阅览、维护和调试。
• 可组合性：Compose的中心概念是可组合性。可以将小部件组合在一起，构建凌乱的UI元素，而不用忧虑繁琐的布局层次。
• 实时预览：Compose供应了实时预览功用，可以在编写代码的同时检查UI的外观和行为，行进了开发功率。
• 更少的样板代码：与XML布局比较，Compose代码一般更少，由于它减少了样板代码的需求。
• 动态性：Compose容许在运行时动态更改UI，这在某些情况下非常有用。

从XML 搬家到Compose

由于最近一个小项目需求将之前的传统布局代码全部搬家为Compose，虽然整体项目布局文件不算太多，但这进程就我而言，非常繁琐，需求自己对传统布局以及Compose相应的替代方案有必定的熟练度，难度不大，不过相对于初学者来说真的挺折磨，毕竟是在旧项目上操刀，尤其是在替换后需求处理布局的差异，要尽或许保持一致，不影响现有效果；话不多说，下面是笔者简略替换的流程图(仅供参阅)

进程1：创建Compose界面

首要，我们需求在Compose中创建一个等效的界面。对于每个XML布局，我们将创建一个Compose函数，以相同的UI元素作为参数。举个比如，假设我们有一个XML布局文件包括一个TextView和一个Button，我们可以创建如下的Compose函数：

@Composable
fun MyComposeScreen(text: String, buttonText: String) {
  Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
   ) {
    Text(text = text)
    Button(onClick = { /* 点击处理逻辑 */ }) {
      Text(text = buttonText)
     }
   }
}

进程2：将数据绑定到Compose界面

接下来，我们需求将数据从XML布局中绑定到Compose界面。这一般触及创建ViewModel或运用其他数据绑定技术，以确保数据在Compose界面中正确闪现。

进程3：逐渐替换XML

一旦Compose界面准备好，而且数据绑定完结，我们可以初步逐渐替换XML布局。在每个进程中，我们将删去XML布局的引证，并在恰当的方位调用我们的Compose函数。

这儿作为初学者，可以给我们引荐一个网站

• Which Compose API to use

  在替换的时分，有人肯定想问，假设运用RecyclerView的话，我们在Compose中应该用什么呢，ProgressBar我们又该用什么替换呢，等等相关疑问。这个网站的主旨就是输入传统布局组件它会奉告我们应该用什么，非常有用，直接对症下药，可进一步行进开发功率

进程4：处理布局差异

在某些情况下，XML布局和Compose之间或许存在布局差异。例如，Compose运用Modifier来管理布局特点，而XML布局运用束缚和布局参数。在这种情况下，您需求确保在Compose中正确处理这些差异，以确保UI的外观和行为保持一致。

进程5：测验和迭代

最终，不要遗忘对搬家后的界面进行彻底测验，并根据需求进行迭代和修正。

关于Compose替换XML

在逐渐替换XML的进程中，假设在不间断现有功用的情况下完结无缝联接的话，需求对XML布局有必定的了解和知道，所以为了在转化进程中更加顺畅流畅，下面笔者XML中一些常用的布局和组件的替换方案，一起看看在Compose中是怎样完结的吧

这儿笔者简略统计了下开发进程中常用的一些布局/组件替换方案，由于代码过多，将以图文的形式展现，方便我们参阅

替代xml中的常用布局

我们常用的六大布局，信任我们现已非常了解了，就不过多解说啦，下面是它们在Compose的替代方案

1. LinearLayout

在XML中，LinearLayout用于线性摆放其子视图，可以垂直或水平摆放。在Compose中，我们可以运用Column和Row来完结类似的布局，简略替换代码如下图所示

水平布局也是如此，换成Row即可

2. RelativeLayout

RelativeLayout容许在XML中相对于其他视图定位子视图。在Compose中，我们可以运用Box和Modifier相互配合来完结类似的布局，具体得根据实际项目动身，简略替换代码如下图所示

3. FrameLayout

FrameLayout作为帧布局,主要就是为了堆叠子视图，在Compose中，可以运用Box来完结类似的效果，但要留意Box中的子视图是按照层叠顺序制造的，简略替换代码如下所示

4. GridLayout

GridLayout用于构建灵活的网格布局，在Compose中，由于之前的Grid组件现已被废弃了，现在需求根据项目本身的需求去自定义布局完结，简略替换代码如下图所示

我们也可以运用LazyVerticalGrid / LacyHorizontalGrid去完结，它们是Compose中专门用于网格布局的组件，这儿简略举一个示例

 val itemsList = List(12) { index -> "Item $index" }
  LazyVerticalGrid(columns = GridCells.Fixed(2),
    modifier = Modifier.fillMaxSize(), content = {
      items(itemsList) { item ->
        // 创建并放置子视图
        Text(
          text = item,
          modifier = Modifier
             .fillMaxWidth()
             .padding(16.dp)
         )
       }
     })

这儿运用LazyVerticalGrid来创建一个垂直网格布局，通过GridCells.Fixed(2)指定了每行的列数为2。然后，我们运用items函数来迭代并放置子视图

5. TableLayout

TableLayout在XML中用于创建表格布局，一般用于闪现数据表格或多行多列的内容。在Compose中，可以运用LazyColumn或LazyRow来创建类似的表格布局，简略替换代码如下图所示：

在Compose中，我们可以运用LazyColumn来创建表格布局，通过嵌套Row和Text组件来完结表格行和单元格。通过调整items的数量和增加更多的表格行，可以创建一个多行多列的表格布局

6. ConstraintLayout

ConstraintLayout无疑是我们日常运用最频频的布局了，它非常强壮，可以用来完结一些凌乱的界面，在Compose中没有直接对应的布局，需求我们额外引入相对应依靠库来完结束缚布局的效果

 implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

简略替换代码如下图所示

Compose中，运用ConstraintLayout创建了两个子视图，并运用constrainAs修饰符定义了它们之间的束缚联系

替代xml中的常用组件

在XML中我们往常会用到许多许多组件，针对这些组件的替换，Compose也供应了相应的处理方案，如下图所示

1. Button，ImageView，TextView

这些组件往常写传统布局的时分必定离不开它们，而它们在Compose中的替代方案也非常简略，分别是：

• Button组件容许我们创建可交互的按钮，可以自定义文本、款式和点击事件
• Text组件用于闪现文本内容，支撑自定义款式和文本格式。
• Image组件用于闪现图画，支撑从资源、网络或本地文件加载图画。

简略替换代码如下图所示

2. CardView

CardView在XML中用于创建卡片式布局，常用于闪现列表项或独自的信息块。在Compose中，可以运用Card组件来完结类似的效果，简略替换代码如下所示

可以设置卡片的elevation（暗影） 和shape（形状） 等特点

3. RecyclerView

RecyclerView在XML中用于闪现很多数据列表，是Android运用中常见的UI组件之一；在Compose中，您可以运用LazyColumn或LazyRow来创建类似的可翻滚列表，简略替换代码如下图所示

运用LazyColumn可以轻松创建可翻滚的垂直列表，而LazyRow用于创建水平列表。在Compose中，运用items函数来绑定数据到列表项，并在其间创建列表项的内容

4. ViewPager，ViewPager2

ViewPager、ViewPager2在XML中用于创建可滑动的页面容器，一般用于完结轮播图或分页阅览；在Compose中没有直接内置的ViewPager相关组件，这儿笔者引入了Accompanist里的库，运用HorizontalPager、VerticalPager来完结类似的效果

implementation "com.google.accompanist:accompanist-pager-indicators:0.22.0-rc"
  implementation "com.google.accompanist:accompanist-pager:0.22.0-rc"

简略替换代码如下图所示

5. AppBarLayout

AppBarLayout在XML中常用于创建标题栏，一般包括标题、操作按钮等。在Compose中，可以运用TopAppBar来完结标题栏效果，简略替换代码如下图所示

TopAppBar可以设置标题、布景颜色、文本颜色以及操作按钮等特点。

6. TabLayout

TabLayout在XML中用于创建选项卡式布局，一般用于导航不同的标签页。在Compose中，可以运用TabRow来完结类似的选项卡效果，简略替换代码如下图所示

TabRow和Tab可以完结选项卡式布局，并在用户与选项卡进行交互时更新界面

7. BottomNavigationView

BottomNavigationView在XML中常用于底部导航栏，用于切换不同的页面或模块。在Compose中，可以运用BottomNavigation和BottomNavigationItem来完结底部导航栏效果，简略替换代码如下图所示

运用BottomNavigation和BottomNavigationItem可以轻松创建底部导航栏，并完结页面切换效果

8. SearchView

SearchView在XML中用于创建查找框，一般用于查找功用。在Compose中，可以运用TextField和Icons.Default.Search等组件来创建查找框，简略替换代码如下图所示

运用TextField、Icon和情况管理，可以创建具有查找和铲除功用的查找框，是不是更加方便了呢

9. ScrollView

ScrollView在XML中用于翻滚一个或多个子视图，以便在屏幕上闪现超出可见区域的内容。在Compose中，可以运用LazyColumn来完结类似的翻滚效果，简略替换代码如下所示

LazyColumn底子适用于常见的翻滚列表，它会根据需求推迟加载内容

10. ProgressBar

ProgressBar在XML中用于闪现加载进展，一般用于等待长期操作或网络请求。在Compose中，可以运用LinearProgressIndicator来创建加载进展条，简略替换代码如下图所示

运用LinearProgressIndicator可以轻松创建加载进展条，并运用情况管理来控制进展

11. WebView

WebView在XML中用于闪现Web页面或嵌入网页内容。在Compose中，可以运用AndroidView来嵌入WebView，简略替换代码如下所示

创建一个嵌入的WebView，并加载指定的URL

12. Switch

Switch在XML中用于创建开关按钮，一般用于切换某个设置或情况。在Compose中，可以运用Switch组件来完结类似的开关按钮，简略替换代码如下所示

13. DrawerLayout

DrawerLayout在XML中用于创建抽屉式布局，一般用于侧边栏导航。在Compose中，可以运用ModalDrawer来完结侧边栏效果，简略替换代码如下图所示

运用ModalDrawer可以完结抽屉式布局，可以控制抽屉的情况并自定义抽屉和内容

以上就是一些常见的组件简略替换方案，具体的要根据项目需求，选择适宜的Compose布局元素和修饰符，以满意我们的UI规划需求

最终想说的话

现在来说，国内Compose并没有彻底替代XML传统布局，但将XML布局转换为Compose无疑是一项重要的作业，它可以带来许多优点，包括更好的可维护性、更高的开发功率和更好的用户体会。跟着项目版别迭代，通过逐渐搬家，我们可以逐渐引入Compose，并在不间断现有功用的情况下完结无缝联接。

好咯，水文的时光总是非常时间短的，这是一篇关于初学者的简略Compose替换指南，非常基础，希望能带给初学者一些帮忙，一起学习行进，共勉！