Android DisplayList 構(gòu)建過程

轉(zhuǎn)載請標(biāo)注出處:http://www.reibang.com/p/7bf306c09c7e

先推薦一篇很不錯的關(guān)于DisplayList構(gòu)建的文章 Android N中UI硬件渲染(hwui)的HWUI_NEW_OPS(基于Android 7.1)
看得出來作者對于硬件加速這塊研究的很透徹褂策, 對于一些概念性的東西解釋的很到位馋吗,強烈建議大家去拜讀一下。

而本文以具體的例子(MyView繪制)來解釋DisplayList的構(gòu)建過程莺奸,相信會更加直觀, 更易理解DisplayList相關(guān)的代碼與概念。

一辜荠、前言

1.1 代碼環(huán)境

本文就是一個很簡單的Android sample养交,onCreate里去inflate activity_main.xml

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
    }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/sample_text"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:textSize="20sp"
        android:text="Hello World!" />
    
    <cc.bobby.debugapp.MyView
        android:layout_width="match_parent"
        android:layout_height="100dp" />
</LinearLayout>

而MyView也就是override了 onDraw函數(shù),這個見第二節(jié)枕荞。

最終的整個View圖大致如下所示

圖1 View Hierarchy

1.2 updateRootDisplayList的遞歸調(diào)用過程

基于1.1的View Hierarchy的代碼調(diào)用過程如下所示

圖2 DisplayList構(gòu)建過程

二柜候、MyView的回調(diào) onDraw

MyView的onDraw(Canvas canvas)回調(diào)函數(shù)允許開發(fā)者在已經(jīng)獲得的Canvas上繪制了, 這些繪制就是直接在顯示設(shè)備上畫圖了么躏精? 當(dāng)然不是渣刷,實際上它僅僅是將繪制命令保存到 DisplayList 里面。

來看下自定義的 MyView中的 onDraw函數(shù)

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    mPaint.setColor(Color.RED);
    canvas.drawCircle(100, 100, 100, mPaint); //繪制一個圓矗烛,圓心(100, 100), 半徑100

    canvas.save();
    canvas.translate(250, 0);  //坐標(biāo)系向右移動250

    mPaint.setColor(Color.GRAY);
    canvas.drawRect(0, 0, 200, 200, mPaint);  //在新的坐標(biāo)系中畫一個200x200的正方形

    mPaint.setColor(Color.YELLOW);

    Path path = new Path();
    path.moveTo(500, 0);
    path.lineTo(700, 0);
    path.lineTo(500, 200);
    path.close();
    canvas.drawPath(path, mPaint);   //在新的坐標(biāo)系中畫一個三角形
    canvas.restore();
}

最終繪制出來的圖如下MyView所示辅柴,一個圓,一個正方形,一個三角形


圖3 MyView

那這些繪制命令是怎么保存到DisplayList中的呢碌嘀?

圖4 Canvas類圖

如圖所示涣旨,RenderNode在繪制時會創(chuàng)建一個DisplayListCanvas,而對應(yīng)于Native的是一個RecordingCanvas(這個HWUI_NEW_OPS宏已經(jīng)被默認為true了), 這個RecordingCanvas會將后續(xù)的繪制命令保存到DisplayList當(dāng)中, 其中

  • mSnapshot: 表示當(dāng)前的快照股冗,用來記錄當(dāng)前繪制的坐標(biāo)系
  • mFirstSnapshot: 一個初始快照霹陡,保存初始化的一些值

注意: 一個RenderNode可以有多個Snapshot, 這取決于程序調(diào)用 canvas.save的個數(shù),所有的Snapshot通過單鏈表(*previous)組織起來魁瞪,表頭由 mSnapshot 指定穆律。

2.1 沒有Canvas.save

正常情況下,如果沒有 canvas.save导俘, 所有的繪制都是在mSnapshot中進行
如 MyView 中的 drawCircle

    mPaint.setColor(Color.RED);
    canvas.drawCircle(getPivotX(), getPivotY(), getHeight()/2, mPaint);

drawCircle在Native層的調(diào)用過程如下

void RecordingCanvas::drawCircle(float x, float y, float radius, const SkPaint& paint) {
    if (radius <= 0) return;
    drawOval(x - radius, y - radius, x + radius, y + radius, paint);
}

