2. 程式人生 > >自定義元件開發一 View 的繪製流程

自定義元件開發一 View 的繪製流程

阿新 • • 發佈：2018-11-14

Activity 的組成結構

Activity對於安卓開發來說，是熟悉的不能再熟悉的，它是安卓四大元件之一，用來做介面顯示用的，那麼我相信，並不是所有的朋友都對Activity的組成結構有清晰的認識，這裡簡單聊聊Activity的組成。
實際介面展示的是Activity中的Window來完成的，Activity中有一個PhoneWindow物件，它繼承自Window，裡面有一個頂級的RootView 叫DecorView，DecorView 是我們建立的所有的View的根，DecorView 由三部分組成 ActionBar、標題區和內容區，其中內容區是我們用的比較多的，比如我們可以通過android.R.id.content 獲取到內容區，是一個FrameLayout。
DecorView 繼承自FrameLayout,我們在Activity 中呼叫SetContentView(layoutResID)

    /**
     * Set the activity content from a layout resource.  The resource will be
     * inflated, adding all top-level views to the activity.
     *
     * @param layoutResID Resource ID to be inflated.
     *
     * @see #setContentView(android.view.View)
     * @see #setContentView(android.view.View, android.view.ViewGroup.LayoutParams)
     */
 

    public void setContentView(int layoutResID) {
        getWindow().setContentView(layoutResID);
        initWindowDecorActionBar();
    }

其實就是傳遞給PhoneWindow

362     @Override
363     public void More ...setContentView(int layoutResID) {
364         // Note: FEATURE_CONTENT_TRANSITIONS may be set in the process of installing the window
 

365         // decor, when theme attributes and the like are crystalized. Do not check the feature
366         // before this happens.
367         if (mContentParent == null) {
368             installDecor();
369         } else if (!hasFeature(FEATURE_CONTENT_TRANSITIONS)) {
370             mContentParent.removeAllViews();
371         }
372 
373         if (hasFeature(FEATURE_CONTENT_TRANSITIONS)) {
374             final Scene newScene = Scene.getSceneForLayout(mContentParent, layoutResID,
375                     getContext());
376             transitionTo(newScene);
377         } else {
378             mLayoutInflater.inflate(layoutResID, mContentParent);
379         }
380         final Callback cb = getCallback();
381         if (cb != null && !isDestroyed()) {
382             cb.onContentChanged();
383         }
384     }

mContentParent 就是android.R.id.content 表示的那個內容區容器。最終我們setContentView 傳進來的View就新增到了mContentParent 上面。

這裡寫圖片描述

這張圖可以形象表面，上面所說的各部分關係：

Activity 類似於一個框架，負責容器生命週期及活動，視窗通過 Window 來管理；
Window 負責視窗管理（實際是子類 PhoneWindow），視窗的繪製和渲染交給 DecorView完成；
DecorView 是 View 樹的根，開發人員為 Activity 定義的 layout 將成為 DecorView 的子檢視 ContentParent 的子檢視；
layout.xml 是開發人員定義的佈局檔案，最終 inflate 為 DecorView 的子元件；

另外PhoneWinodw 中有兩個比較重要的物件WindowManager和ViewRootImpl。
WindowManager 處理觸控事件，ViewRootImpl去完成UI的繪製。
這裡寫圖片描述

View的繪製

ViewRootImpl 負責 Activity 整個 UI 的繪製，而繪製是 ViewRootImpl 的
performTraversals()方法。
裡面有三個方法：
這裡寫圖片描述

performMeasure()：測量元件的大小；
performLayout()：用於子元件的定位（放在視窗的什麼地方）；
performDraw()：將元件的外觀繪製出來；

測量元件

