Declarative UI toolkit with Jetpack Compose

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.预览,增加装饰