void RecordingCanvas::drawOval(float left, float top, float right, float bottom, const SkPaint& paint) {
    addOp(alloc().create_trivial<OvalOp>(
            Rect(left, top, right, bottom),
            *(mState.currentSnapshot()->transform),
            getRecordedClip(),
            refPaint(&paint)));
}

mState.currentSnapshot() 即 mSnapshot,Snapshot中的transform是一個Matrix4的矩陣類剔蹋,它主要保存當(dāng)前Snapshot中的 translate/rotate/scale等值旅薄, 其實就是坐標(biāo)系的值。

drawCircle在MyView的(100, 100)位置畫一個半徑為100的圓圈泣崩, 它在RecordingCanvas中表示如下,

圖5 drawCircle

2.2 有canvas.save的情況

接著看下onDraw后面的繪制

    canvas.save();
    canvas.translate(250, 0);  //坐標(biāo)系向右移動250

    mPaint.setColor(Color.GRAY);
    canvas.drawRect(0, 0, 200, 200, mPaint);  //在新的坐標(biāo)系中畫一個200x200的正方形

    mPaint.setColor(Color.YELLOW);

    Path path = new Path();
    path.moveTo(500, 0);
    path.lineTo(700, 0);
    path.lineTo(500, 200);
    path.close();
    canvas.drawPath(path, mPaint);   //在新的坐標(biāo)系中畫一個三角形
    canvas.restore();

canvas.save()在Native中使用一個新Snapshot_2來保存后續(xù)的繪制少梁,因為canvas可能會有一些translate/scale又或者是rotate的操作, 而這些操作又會導(dǎo)致坐標(biāo)系的改變矫付,如果直接在當(dāng)前Snapshot_1中繪制凯沪,一旦坐標(biāo)系變了,那可能會對后續(xù)的繪制命令造成意料之外的結(jié)果买优。
接下來我們來看下canvas.save的實現(xiàn)

    public int save() {
        return native_save(mNativeCanvasWrapper, MATRIX_SAVE_FLAG | CLIP_SAVE_FLAG);
    }

native_save中第二個參數(shù)指明是否將當(dāng)前的Snapshot_1中的Matrix/clip相關(guān)信息保存到新的Snapshot_2中妨马,即是否是基于當(dāng)前坐標(biāo)系繪制。而 native_save最終會調(diào)用CanvasState的saveSnapshot

int CanvasState::saveSnapshot(int flags) {
    mSnapshot = allocSnapshot(mSnapshot, flags);
    return mSaveCount++;
}
Snapshot* CanvasState::allocSnapshot(Snapshot* previous, int savecount) {
    void* memory;
    if (mSnapshotPool) {
        memory = mSnapshotPool;
        mSnapshotPool = mSnapshotPool->previous;
        mSnapshotPoolCount--;
    } else {
        memory = malloc(sizeof(Snapshot));
    }   
    return new (memory) Snapshot(previous, savecount);
}

mSnapshotPool是一個Snapshot的內(nèi)存沲子杀赢,因為Java層的DisplayListCanvas是臨時繪制烘跺,最終都會回收掉,同樣native的RecordingCanvas一樣脂崔,因此為了避免重復(fù)的申請/釋放內(nèi)存滤淳,索性就不釋放,只需重置一下就好砌左, 而Snapshot在一個Canvas的個數(shù)取決于canvas.save的調(diào)用次數(shù), 盡管對調(diào)用次數(shù)沒有限制脖咐,但是防止內(nèi)存被消耗完,與save對應(yīng)的restore會釋放掉多于10個以上的Snapshot汇歹,即一個RecordingCanvas最多保存10個Snapshot內(nèi)存, 并儲存在 mSnapshotPool內(nèi)存沲子里屁擅。

最終的RecordingCanvas繪制后的類圖如下所示

圖6 canvas.save

注意: 事實上 canvas.restore會將 Snapshot_2回收到 mSnapshotPool中,為了方便秤朗,這里就不再刻意畫出來煤蹭。
從圖中可以看出來,對坐標(biāo)系的變換比如translate會直接操作Snapshot的transform所指向的Matrix4, 而繪制命令(由RecordedOp表示)如 drawRect/drawPath會保存到DisplayList的ops vector中,

DisplayList中的chunk表示一組RecordedOp, 它用于記錄一組RecordedOp在ops中的位置區(qū)域,如圖中所示 chunk的beginOpIndex=0, endOpIndex=3, 表示ops[0], ops[1], ops[2]是一組InOder的繪制命令硝皂。

