前言

上篇我們介紹了Tangram是什么，以及它使用到兩個(gè)子框架Vlayout和VirtualView。本篇主要整體上來(lái)介紹Tangram的組成部分，以及各部分的作用。本篇不涉及原代碼，后面，會(huì)單獨(dú)文章對(duì)Tangram整體架構(gòu)、Vlayout、VirtualView代碼進(jìn)行分析。因?yàn)閂Layout的是基于RecyclerView實(shí)現(xiàn)的，最后會(huì)整體上對(duì)RecyclerView的繪制流程進(jìn)行介紹。

Tangram適用場(chǎng)景

Tangram可適用于電商首頁(yè)、內(nèi)容推薦頁(yè)等類型的頁(yè)面，具有以下特點(diǎn)：

• 上下滑動(dòng)的頁(yè)面。
• 頁(yè)面內(nèi)容變化較頻繁，支持個(gè)性化展示。例如：電商類首頁(yè)根據(jù)不同的買家推薦不同的商品，展示樣式不同。
• 頁(yè)面整體布局風(fēng)格，不會(huì)頻繁的變動(dòng)。由于布局能力是基于定義好的模板，如果每次都要開(kāi)發(fā)人員開(kāi)發(fā)新的模板，就失去了框架的意義 。

以千千音樂(lè)首頁(yè)為例：

1112.png

Tangram設(shè)計(jì)思想

根據(jù)上圖我們先統(tǒng)一兩個(gè)概念：
布局：從業(yè)務(wù)看，一個(gè)紅框是一組同類型的內(nèi)容。從技術(shù)上看，一個(gè)紅框就是一個(gè)布局。本文中提到的“紅框”可以等同布局理解。
組件：從業(yè)務(wù)看，一個(gè)綠框是一個(gè)業(yè)務(wù)內(nèi)容單元展示，從技術(shù)上看，一個(gè)綠框就是一個(gè)組件，對(duì)應(yīng)就是RecyclerView的一個(gè)item。

Tangram設(shè)計(jì)思想：

• 布局動(dòng)態(tài)化，如上圖中，各類型的紅框的展示順序，紅框的展示樣式，紅框的title布局樣式都是可以通過(guò)服務(wù)端下發(fā)動(dòng)態(tài)調(diào)整的。布局能力的模板是內(nèi)置在框架里的。
• 組件動(dòng)態(tài)化，如上圖中，各類型綠框具體展示的樣式，綠框展示業(yè)務(wù)內(nèi)容等是可以通過(guò)服務(wù)端下發(fā)動(dòng)態(tài)調(diào)整的。組件展示樣式的模板可以內(nèi)置在框架中，也可以動(dòng)態(tài)下發(fā)。
• 動(dòng)態(tài)能力粗粒度化，通過(guò)布局+組件的形式搭建整個(gè)頁(yè)面，這個(gè)動(dòng)態(tài)能力比較粗，不像H5或者Weex從基本的UI元素開(kāi)始搭建整個(gè)頁(yè)面。
• 組件的復(fù)用，如上圖中，組件是在不同的布局中的，但是列表類型的頁(yè)面我們?nèi)匀恍枰獙?shí)現(xiàn)組件的復(fù)用，就像ListView、RecyclerView那樣。

Tangram的主要模塊的作用

Vlayout-------實(shí)現(xiàn)布局動(dòng)態(tài)化

Vlayout本身是一個(gè)單獨(dú)的框架，是對(duì)RecyclerView的布局能力的加強(qiáng)版，提供了支持上圖中不同布局樣式的布局能力。一個(gè)布局會(huì)有一個(gè)LayoutHelper類去負(fù)責(zé)完成布局能力的實(shí)現(xiàn)。

VirtualView-------實(shí)現(xiàn)組件動(dòng)態(tài)化

VirtualView本身是一個(gè)單獨(dú)的框架，提供一套自定義View，和一般View一樣可以在布局頁(yè)面時(shí)使用。并且提供了View的動(dòng)態(tài)化和虛擬化，虛擬化是可以簡(jiǎn)單理解為頁(yè)面繪制渲染是簡(jiǎn)化View樹(shù)來(lái)優(yōu)化性能的。動(dòng)態(tài)化，是指一個(gè)或者一組View，可以通過(guò)服務(wù)端下發(fā)給客戶端去動(dòng)態(tài)展示，而這里說(shuō)的一個(gè)或者一組View，就可以理解為Tangram的一個(gè)組件的。也就是Tangram是使用VirtualView實(shí)現(xiàn)了組件的動(dòng)態(tài)化。

Tangram核心框架-------實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)和動(dòng)態(tài)布局的結(jié)合

Tangram核心框架實(shí)現(xiàn)整個(gè)框架的初始化、流程控制、業(yè)務(wù)數(shù)據(jù)和動(dòng)態(tài)布局的組合等功能。其實(shí)可以簡(jiǎn)單理解為，就是對(duì)Vlayout和VirtualView的完整的封裝。

