美文网首页
UI绘制流程及原理

UI绘制流程及原理

作者: Gambol_r | 来源:发表于2019-08-26 22:30 被阅读0次

    一丶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中。

    相关文章

      网友评论

          本文标题:UI绘制流程及原理

          本文链接:https://www.haomeiwen.com/subject/irfwjctx.html