Tangram系列(二)Android Tangram 整体介绍

2019-12-13  本文已影响0人  嘎啦果安卓兽

前言

上篇我们介绍了Tangram是什么,以及它使用到两个子框架Vlayout和VirtualView。本篇主要整体上来介绍Tangram的组成部分,以及各部分的作用。本篇不涉及原代码,后面,会单独文章对Tangram整体架构、Vlayout、VirtualView代码进行分析。因为VLayout的是基于RecyclerView实现的,最后会整体上对RecyclerView的绘制流程进行介绍。

Tangram适用场景

Tangram可适用于电商首页、内容推荐页等类型的页面,具有以下特点:

以千千音乐首页为例:


1112.png

Tangram设计思想

根据上图我们先统一两个概念:
布局:从业务看,一个红框是一组同类型的内容。从技术上看,一个红框就是一个布局。本文中提到的“红框”可以等同布局理解。
组件:从业务看,一个绿框是一个业务内容单元展示,从技术上看,一个绿框就是一个组件,对应就是RecyclerView的一个item。

Tangram设计思想:

Tangram的主要模块的作用

Vlayout-------实现布局动态化

Vlayout本身是一个单独的框架,是对RecyclerView的布局能力的加强版,提供了支持上图中不同布局样式的布局能力。一个布局会有一个LayoutHelper类去负责完成布局能力的实现。

VirtualView-------实现组件动态化

VirtualView本身是一个单独的框架,提供一套自定义View,和一般View一样可以在布局页面时使用。并且提供了View的动态化和虚拟化,虚拟化是可以简单理解为页面绘制渲染是简化View树来优化性能的。动态化,是指一个或者一组View,可以通过服务端下发给客户端去动态展示,而这里说的一个或者一组View,就可以理解为Tangram的一个组件的。也就是Tangram是使用VirtualView实现了组件的动态化。

Tangram核心框架-------实现业务数据和动态布局的结合

Tangram核心框架实现整个框架的初始化、流程控制、业务数据和动态布局的组合等功能。其实可以简单理解为,就是对Vlayout和VirtualView的完整的封装。

RecyclerView绘制流程

RecyclerView的组成部分
RecyclerView的绘制流程

RecyclerView自定义的ViewGroup,绘制流程肯定还是基于原生流程的onMeasure、layout、draw三大绘制流程,但是基于这三大流程进行了功能扩展。
测量和布局流程
需要强调一点的是,RecyclerView是一个布局比较复杂的View,绘制流程已经打破了onMeasure负责测量,layout负责布局的明显划分。而是根据功能需要封装了一下三个布局步骤:

为什么说绘制流程打破了onMeasure负责测量,layout负责布局的流程划分?例如在RecyclerView的一般绘制流程中,dispatchLayoutStep2会在onMeasure调用,已经就完成了itemview的测量和布局流程。

那这三个布局步骤的调用流程是怎么控制的?首先三个布局流程还是基于onMeasure、layout中调用,不过调用流程是根据RecyclerView的当前状态决定调用哪一步,RecyclerView有三种状态,来控制三个布局步骤的调用时机。
绘制流程
draw流程相对简单,就是根据需要完成对应的内容绘制,主要做了四件事:

LayoutManager完成itemview的布局流程

fill方法就是RecyclerView的完成itemview布局的地方,而Vlayout就是以这个里为切入点,自定义了LayoutManager将布局能力委托给了LayoutHelper完成。也就是,我们想自己定义一种特定的布局样式,就是要自定义一个LayoutHelper。

RecyclerView的绘制流程补充

以上说的流程是一般流程,实际流程要复杂很多,这里给大家补充说明一点:对于一个绘制完的RecyclerView,屏幕上的itemView不是每次都全部remove再添加的。例如滑动时候,并没有调用到onLayoutChildren,而是通过调用itemview的offsetTopAndBottom方法实现滑动。 但是当有新的itemview滑出时,onLayoutChildren会被调用,remove所有的itemView,fill方法进行itemView的填充。

总结

本文主要整体介绍了Tangram三大组成部分以及其作用,RecyclerView的绘制流程。都是结论性的总结说明,为之后的各模块的详细分析,提供一个概念的说明,有利于大家整体上把握Tangram框架。如有理解不当之处欢迎指正。

上一篇 下一篇

猜你喜欢

热点阅读