performMeasure()方法負責元件自身尺寸的測量，我們知道，在 layout 佈局檔案中，每一個
元件都必須設定 layout_width 和 layout_height 屬性。
屬性值有三種可選模式：wrap_content、match_parent 和數值，
performMeasure()方法根據設定的模式計算出元件的寬度和高度。大多數情況下模式為 match_parent 和數值的時候是不需要計算的，傳過來的就是父容器自己計算好的尺寸或是一個指定的精確值，只有當模式為 wrap_content 的時候才需要根據內容進行尺寸的測量。

private void performMeasure(int childWidthMeasureSpec, int
childHeightMeasureSpec) {
    try {
            mView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
        } finally {
    }
}

performMeasure方法測量元件呼叫了View的 measure方法

public final void measure(int widthMeasureSpec, int heightMeasureSpec) {
    ……
    onMeasure(widthMeasureSpec, heightMeasureSpec);
    ……
}

onMeasure()一般我們需要重寫這個方法去給View的子類指定寬度和高度。

如果測量的是容器的尺寸，而容器的尺寸又依賴於子元件的大小，所以必須先測量容器中子
元件的大小，不然，測量出來的寬度和高度永遠為 0

確定元件的位置

performLayout()方法用於確定子元件的位置，所以，該方法只針對 ViewGroup 容器類。作為容器，必須為容器中的子 View 精確定義位置和大小。

private void performLayout(WindowManager.LayoutParams lp,
                        int desiredWindowWidth, int desiredWindowHeight){
    ……
    host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());
    ……
    for (int i = 0; i < numValidRequests; ++i) {
        final View view = validLayoutRequesters.get(i);
        view.requestLayout();
    }
}

程式碼中的 host 是 View 樹中的根檢視（DecroView），也就是最外層容器，容器的位置安排在左上角（0, 0），其大小預設會填滿 mContentParent 容器。我們重點來看一下 layout()方法的原始碼

public void layout(int l, int t, int r, int b) {
    if ((mPrivateFlags3 & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0) {
        onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);
        mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
    }
    int oldL = mLeft;
    int oldT = mTop;
    int oldB = mBottom;
    int oldR = mRight; 
    boolean changed = isLayoutModeOptical(mParent) ?
    setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);
    if (changed || (mPrivateFlags &
        PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
        onLayout(changed, l, t, r, b);
    ……
    }
    ……
}

在 layout()方法中，在定位之前如果需要重新測量元件的大小，則先呼叫 onMeasure()方法，接下來執行 setOpticalFrame()或 setFrame()方法確定自身的位置與大小，此時只是儲存了相關的值，與具體的繪製無關。隨後，onLayout()方法被呼叫

protected void onLayout(boolean changed, int left, int top, int right, int          bottom) {

}

onLayout()方法在這裡的作用是當前元件為容器時，負責定位容器中的子元件

繪製元件

performDraw()方法執行元件的繪製功能，元件繪製是一個十分複雜的過程，不僅僅繪製組
件本身，還要繪製背景、滾動，繪製流程：

private void performDraw() {
final boolean fullRedrawNeeded = mFullRedrawNeeded;
mFullRedrawNeeded = false;
mIsDrawing = true;
try {
    draw(fullRedrawNeeded);
} finally {
    mIsDrawing = false;
}
……
}

在 performDraw()方法中呼叫了 draw()方法：

private void draw(boolean fullRedrawNeeded) {
……
if (!drawSoftware(surface, mAttachInfo, xOffset, yOffset, scalingRequired, dirty)) {
 return;
}
……
}

draw()方法又呼叫了 drawSoftware()方法：

private boolean drawSoftware(Surface surface, AttachInfo attachInfo, int xoff, int yoff,
boolean scalingRequired, Rect dirty) {
……
final Canvas canvas;
final int left = dirty.left;
final int top = dirty.top;
final int right = dirty.right;
final int bottom = dirty.bottom;
canvas = mSurface.lockCanvas(dirty);
if (!canvas.isOpaque() || yoff != 0 || xoff != 0) {
    canvas.drawColor(0, PorterDuff.Mode.CLEAR);
}
mView.draw(canvas);
surface.unlockCanvasAndPost(canvas);
……
}

