UI绘制流程及原理

一丶View是如何被添加到屏幕窗口上的

将大象装进冰箱需要三步,创建自定义View也是分为三部曲。

  • 1 创建顶层的布局容器DecorView
  • 2 在顶层布局中加载基础布局的ViewGroup
  • 3 将ContentView添加到基础布局的FrameLayout中

源码分析,我们这里以Activity为例。
一般开发中,我们给Activity设置布局的入口是setContentView()方法,进入setContentView()方法。

一·找到setContentView的实现

/**
     * 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(@LayoutRes int layoutResID) {
        getWindow().setContentView(layoutResID);
        initWindowDecorActionBar();
    }

这里面我们可以看到,实际调用的是getWindow()的setContenView方法,再来看看getWindow()方法,

 /**
     * Retrieve the current {@link android.view.Window} for the activity.
     * This can be used to directly access parts of the Window API that
     * are not available through Activity/Screen.
     *
     * @return Window The current window, or null if the activity is not
     *         visual.
     */
    public Window getWindow() {
        return mWindow;
    }

返回的是一个Window对象。

/**
 * Abstract base class for a top-level window look and behavior policy.  An
 * instance of this class should be used as the top-level view added to the
 * window manager. It provides standard UI policies such as a background, title
 * area, default key processing, etc.
 *
 * <p>The only existing implementation of this abstract class is
 * android.view.PhoneWindow, which you should instantiate when needing a
 * Window.
 */
public abstract class Window {

这里Window是一个抽象类,从注释中我们可以看出,PhoneWindow是Window的唯一实例。进入PhoneWindow中去查看setContentView()方法。

@Override
    public void setContentView(int layoutResID) {
       ...
        if (mContentParent == null) {
            installDecor();
        } else if (!hasFeature(FEATURE_CONTENT_TRANSITIONS)) {
            mContentParent.removeAllViews();
        }
        if (hasFeature(FEATURE_CONTENT_TRANSITIONS)) {
            final Scene newScene = Scene.getSceneForLayout(mContentParent, layoutResID,
                    getContext());
            transitionTo(newScene);
        } else {
            mLayoutInflater.inflate(layoutResID, mContentParent);
        }
        ...
    }

这个方法里面的主要做了两件事情 installDecor(),mLayoutInflater.inflate(layoutResID, mContentParent)(去解析当前出传入的 布局资源Id),接下来,我们主要去看下 installDecor()方法,是如何加载一个DecorView 。

二.了解installDecor()的加载过程

...
// This is the top-level view of the window, containing the window decor.
    private DecorView mDecor;
...
private void installDecor() {
        mForceDecorInstall = false;
        if (mDecor == null) {
            mDecor = generateDecor(-1);
            mDecor.setDescendantFocusability(ViewGroup.FOCUS_AFTER_DESCENDANTS);
            mDecor.setIsRootNamespace(true);
            if (!mInvalidatePanelMenuPosted && mInvalidatePanelMenuFeatures != 0) {
                mDecor.postOnAnimation(mInvalidatePanelMenuRunnable);
            }
        } else {
            mDecor.setWindow(this);
        }
        if (mContentParent == null) {
            mContentParent = generateLayout(mDecor);
            // Set up decor part of UI to ignore fitsSystemWindows if appropriate.
            mDecor.makeOptionalFitsSystemWindows();
          ...
                }
            }
        }
    }

通过installDecor()源码的阅读,主要是做了两件事。

  • 1.generateDecor() 创建一个DecorView;
  • 2.generateLayout() 将layoutResources(基础布局)加载到DecorView。

下面来看一下详细过程:

1.通过generateDecor方法获取DecorView(顶层布局)
protected DecorView generateDecor(int featureId) {
        ...
        return new DecorView(context, featureId, this, getAttributes()); 
}

再看下DecorView的具体实现。

