Declarative UI toolkit with Jetpack Compose

1 .Declarative UI toolkit with Jetpack Compose @androidmalin GDG DevFest 2019 Beijing 

2 .About me ⻢琳 @androidmalin 

3 .编写可预测，符合习惯的代码 • 软件⼯程向来不提倡⽤⾼深莫测的技巧去编程 • 如何写出可理解可维护的代码才是质量和效率的关 键 

4 .编写可预测，符合习惯的代码 • 试想，⼀个⽉之后你回头看你写的代码，是否⼀眼就明⽩某 个变量，某个 if 判断的含义 • ⼀个新加⼊的同事想去增加⼀个⼩⼩的新功能或是修复某个 Bug，他是否对⾃⼰的代码有⾜够的信⼼不引⼊任何副作⽤？ • 随着功能的增加，代码很容易变得越来越复杂，这些问题也 将越来越严重，最终导致⼀份难以维护的代码 

5 . 声明式编程 • 命令式编程描述代码如何⼯作（How） • 声明式编程则表明想要实现什么⽬的 (What) 

6 . Demo 将⼀个集合中的数变为原来的2倍 

7 . 命令式编程 List<Integer> getDoubleList(List<Integer> originList) { List<Integer> doubleList = new ArrayList<>(); for (Integer num : originList) { if (num != null) { doubleList.add(num * 2); } } return doubleList; } 

8 . 声明式编程 List<Integer> getDoubleList(List<Integer> originList) { return originList.stream() .filter(n -> n != null) .map(n -> n * 2) .collect(Collectors.toList()); } 

9 . Demo 点击⼀个TextView，在下⽅显示点击的时间 

10 . 命令式编程 • 1.编写XML布局，加载布局 • 2.绑定两个TextView • 3.给TexView设置点击事件 • 4.在点击事件的回调中，给另外⼀个TextView设置时间 • TextView.setText(); 

11 . 命令式 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" TextView tvClick = findViewById(R.id.tv_click); android:orientation="vertical"> TextView tvTime = findViewById(R.id.tv_current_time); <TextView tvClick.setOnClickListener(new View.OnClickListener() { android:id="@+id/tv_click" @Override android:layout_width="wrap_content" public void onClick(View v) { android:layout_height="wrap_content" tvTime.setText(getNow()); } android:text="Click show current Time" }); tools:ignore="HardcodedText" /> <TextView android:id="@+id/tv_current_time" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> 

12 . 声明式 • 声明式的意思就是让我们描述我们需要⼀个什么样的界 ⾯，⽽不是告诉计算机⼀步⼀步怎么做。 • 我需要⼀个界⾯，它是⼀个垂直布局，⾥⾯有两个⽂本， 第⼆个⽂本的值和第⼀个⽂本点击时的时间相绑定 

13 .@Composable 声明式 fun currentTime() { Column{ Clickable(onClick = ClickTime::updateCurrentTime) { Text("Click show current time") } Text(ClickTime.currentTime) } } @Model object ClickTime { var currentTime = "" fun updateCurrentTime() { currentTime = getNow() } } 

14 . 声明式UI • 声明式 UI 框架近年来⻜速发展，并且被 Web 开发带向巅峰 • React 更是为声明式 UI 奠定了坚实基础并⼀直引领其未来的发展 • Flutter 的发布也将声明式 UI 的思想成功带到移动端开发领域 • Litho将声明式 UI 的思想带到了Android原⽣开发中 • Jetpack Compose，SwiftUI将声明式 UI 的思想带到了原⽣开发 中 

15 .Android历史回顾 

16 . Recycler Constraint Arch View Android Layout Components Jetpack Support 1.0 library Studio ART Kotlin Compose 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 A brief history of Android 

17 . UI⼯具存在的问题 • 1.继承的问题，代码耦合(View.java 3w⾏,Button) • 2.UI与系统绑定，bug不能及时修复 • 3.很重的代码历史包袱 • 4.布局嵌套，导致性能低，代码混乱 • 5.MVP，MVVM等等处理ViewModel和View 

18 . Compose的由来 • 1.2009年以来android UI⼯具⼀直根本性改变，弊 端⽇渐凸显。 • 2.随着ReactNative，Flutter等跨平台技术快速发展 的冲击，UI编写效率有待提⾼。 • 3.随着React的成功，声明式编程获取很⼤的成功。 • 4.为了更好解决android 版本的碎⽚化系统UI的bug 

19 . 新的UI⼯具设计思路 • 1.构架的选择：组合⽽⾮继承 • 2.编程范式选择：声明式编程（React，Flutter） • 3.编程语⾔的选择：Kotlin • 4.发布选择：独⽴发布，与平台解绑 • 5.兼容性，调⽤底层画布实现绘制，不使⽤@hide 的API 

20 . What is compose? • ⼀组UI控件 • 受到React，Litho，Vue.js和Flutter的启发 • Kotlin编译器插件 • 基于声明式编程模型 • 使⽤画布⽽不是视图 

21 . 优势 • 更少的代码：⽤更少的代码做更多的事情，避 免整个类的bug，代码简单易维护。 • 直观：只需描述UI，剩下的就由Compose处 理。 随着应⽤状态的更改，⽤户界⾯会⾃动更 新。 

22 . 开发环境 • Android Studio Preview 4.0 • ⽀持实时预览. • 配置依赖项 

23 . root build.gradle buildscript { repositories { google() jcenter() maven { url = uri("https://dl.bintray.com/kotlin/kotlin-eap") } } dependencies { classpath("com.android.tools.build:gradle:4.0.0-alpha03") classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-76") } } allprojects { repositories { google() jcenter() maven { url = uri("https://dl.bintray.com/kotlin/kotlin-eap") } } } 

24 . app build.gradle android { defaultConfi g { ... minSdkVersion(21) } compileOptions { sourceCompatibility = JavaVersion.VERSION_1_8 targetCompatibility = JavaVersion.VERSION_1_8 } withGroovyBuilder { "kotlinOptions" { setProperty("jvmTarget", "1.8") } } buildFeatures { compose = true } } dependencies { implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.60-eap-76") implementation("androidx.ui:ui-tooling:0.1.0-dev02") implementation("androidx.ui:ui-layout:0.1.0-dev02") implementation("androidx.ui:ui-material:0.1.0-dev02") } 

25 . Compose function 可组合函数：使⽤Kotlin编写的函数（只⽀持⽤ Kotlin来写），并⽤@Composable注解标记 ⽆需编写任何XML布局 @Composable Kotlin 函数 fun Greeting() { Text(text = "Hello World") UI 被定为⼀个函数 } 

26 . 预览 @Preview 增加 @Preview 注解 @Composable 在@Composable函数之上 fun Greeting() { 不需安装到⼿机上 Text(text = "Hello World") } 

27 .预览 

28 .预览，增加装饰 

29 .预览，增加装饰