drawSoftware()方法中呼叫了 mView 的 draw()方法，前面說過，mView 是 Activity 介面中 View樹的根（DecroView），也是一個容器（具體來說就是一個 FrameLayout 佈局容器）FrameLayout 類的 draw()方法原始碼：

public void draw(Canvas canvas) {
super.draw(canvas);
……
final Drawable foreground = mForeground;
foreground.draw(canvas);
}

FrameLayout 類的 draw()方法做了兩件事，一是呼叫父類的 draw()方法繪製自己，二是將前景點陣圖畫在了 canvas 上。自然，super.draw(canvas)語句是我們關注的重點，FrameLayout 繼承自ViewGroup，遺憾的是 ViewGroup 並沒有重寫 draw()方法，也就是說，ViewGroup 的繪製完全重用了他的父類 View 的 draw()方法，不過，ViewGroup 中定義了一個名為 dispatchDraw()的方法，該方法在 View 中定義，在 ViewGroup 中實現，至於有什麼用，暫且賣個關子，我們先扒開 View的 draw()方法原始碼看看：

public void draw(Canvas canvas) {
    background.draw(canvas);
    if (!dirtyOpaque) onDraw(canvas);
    dispatchDraw(canvas);
    onDrawScrollBars(canvas);
}

View 類的 draw()方法是元件繪製的核心方法，主要做了下面幾件事：
繪製背景：background.draw(canvas)
繪製自己：onDraw(canvas)
繪製子檢視：dispatchDraw(canvas)
繪製滾動條：onDrawScrollBars(canvas)
background 是一個 Drawable 物件，直接繪製在 Canvas 上，並且與元件要繪製的內容互不干擾，很多時候，這個特徵能被某些場景利用，比如後面的“刮刮樂”就是一個很好的範例。
View 只是元件的抽象定義，他自己並不知道自己是什麼樣子，所以，View 定義了一個空方法 onDraw()，原始碼如下：

protected void onDraw(Canvas canvas) {

}

和前面講過的 onMeasure()與 onLayout()一樣，onDraw()方法同樣是預留給子類擴充套件的功能
介面，用於繪製元件自身。元件的外觀由該方法來決定。
dispatchDraw()方法也是一個空方法，原始碼如下：

protected void dispatchDraw(Canvas canvas) {

}

該方法服務於容器元件，容器中的子元件必須通過 dispatchDraw()方法進行繪製，所以，View雖然沒有實現該方法但他的子類 ViewGroup 實現了該方法：

protected void dispatchDraw(Canvas canvas) {
    ……
    final int count = mChildrenCount;
    final View[] children = mChildren;
        for (int i = 0; i < count; i++) {
            final View child = children[i];
            if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE
                || child.getAnimation() != null) {
                    more |= drawChild(canvas, child, drawingTime);
                }
        }
    ……
}

在 dispatchDraw()方法中，迴圈遍歷每一個子元件，並呼叫 drawChild()方法繪製子元件，而子元件又呼叫 View 的 draw()方法繪製自己：

protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
    return child.draw(canvas, this, drawingTime);
}

元件的繪製也是一個遞迴的過程，說到底 Activity 的 UI 介面的根一定是容器，根容器繪製
結束後開始繪製子元件，子元件如果是容器繼續往下遞迴繪製，否則將子元件繪製出來……直所有的元件正確繪製為止。
總體來說，UI 介面的繪製從開始到結束要經歷幾個過程：
測量大小，回撥 onMeasure()方法
元件定位，回撥 onLayout()方法
元件繪製，回撥 onDraw()方法
概括描述元件的繪製過程就是，首先通過PerformMeasure方法測量元件的大小，接PerformLayout來定位元件的位置，最後呼叫PerformDraw方法來繪製元件。

