Jetpack Compose 初体验

男娘i 2023-07-04 04:52 15阅读 0赞

## 什么是 Jetpack Compose ##

Jetpack Compose是Google I/O 2019 发布的Andorid UI框架，它不同于Andorid常见的Xml+命令式Coding的UI开发范式，而是基于Kotlin的DSL实现了一套类似React的声明式UI框架。Jetpack Compose目前仍然处于pre-alpha版本，目标是2020年能够发布稳定的Beta版本。伴随React Native、Flutter等大前端框架的兴起以及Jetpack Compose、SwiftUI等native框架的出现，声明式UI正逐渐成为客户端UI开发的新趋势。我们通过一个小sample来学习和体验一下Jetpack Compose带来的新的开发方式

## 开发环境 ##

由于Jetpack Compose还未正式发布，需要使用Preview版的AndroidStudio进行体验：

*  Android Studio4.0 Canary3
 *  targetSdkVersion 29

新建Project，选择 Empty Compose Activity

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70][]

## @Compose组件 ##

Compose的API非常友好，通过为函数添加@Composable注解，将其声明为一个可以在DSL中使用的UI组件。之后在Activity中可以通过setContent\{...\}方法使用DSL声明UI布局：

//MainActivity.kt
    class MainActivity : AppCompatActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                Greeting(name = "Android")
            }
        }
    }
    
    @Composable
    fun Greeting(name: String) {
       Text (text = "Hello $name!")
    }

## 使用IDE进行Priview ##

从Android Studio4.0 Canary1起，可以在IDE中对@Comopse组件进行预览。在@Compose函数上添加@Preview即可进行预览。需要注意的是用Compose的代码发生变更后经过build才能在预览中反映出来，不像xml的预览那么实时，这是因为compose的代码需要经过编译生成新的class后才能再次运行从而生效，而xml的变动是无需经过编译的。

另外需注意的是@Preview的组件不能有参数，所以Greeting组件需要向下面这样进行预览

@Composable
    fun Greeting(name: String) {
        Text (text = "Hello $name!")
    }
    
    @Preview
    @Composable
    fun PreviewGreeting() {
        Greeting("Android")
    }

在IDE中就可以预览的效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1][]

## Sample实现 ##

了解了基本使用之后，我们实现一个简单的Sample，用来显示文章列表：

### dataclass ###

首先，定义sample中需要使用的data class

//Article.kt
    data class Article(
        val id: String,
        val title: String,
        val url: String,
        val user: User
    )

//User.kt
    data class User(
        val id: String,
        val name: String,
        val profileImageUrl: String
    )

### ArticleItem ###

接下来实现文章列表Item的UI，由于用到了DrawImage组件，先在build.gradle中添加以下依赖

dependencies{
        implementation 'androidx.ui:ui-foundation:0.1.0-dev03'
    }

相比传统的通过Class定义自定义控件的方式，定义Compose组件只需要定义一个function：

@Composable
    fun ArticleItem(article: Article) {
        val image = +imageResource(R.drawable.ic_header)
        val typography = +MaterialTheme.typography()
    
        Row(modifier = Spacing(16.dp)) {
            Container(modifier = Size(60.dp, 60.dp)) {
                DrawImage(image = image)
            }
            Column(modifier = ExpandedWidth wraps Spacing(right = 16.dp, left = 16.dp)) {
                Text(article.title, style = typography.h6)
                Text(article.user.name, modifier = Spacing(top = 4.dp), style = typography.subtitle2)
            }
        }
    }

function内部可以调用其他的@Compose的function，从而实现有层级的UI。上面代码中使用到下列Compose组件：

*  Row
    
     *  水平并排显示多个组件，类似于orientation为horizontal的LinearLayout
 *  Container
    
     *  可以按照指定大小显示内部元素，常用来显示DrawImage等
 *  DrawImage
    
     *  用来显示Image
 *  Column
    
     *  垂直并排显示显示多个组件，类似于orientation为vertical的LinearLayout
 *  Text
    
     *  显示文本，可以通过style指定TextSize
 *  Spacing
    
     *  用来设置margin

可见，用Andorid传统的布局方式不同，ComposeI采用类似H5或Flutter中广泛使用的Flexbox布局方式。

## ArticleList ##

由Item构成文章列表

//ArticleList.kt
    @Composable
    fun ArticleList(articles: List<Article>) {
        VerticalScroller {
            Column {
                articles.forEach { article ->
                    Card(
                        modifier = Spacing(4.dp) wraps Expanded,
                        shape = RoundedCornerShape(8.dp)
                    ) {
                        ArticleItem(article = article)
                    }
                }
            }
        }
    }

*  VerticleScroller
    
     *  垂直方向的滚动
 *  Card
    
     *  相当于Android的CardView

## MaiActivity ##

在MainAcitity中显示文章列表：

//MainActivity.kt
    class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            val articles = mutableListOf<Article>()
            repeat(11) {
                articles.add(
                    Article(
                        id = "$it",
                        title = "Kotlin入门",
                        url = "http://www.exsample.com/articles/$it",
                        user = User(id = "123", name = "第${it}讲...", profileImageUrl = "")
                    )
                )
            }
    
            setContent {
                MaterialTheme {
                    ArticleList(articles = articles)
                }
            }
        }
    }

文章列表显示如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 2][]

## 增加Toolbar ##

最后我们可以在顶部增加Toolbar，让显示效果更完善。可以通过Column将Toolbar放置在顶部：

class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            setContent {
                MaterialTheme {　
                    Column {
                        TopAppBar(title = {
                            Text("Kotlin入门")
                        })
                        ArticleList(articles = articles)
                    }
                }
            }
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 3][]

## 总结 ##

通过上面的sample我们了解了如何使用Jetpack Compose进行一个简单的UI布局。但Compose绝不仅仅是用来布局的工具，否则和Anko有什么区别呢？它真正强大的是包晗状态管理在内的一整套声明式UI的编程范式，关于这些的学习我们后面再另开文章介绍。Jetpack Compose吸收了很多前端框架的设计思想，例如用function替代class明显是来自React的函数式组件的灵感，这些变化会让习惯与写OOP程序的同学们有一种耳目一新的感觉，但是不可否认的是现阶段无论功能和性能上，Jetpack Compose距离”可用”还有很大一段距离，相信不久的未来Beta版的推出会给我们带来更多惊喜。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200208125407607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200208134835341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200208164501125.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200208170236547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70