Android工程内嵌Flutter,跨平台的渐进式解决方案

其实2017年的时候就已经接触Flutter了,但也只是写了个HelloWorld,一方面是Flutter在那时候还只是preview版本,另一方面ReactNative在那时候非常火热,忙于用ReactNative重构项目,错过了入坑Flutter的第一梯队。
在谷歌的2018IO大会上Flutter再一次成为了跨平台方案的焦点,而ReactNative也在随着Airbnb的弃用热度逐渐冷却,其实在写下这篇文章的时候我已经再次入坑了不短的一段时间,Flutter的各种特性也基本上都接触到了,demo项目也写了一些,但致使我迫不及待的写下这篇文章的直接原因是Flutter的这个能力:
Flutter能够无感知的嵌入到Android工程中,不管是从开发者角度还是用户角度,你甚至可以只从一个view开始来让Flutter参与到你的项目中去,接着替换或者开发某一个页面甚至功能,然后你就会对它爱不释手,让你会有用它重构项目和开发新项目的冲动。

  • 用户:毫秒级的加载速度,无论是view还是页面,基本上和原生无异。
  • 开发:只作为一个module引入工程,代码入侵极小,Android工程和Flutter工程互不相干。

Android工程内嵌Flutter

Kotlin+DataBinding的使用以及和Vue的比较

随着移动应用前端化越来越严重,原生应用开发的比重逐渐降低,慢慢被微信小程序/ReactNative/Weex/H5+/混合应用等替代,而这些前端化的技术栈中,mvvm模式最受推崇。
google在2015年的I/O大会就推出了mvvm模式的DataBinding框架,而在实际项目中被使用的情况并不多,在前端技术快速发展的今天,mvvm模式被推向了风口浪尖,而Android的DataBinding又一次受到了关注。
在google的2017年I/O大会上,kotlin被指定为Android开发官方语言,本篇以一个小例子记录DataBinding在kotlin环境下的配置以及使用,以及和前端框架Vue的mvvm模式的比较。

mvvm示例

制作一款HSV格式的颜色选择器

常用的颜色格式分为RGB格式和HSV格式,RGB顾名思义是通过红绿蓝三色来表达一个颜色的值,而真实的数据存储格式也是选择这种模式,将三色的值通过高地位来分别保存。RGB格式虽然存储起来方便,对计算机更有好,但是对于感官来说并不友好,而HSV格式则相对于RGB更加直接。
颜色选择器的色谱大部分都会选择使用预制图片来进行实现,有些low,本篇记录如何通过单纯的绘制来实现。
鉴于gif录制对色彩的展现不友好,这里的效果图改用H5的视频播发器,隐藏掉了控制栏,循环播放:

3D环形旋转效果的实现

随着电视盒和VR设备的推广,Android应用开始越来越多的使用3D效果,比如电视墙频道轮转这样的,而这种场景并不适合去引入3D引擎这种重量级的Lib,纯算法实现可能才是最佳实践,当然比起普通的自定义View会麻烦一些。

示例图

使用productFlavors对项目进行多产品发布

long long ago,android开发还只能在eclipse环境中进行开发,如果遇到多产品发布的需求,唯一的选择就是把工程项目拷贝一份出来,然后定制修改后进行打包发布。如果是深度定制的还好,若只是修改logo或应用名称的这种场景,再进行项目的开发就需要在所有产品的项目工程里进行重复性的调整,可怕。
而如今,我们有了更成熟的方案,只需要在guild.gradle文件中进行简单的配置,就可以实现一个项目打包多个产品的目的,果真是逆水行舟,不进则退。

注:这里的“产品”特指对客户进行定制化开发,类似于多渠道发布。

在ReactNative中使用MobX框架管理State实现ListView的局部更新

在ReactNative中UI的刷新大多数情况依赖于state的变更,通过调用组件的setState方法来更新state以达到通知组件重新渲染UI的目的。当然这种做法是官方提供的标准解决方案,在进行简单UI设计时足以满足大多数需求。
但是当遇到结构复杂并存在数据交互的界面设计时,手动管理state这种做法则会把代码逻辑变得非常混乱,组件内不但要负责UI的渲染,还要兼顾state的变更以及不同组件间数据的传递和同步。当项目遇到这种时,引入一个状态管理框架则显得尤为重要。
本篇则着重以一个List的数据展示及更新的例子来展开,记录如何在ReactNative中使用MobX框架来代替手动管理state更新Ui,以及如何实现最小粒度的界面渲染。
下面两图分别是不做任何处理的全局更新列表数据和使用MobX框架局部更新列表数据的运行效果,可以看到在使用MobX框架在更新行数据时只会重新渲染当前行的组件,而全局更新则会将ListView中的所有ItemView全部渲染一次,同时在实际操作中也会感到细微的卡顿。

image image

Android7.0新增工具DiffUtil详解

自从Google提供了RecyclerView之后,这个控件在Android列表和表格的开发中越来越多的替代了ListView和GridView,而且RecyclerView额外的提供了一些旧控件所没有的行为,比如局部刷新、列表表格更新动画、元素拖拽等等,极大程度的简化和方便了集合数据的展示UI的开发。
而在使用RecyclerView进行一些局部刷新时,往往会手动记录集合元素的增、删、变更、移动等事件,并分别调用不同的方法来通知adapter来对控件进行更新。而本篇介绍的工具类则对这些操作进行了完美的封装,让我们不再需要手动计算并记录元素的变更,而是交由DiffUtil来计算新旧数据集合的差异并通知adapter调用不同的更新方法来更新UI。

排序 局部刷新

,