謝謝認真觀讀本文的每一位小夥伴，衷心歡迎小夥伴給我指出文中的錯誤，也歡迎小夥伴與我交流學習。
歡迎愛學習的小夥伴加群一起進步：230274309

相關推薦

自定義元件開發一 View 的繪製流程

Activity 的組成結構 Activity對於安卓開發來說，是熟悉的不能再熟悉的，它是安卓四大元件之一，用來做介面顯示用的，那麼我相信，並不是所有的朋友都對Activity的組成結構有清晰的認識，這裡簡單聊聊Activity的組成。 實際介面展示的是Activity中的Wind

自定義元件開發三 Graphics 繪製動態效果

概述 上文https://blog.csdn.net/u011733020/article/details/80220513主要介紹了Graphics相關的api的繪圖方法。繪製的都是靜態的，這裡使用Graphics 來實現動態效果繪圖，來達到讓畫面動起來，或者讓圖案與我們的手指互動

008-Ambari二次開發之新增自定義元件Redis(一)

Ambari目前支援的元件有HDFS、YARN、HBase、Hive、Pig、ZooKeeper、Sqoop、Storm、Flume、Tez、Oozie、Falcon、Storm、Altas、Knox、Spark、Ranger、Mahout、Kerberos等，已經涵蓋了從大資料應用的

自定義元件開發九 側邊欄

概述 側邊欄是一種常見的 UI 結構，使用者使用手指左滑或者右滑，可以像抽屜一樣拉出隱藏在屏 幕邊界之外的內容，既能增加 App 的 UI 的內容，又能給使用者帶來更新鮮的使用者體驗，網易新聞、QQ（如圖所示）等主流 App 都有類似的設計。 側邊欄和上一章節講的觸控滑屏有

自定義元件開發八 Scroller與平滑滾動

概述 Scroller 譯為“滾動器”，是 ViewGroup 類中原生支援的一個功能。我們經常有這樣的體驗：開啟聯絡人，手指向上滑動，聯絡人列表也會跟著一起滑動，但是，當我們鬆手之後，滑動並不會因此而停止，而是伴隨著一段慣性繼續滑動，最後才慢慢停止。這樣的使用者體驗完全照顧了人的習

自定義元件開發七 自定義容器

概述 自定義容器本質上也是一個元件，常見的 LinearLayout、FrameLayout、GridLayout、ScrollView和 RelativeLayout 等等元件都是容器，容器除了有自己的外觀，還能用來容納各種元件，以一種特定的規則規定元件應該在什麼位置、顯示多大。

自定義元件開發六 自定義元件

概述 Android SDK 為我們提供了一套完整的元件庫，數量多、功能強，涉及到方方面面，但是，我們依然看到軟體市場上的每個 App 都有自己獨特的東西，絕不是千遍一律的，而且也會和 IOS相互借鑑，這就需要我們對元件進行定製，實現自己獨樹一幟的使用者體驗和介面風格。自定義元件到底

自定義元件開發五 陰影、 漸變和點陣圖運算

介紹陰影、漸變和點陣圖運算等技術 陰影只是一個狹義的說法，實際上也包括髮光等效果；Android 也提供了強大的漸變功能，漸變能為物體帶來更真實的質感，比如可以用漸變繪製一顆五子棋或一根金屬圓棒；點陣圖運算就更有趣了，Android 為 Bitmap 的運算提供了多達16 種運算方法，

自定義元件開發四 雙快取技術

雙快取 為什麼叫“雙快取”？說白了就是有兩個繪圖區，一個是 Bitmap 的 Canvas，另一個就是當前View 的 Canvas。先將圖形繪製在 Bitmap 上，然後再將 Bitmap 繪製在 View 上，也就是說，我們在 View 上看到的效果其實就是 Bitmap 上的內容

自定義元件開發二 Graphics API