RecyclerView繪制流程

RecyclerView的組成部分

• LayoutManager 負(fù)責(zé)RecyclerView子View的布局過(guò)程，常用的有LinearLayoutManager(線性布局)，還有GridLayoutManager(網(wǎng)格布局)和StaggeredGridLayoutManager(瀑布布局)等。
• Adapter 負(fù)責(zé)將數(shù)據(jù)轉(zhuǎn)變成視圖，使用時(shí)需要繼承該類。
• ItemAnimator 收集并執(zhí)行子視圖動(dòng)畫，RecyclerView有默認(rèn)的子視圖動(dòng)畫，也可自定義實(shí)現(xiàn)。
• ItemDecoration 分隔線，需自定義實(shí)現(xiàn)。
  Tangram使用了RecyclerView的布局能力，這里我們著重分析他的繪制流程。

RecyclerView的繪制流程

RecyclerView自定義的ViewGroup，繪制流程肯定還是基于原生流程的onMeasure、layout、draw三大繪制流程，但是基于這三大流程進(jìn)行了功能擴(kuò)展。
測(cè)量和布局流程
需要強(qiáng)調(diào)一點(diǎn)的是，RecyclerView是一個(gè)布局比較復(fù)雜的View，繪制流程已經(jīng)打破了onMeasure負(fù)責(zé)測(cè)量，layout負(fù)責(zé)布局的明顯劃分。而是根據(jù)功能需要封裝了一下三個(gè)布局步驟：

• dispatchLayoutStep1，預(yù)布局處理Adapter更新，保存ItemView的動(dòng)畫信息。例如：做一個(gè)刪除itemview動(dòng)畫時(shí)，我首先要ItemView和他的動(dòng)畫保存下來(lái)。
• dispatchLayoutStep2，真正itemview的測(cè)量和布局，調(diào)用了LayoutManager的onLayoutChildren方法,這個(gè)方法里面進(jìn)行對(duì)itemView的測(cè)量和布局
• dispatchLayoutStep3，執(zhí)行在dispatchLayoutStep1方法里面保存的動(dòng)畫信息。

為什么說(shuō)繪制流程打破了onMeasure負(fù)責(zé)測(cè)量，layout負(fù)責(zé)布局的流程劃分？例如在RecyclerView的一般繪制流程中，dispatchLayoutStep2會(huì)在onMeasure調(diào)用，已經(jīng)就完成了itemview的測(cè)量和布局流程。

那這三個(gè)布局步驟的調(diào)用流程是怎么控制的？首先三個(gè)布局流程還是基于onMeasure、layout中調(diào)用，不過(guò)調(diào)用流程是根據(jù)RecyclerView的當(dāng)前狀態(tài)決定調(diào)用哪一步，RecyclerView有三種狀態(tài)，來(lái)控制三個(gè)布局步驟的調(diào)用時(shí)機(jī)。
繪制流程
draw流程相對(duì)簡(jiǎn)單，就是根據(jù)需要完成對(duì)應(yīng)的內(nèi)容繪制，主要做了四件事：

• 繪制ItemDecoration的onDraw部分;
• 繪制itemView;
• 繪制ItemDecoration的drawOver部分;
• 根據(jù)mClipToPadding的值來(lái)判斷是否進(jìn)行特殊繪制。

LayoutManager完成itemview的布局流程

• 計(jì)算布局錨點(diǎn)所在位置。
• remove掉RecyclerView的itemView。
• 根據(jù)錨點(diǎn)信息，循環(huán)調(diào)用fill方法進(jìn)行itemView的填充。

fill方法就是RecyclerView的完成itemview布局的地方，而Vlayout就是以這個(gè)里為切入點(diǎn)，自定義了LayoutManager將布局能力委托給了LayoutHelper完成。也就是，我們想自己定義一種特定的布局樣式，就是要自定義一個(gè)LayoutHelper。

RecyclerView的繪制流程補(bǔ)充

以上說(shuō)的流程是一般流程，實(shí)際流程要復(fù)雜很多，這里給大家補(bǔ)充說(shuō)明一點(diǎn)：對(duì)于一個(gè)繪制完的RecyclerView，屏幕上的itemView不是每次都全部remove再添加的。例如滑動(dòng)時(shí)候，并沒(méi)有調(diào)用到onLayoutChildren，而是通過(guò)調(diào)用itemview的offsetTopAndBottom方法實(shí)現(xiàn)滑動(dòng)。 但是當(dāng)有新的itemview滑出時(shí)，onLayoutChildren會(huì)被調(diào)用，remove所有的itemView，fill方法進(jìn)行itemView的填充。

總結(jié)

本文主要整體介紹了Tangram三大組成部分以及其作用，RecyclerView的繪制流程。都是結(jié)論性的總結(jié)說(shuō)明，為之后的各模塊的詳細(xì)分析，提供一個(gè)概念的說(shuō)明，有利于大家整體上把握Tangram框架。如有理解不當(dāng)之處歡迎指正。