在Java層與Chunk相關(guān)的兩個函數(shù)被設(shè)置成了hide, 即開發(fā)者不能直接調(diào)用

insertInorderBarrier()
insertReorderBarrier()

而這兩個函數(shù)最終會影響 RecordingCanvas mDeferredBarrierType常挚,最終影響addOp這個函數(shù)

以上是MyView在canvas里繪制過程, 下面來看下DisplayList是怎樣保存到MyView的RenderNode中的

三稽物、MyView保存DisplayList到RenderNode中

MyView的繪制過程

MyView.draw(canvas_LinearLayout_2, ViewGroup parent, long drawingTime)   //MyView開始draw, 注意此時傳進來還是canvas_LinearLayout_2
    MyView.updateDisplayListIfDirty   //生成canvas_MyView(1200x100)
        draw(canvas_MyView)  //MyView開始draw  此時的canvas: canvas_MyView
            drawBackground(canvas_MyView) //不討論這個
            onDraw(canvas_MyView)   //回調(diào)MyView的onDraw
            onDrawForeground(canvas_MyView) //略過
            
        MyView.mRenderNode.end(canvas_MyView) //MyView的結(jié)束recording display list 
    canvas_LinearLayout_2.drawRenderNode(MyView.mRenderNode) //將MyView的DisplayList加入到LinearLayout_2的DisplayList中

MyView在updateDisplayListIfDirty函數(shù)中會去獲得一張Canvas奄毡,用來記錄繪制命令

public RenderNode updateDisplayListIfDirty() {
    ...
    final DisplayListCanvas canvas = renderNode.start(width, height);
    ...
}
圖7 RenderNode and Canvas

onDraw過程請參考第一節(jié)

現(xiàn)在來看下 MyView.mRenderNode.end(canvas_MyView)

    public void end(DisplayListCanvas canvas) {
        long displayList = canvas.finishRecording();
        nSetDisplayList(mNativeRenderNode, displayList);
        canvas.recycle(); //將Java層中的canvas回收到sPool中
        mValid = true;  //mValid=true表示RenderNode中DisplayList已經(jīng)有效了
    }

canvas.finishRecording()函數(shù)會直接返回native中RecordingCanvas所指示的DisplayList地址
然后通過 nSetDisplayList將DisplayList保存到Native的RenderNode的mStagingDisplayList中, 如下圖所示

圖8 將cavnas中的DisplayList保存到MyView的Native RenderNode當(dāng)中

四、LinearLayout_2保存MyView的DisplayList

第二節(jié)僅僅是將DisplayList保存到MyView的RenderNode中了贝或,擴展到一般性吼过,即每個View都有自己的RenderNode, DisplayList, 各個View之間有沒有聯(lián)系? 如果有,那它們是怎樣聯(lián)系起來的呢咪奖?

接下來看第二節(jié)開始的最后那塊代碼,

canvas_LinearLayout_2.drawRenderNode(MyView.mRenderNode) 

canvas_LinearLayout_2即是LinearLayout_2的canvas, 而MyView又是LinearLayout_2的一個子view, 它們之間通過DisplayListCanvas的drawRenderNode 有了相關(guān)聯(lián)系盗忱,

public void drawRenderNode(RenderNode renderNode) {
    nDrawRenderNode(mNativeCanvasWrapper, renderNode.getNativeDisplayList());
    //mNativeCanvasWrapper指向LinearLayout_2對應(yīng)的native canvas, 
    //renderNode是MyView的RenderNode, 這里獲得的renderNode對應(yīng)jni中的RenderNode地址
}

nDrawRenderNode最終后調(diào)用到j(luò)ni android_view_DisplayListCanvas_drawRenderNode

static void android_view_DisplayListCanvas_drawRenderNode(JNIEnv* env,
        jobject clazz, jlong canvasPtr, jlong renderNodePtr) {
    Canvas* canvas = reinterpret_cast<Canvas*>(canvasPtr);    // LinearLayout_2的canvas
    RenderNode* renderNode = reinterpret_cast<RenderNode*>(renderNodePtr); //MyView的RenderNode
    canvas->drawRenderNode(renderNode);
}

接著來看下drawRenderNode()