Graphics是Android SDK 中的一個包含一系列繪圖相關的api的包，本文介紹並使用常用的繪圖方法。 Point 類和 和 PointF 我們都知道在座標系中給定x/y兩個座標就可以確定一個點。 Point類就是表示一個點，他有兩個成員變數x、y代表點的 x 座標和

自定義View繪製流程（面試專用）

（自己整理的比較亂，但這麼說沒問題的！） 自定義view是幹嘛的呢？ 當我們不滿足於Android提供的原生控制元件和佈局時，就應該考慮到自定義view。 自定義View分為兩大塊。  自定義控制元件  和  自定義容器 自定義View必須重寫兩個構造方法  第一個

Android:從繪製一張流程圖來體驗View的自定義過程（一）

概述         自定義View向來不是一個輕鬆的話題。雖然對於android原生開發而言，這隻能算是一項基本的技能，但真正當我們拿到一份需要我們自定義去實現的需求的時候，多少還會有點手足無措。具體是什麼原因，我也不知道，也許，“菜，是原罪”。‘’“業精於勤

android-進階（3）-自定義view(2)-Android中View繪製流程以及相關方法的分析

最近正在學自定義view,這篇文章主要講view的繪製流程和一些相關的方法，淺顯易懂，寫的非常好，忍不住就轉載了。             前言： 本文是我讀《Android核心剖析》第13章----View工作原理總結而成的，在此膜拜下作者 。

React-Native開發八 react-navigation之自定義元件Counter

1 前言 我們知道RN中任何介面元素都可以看成元件，小到一個按鈕，大到一個頁面。RN開發就是不停的開發元件和使用元件，並讓他們協同工作，這樣高效率協同的執行起來，這樣就能完成一個APP的功能了 在實際的開發中，我們經常需要自定義一些滿足我們專案開發的自定義元件，類似於Android

009-Ambari二次開發之新增自定義元件Redis(二)

上一篇我們主要介紹了Ambari新增元件的答題流程並以REDIS為例說明了流程，本篇在上一篇的基礎上，進一步完善說明流程並介紹如何給元件新增metric 掃描二維碼，關注BearData，獲取最新文章 上篇中，我們已經制作出了redis的rpm包，並重新編譯了我們修改後的Ambar

微信小程式自定義元件(一)

好吧，突然發現學不完了，一下子，那就分開吧，由於時間太久，直接重新大致複習了一下 微信小程式自定義元件微信小程式支援自定義元件下方的目錄其中，components為元件目錄，nodemodules為模組目錄，pages為小程式的頁面目錄，utils為一些基礎功能的封

關於父子元件，router-view和自定義元件名。

        做了這麼多路由跳轉了，但是今天下午突發奇想，寫一個父子元件以及自定義元件跳轉的小例子。我理解的，當需要點選按鈕路由跳轉的時候，用router-view，當作為預設子元件，只是顯示的時候用自定義元件名。專案地址：https://github.com/nihaoh

Android開發——View繪製流程

網上講解View的繪製流程有很多優秀的文章。主要分為三個步驟：分別是measure、layout和draw。measure根據父佈局的尺寸以及自己想要的尺寸得到最終自己的尺寸，layout用於確定子View的位置，draw負責繪製自己。View分為View和Vi

Ecshop二次開發：如何建立一個自定義頁面（一）

今天自己本機用wampserver搭建了一個環境，然後下載了Ecshop官方（UTF-8）最新版本，然後進行熟悉。 進入後臺簡單的操作了一下，想自己寫一個php頁面，並在模版中調用出來值。 第一步：在根目錄新建了一個test.php頁面。並寫上如下程式碼： 不過百度了一下

Android開發:建立自定義檢視–建立一個View類

翻自：http://developer.android.com/training/custom-views/create-view.html 設計良好的定製檢視與其他精心設計的類相似。它用一種易於使用的介面封裝了一些特殊的方法集合,它高效使用記憶體和CPU等等。除了良好的設計以外，一個定製檢視應該： 符合