public class DecorView extends FrameLayout implements RootViewSurfaceTaker, WindowCallbacks {

可以看到是DecorView 继承FrameLayout的容器,这就说明generateDecor()是获取一个布局容器。

2.generateLayout()方法是将layoutResource(基础布局)添加到DecorView
protected ViewGroup generateLayout(DecorView decor) {
         // Apply data from current theme. 设置系统主题的不同样式和特性
         TypedArray a = getWindowStyle();
        ...
         if (mIsFloating) {
        ...
          setFlags(FLAG_LAYOUT_IN_SCREEN|FLAG_LAYOUT_INSET_DECOR, flagsToUpdate);
         }
         ...
            if (a.getBoolean(R.styleable.Window_windowNoTitle, false)) {
        ...
            requestFeature(FEATURE_NO_TITLE);
       }
        ...
       // Inflate the window decor. 解析decor
       int layoutResource;     //定义布局的资源变量
        int features = getLocalFeatures();
       ...
      if ((features & (1 << FEATURE_ACTION_MODE_OVERLAY)) != 0) {
        layoutResource = R.layout.screen_simple_overlay_action_mode;
      } else {
      // Embedded, so no decoration is needed.
        layoutResource = R.layout.screen_simple;
      }
      ...
      mDecor.onResourcesLoaded(mLayoutInflater, layoutResource);
      ...
      ViewGroup contentParent = (ViewGroup)findViewById(ID_ANDROID_CONTENT);
      if (contentParent == null) {
        throw new RuntimeException("Window couldn't find content container view");
      }
      ...
      return contentParent;
    } 
1.通过requestFeature()和setFlags()等方法设置系统主题的不同样式和特性。
2.解析窗口View
  • 1 . 根据具体的fetures的不同获取到系统相应的 layoutResources。
  • 2 . 获取完layoutResource 后,通过mDecor.onResourcesLoaded()方法去解析这个 layoutResources 。将解析获得的view加载到DecorView上。
3 . 根据layoutResources (R.layout.screen_simple)上的布局ID:ID_ANDROID_CONTENT 获取到相应的 contentParent(实际上是一个R.layout.screen_simple 上的一个FrameLayout布局)并返回。
步骤一:

1.这里对不同feature和flags就不做深究了。

步骤二:

1 . 先通过fetures获取相应的 layoutResources这里我们假定根据某些特性条件下获取到的是 layoutResource = R.layout.screen_simple;
2 . 执行onResourcesLoaded()方法,解析 layoutResources,加载到 DecorView上

先查看源码 onResourcesLoaded()源码

 void onResourcesLoaded(LayoutInflater inflater, int layoutResource) {
       ...
        final View root = inflater.inflate(layoutResource, null);
       ...
            // Put it below the color views.
            addView(root, 0, new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT));
        }
        ...
    }

在onResourcesLoaded 方法中,他通过解析 layoutResource 创建了一个root对象。 该root对象例如为: R.layout.screen_simple(系统的xml)。通过addView方法将 root 对象加载到DecorView上。

步骤三:

在onResourcesLoaded方法执行完毕后,回到 generateLayout()方法中接下来我们会获取到ViewGroup的对象 contentParent。那么这个contentParent是什么?

ViewGroup contentParent = (ViewGroup)findViewById(ID_ANDROID_CONTENT);
        if (contentParent == null) {
            throw new RuntimeException("Window couldn't find content container view");
        }

首先通过查看ID_ANDROID_CONTENT 的注释, 我们可以看到这是系统主布局(我们这里假定获取的是R.layout.screen_simple)一定所具有的ID 。com.android.internal.R.id.content。

 /**
     * The ID that the main layout in the XML layout file should have.
     */
    public static final int ID_ANDROID_CONTENT = com.android.internal.R.id.content;

我们查看screen_simple.xml,发现获取到这个contentParent ,实际上是 screen_simple.xml 上的FrameLayout 。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <ViewStub android:id="@+id/action_mode_bar_stub"
              android:inflatedId="@+id/action_mode_bar"
              android:layout="@layout/action_mode_bar"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:theme="?attr/actionBarTheme" />
    <FrameLayout
         android:id="@android:id/content"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:foregroundInsidePadding="false"
         android:foregroundGravity="fill_horizontal|top"
         android:foreground="?android:attr/windowContentOverlay" />
</LinearLayout>

获取contentParent 并返回后,generateLayout()方法也就执行完毕。我们回到installDecor()方法中。
就此installDecor()的主要方法执行完毕。 以上我们可以理解是在这个过程是获取到DecorView,然后将根据不同特性获取到的系统的layoutResources加载到DecorView上。最后我们再根据ID_ANDROID_CONTENT 从layoutResources获取到contentParent 。它实际上是一个FrameLayout。

三.加载setContentView中设置的布局

1.将setContentView中设置的布局加载到contentParent上
@Override
    public void setContentView(int layoutResID) {
       ...
        if (mContentParent == null) {
            installDecor();
        } else if (!hasFeature(FEATURE_CONTENT_TRANSITIONS)) {
            mContentParent.removeAllViews();
        }
        if (hasFeature(FEATURE_CONTENT_TRANSITIONS)) {
            final Scene newScene = Scene.getSceneForLayout(mContentParent, layoutResID,
                    getContext());
            transitionTo(newScene);
        } else {
            mLayoutInflater.inflate(layoutResID, mContentParent);
        }
        ...
    }

最后通过:
mLayoutInflater.inflate(layoutResID, mContentParent);
将在activity上设置的布局 layoutResID 加载到 contentParent上 也就是 FrameLayout上。至此,我们的整个View就加载并显示到屏幕上了。


image.png

总结:

view是如何被添加到屏幕窗口上的?
1.首先系统会创建一个顶层布局容器DecorView。DecorView 是一个ViewGroup容器, 继承FrameLayout,是PhoneWindow对象持有的一个实例,他是所有应用程序的顶层View,在系统内部进行初始化。当DecorView 初始化完成后,系统会根据应用程序的顶层特性会加载一个基础容器,例如no_actionBar等,不同的主题加载的基础容器也不一样,但是无论什么样的的基础容器一定会有一个 android.R.di.content 的FrameLayout。开发者通过setContView设置的xml ,通过解析后就加载到了这个FrameLayout中。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容