void RecordingCanvas::drawRenderNode(RenderNode* renderNode) {
    auto&& stagingProps = renderNode->stagingProperties();
    RenderNodeOp* op = alloc().create_trivial<RenderNodeOp>(
            Rect(stagingProps.getWidth(), stagingProps.getHeight()),
            *(mState.currentSnapshot()->transform),
            getRecordedClip(),
            renderNode);
    int opIndex = addOp(op); //加入到DisplayList的ops中
    if (CC_LIKELY(opIndex >= 0)) {
        int childIndex = mDisplayList->addChild(op); //加入到 DisplayList的chirldren中,

        // update the chunk's child indices
        DisplayList::Chunk& chunk = mDisplayList->chunks.back();
        chunk.endChildIndex = childIndex + 1;

        if (renderNode->stagingProperties().isProjectionReceiver()) {
            // use staging property, since recording on UI thread
            mDisplayList->projectionReceiveIndex = opIndex;
        }
    }
}

由代碼可見羊赵,drawRenderNode會將子View的RenderNode封裝進一個RenderNodeOp插入到ops中趟佃,作為一個繪制命令,這個繪制命令的意思是繪制整個子View, 而非普通的 OvalOp, RectOp昧捷。最后也將它插入到 children中闲昭,表示是子View(并不是說children里保存的僅僅是子View, 像繪制背景這樣的也會保存到 children, 為了簡單,就認為children保存的是子View的RenderNode吧).

最后LinearLayout_2繪制完TextView和MyView的UML圖如下所示, 這樣子靡挥,父View與子View的DisplayList就構(gòu)建起聯(lián)系了序矩。

圖9 Linearlayout與子View的DisplayList圖

五、DisplayList的樹形圖

    private void updateRootDisplayList(View view, HardwareDrawCallbacks callbacks) {
        updateViewTreeDisplayList(view); //此處View是DecorView, 更新View Tree的DisplayList
        if (mRootNodeNeedsUpdate || !mRootNode.isValid()) {
            DisplayListCanvas canvas = mRootNode.start(mSurfaceWidth, mSurfaceHeight);
            try {
                final int saveCount = canvas.save();
                canvas.translate(mInsetLeft, mInsetTop);
                callbacks.onHardwarePreDraw(canvas);

                canvas.insertReorderBarrier();
                canvas.drawRenderNode(view.updateDisplayListIfDirty());
                canvas.insertInorderBarrier();

                callbacks.onHardwarePostDraw(canvas);
                canvas.restoreToCount(saveCount);
                mRootNodeNeedsUpdate = false;
            } finally {
                mRootNode.end(canvas);
            }
        }
    }

updateViewTreeDisplayList更新了整個UI的樹形DisplayList, 此時整個RenderNode頭是DecorView, 而在updateViewTreeDisplayList后面的代碼中又會將DecorView的RenderNode也就是DisplayList保存到ThreadedRenderer的的RootRenderNode中跋破。

至此整個UI的DisplayList樹形圖就畫完了簸淀,盜用Android N中UI硬件渲染(hwui)的HWUI_NEW_OPS(基于Android 7.1)中的圖

DisplayList樹形圖
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市幔烛,隨后出現(xiàn)的幾起案子啃擦,更是在濱河造成了極大的恐慌,老刑警劉巖饿悬,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件令蛉,死亡現(xiàn)場離奇詭異,居然都是意外死亡狡恬,警方通過查閱死者的電腦和手機珠叔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來弟劲,“玉大人祷安,你說我怎么就攤上這事⊥闷颍” “怎么了汇鞭?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵凉唐,是天一觀的道長。 經(jīng)常有香客問我霍骄,道長台囱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任读整,我火速辦了婚禮簿训,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘米间。我一直安慰自己强品,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布屈糊。 她就那樣靜靜地躺著的榛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逻锐。 梳的紋絲不亂的頭發(fā)上困曙,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機與錄音谦去,去河邊找鬼。 笑死蹦哼,一個胖子當(dāng)著我的面吹牛鳄哭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播纲熏,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼妆丘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了局劲?” 一聲冷哼從身側(cè)響起勺拣,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎鱼填,沒想到半個月后药有,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡苹丸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年愤惰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赘理。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡宦言,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出商模,到底是詐尸還是另有隱情奠旺,我是刑警寧澤蜘澜,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站响疚,受9級特大地震影響鄙信,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜稽寒,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一扮碧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧杏糙,春花似錦慎王、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至谅河,卻和暖如春咱旱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背绷耍。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工吐限, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人褂始。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓诸典,卻偏偏與公主長得像,于是被迫代替她去往敵國和親崎苗。 傳聞我的和親對象是個殘疾皇子狐粱,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容