Android LayoutInflater原理分析(一)

加載布局任務(wù)通常Activity中調(diào)用setContentView()方法來完成的,setContentView()方法內(nèi)部使用LayoutInflater加載布局,我們來看看LayoutInflater的基本用法吧,它的用戶非常簡單

首先需要獲取到LayoutInflater的實(shí)例

LayoutInflater layoutInflater = LayoutInflater.from(context);



當(dāng)然,還有另外一種寫法也可以完成同樣的效果:

LayoutInflater layoutInflater = (LayoutInflater) context
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

其實(shí)第一種就是第二種的簡單寫法,只是Android給我們做了一下封裝而已。得到了LayoutInflater的實(shí)例之后就可以調(diào)用它的inflate()方法來加載布局了,如下所示:

layoutInflater.inflate(resourceId, root);

第一個(gè)參數(shù)加載的布局id,第二個(gè)參數(shù)給該布局的外部再嵌套一層父布局,如果不需要就直接傳null。這樣就成功創(chuàng)建了一個(gè)布局的實(shí)例,之后再將它添加到指定的位置就可以顯示出來了。

下面我們就通過一個(gè)非常簡單的小例子,來更加直觀地看一下LayoutInflater的用法。比如說當(dāng)前有一個(gè)項(xiàng)目,其中MainActivity對應(yīng)的布局文件叫做activity_main.xml,代碼如下所示:

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

</LinearLayout>

這個(gè)布局文件的內(nèi)容非常簡單,只有一個(gè)空的LinearLayout,里面什么控件都沒有,因此界面上應(yīng)該不會(huì)顯示任何東西。

那么接下來我們再定義一個(gè)布局文件,給它取名為button_layout.xml,代碼如下所示:

<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" >
 
</Button>

這個(gè)布局文件也非常簡單,只有一個(gè)Button按鈕而已?,F(xiàn)在我們要想辦法,如何通過LayoutInflater來將button_layout這個(gè)布局添加到主布局文件的LinearLayout中。根據(jù)剛剛介紹的用法,修改MainActivity中的代碼,如下所示:

public class MainActivity extends Activity {
 
    private LinearLayout mainLayout;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mainLayout = (LinearLayout) findViewById(R.id.main_layout);
        LayoutInflater layoutInflater = LayoutInflater.from(this);
        View buttonLayout = layoutInflater.inflate(R.layout.button_layout, null);
        mainLayout.addView(buttonLayout);
    }
 
}

可以看到,這里先是獲取到了LayoutInflater的實(shí)例,然后調(diào)用它的inflate()方法來加載button_layout這個(gè)布局,最后調(diào)用LinearLayout的addView()方法將它添加到LinearLayout中。

現(xiàn)在可以運(yùn)行一下程序,結(jié)果如下圖所示:


HUAWEI-JKM-AL00b-2019-12-26-14-24-14.jpg

我們借助LayoutInflater將button_layout這個(gè)布局添加到LinearLayout中了。LayoutInflater技術(shù)廣泛應(yīng)用于需要?jiǎng)討B(tài)添加View的時(shí)候,比如在ScrollView和ListView中,經(jīng)常都可以看到LayoutInflater的身影。

當(dāng)然,僅僅只是介紹了如何使用LayoutInflater顯然是遠(yuǎn)遠(yuǎn)無法滿足大家的求知欲的,知其然也要知其所以然,接下來我們就從源碼的角度上看一看LayoutInflater到底是如何工作的。

不管你是使用的哪個(gè)inflate()方法的重載,最終都會(huì)輾轉(zhuǎn)調(diào)用到LayoutInflater的如下代碼中:

public View inflate(XmlPullParser parser, ViewGroup root, boolean attachToRoot) {
    synchronized (mConstructorArgs) {
        final AttributeSet attrs = Xml.asAttributeSet(parser);
        mConstructorArgs[0] = mContext;
        View result = root;
        try {
            int type;
            while ((type = parser.next()) != XmlPullParser.START_TAG &&
                    type != XmlPullParser.END_DOCUMENT) {
            }
            if (type != XmlPullParser.START_TAG) {
                throw new InflateException(parser.getPositionDescription()
                        + ": No start tag found!");
            }
            final String name = parser.getName();
            if (TAG_MERGE.equals(name)) {
                if (root == null || !attachToRoot) {
                    throw new InflateException("merge can be used only with a valid "
                            + "ViewGroup root and attachToRoot=true");
                }
                rInflate(parser, root, attrs);
            } else {
                View temp = createViewFromTag(name, attrs);
                ViewGroup.LayoutParams params = null;
                if (root != null) {
                    params = root.generateLayoutParams(attrs);
                    if (!attachToRoot) {
                        temp.setLayoutParams(params);
                    }
                }
                rInflate(parser, temp, attrs);
                if (root != null && attachToRoot) {
                    root.addView(temp, params);
                }
                if (root == null || !attachToRoot) {
                    result = temp;
                }
            }
        } catch (XmlPullParserException e) {
            InflateException ex = new InflateException(e.getMessage());
            ex.initCause(e);
            throw ex;
        } catch (IOException e) {
            InflateException ex = new InflateException(
                    parser.getPositionDescription()
                    + ": " + e.getMessage());
            ex.initCause(e);
            throw ex;
        }
        return result;
    }
}

從這里我們就可以清楚地看出,LayoutInflater其實(shí)就是使用Android提供的pull解析方式來解析布局文件的。不熟悉pull解析方式的朋友可以網(wǎng)上搜一下,教程很多,我就不細(xì)講了,這里我們注意看下第23行,調(diào)用了createViewFromTag()這個(gè)方法,并把節(jié)點(diǎn)名和參數(shù)傳了進(jìn)去??吹竭@個(gè)方法名,我們就應(yīng)該能猜到,它是用于根據(jù)節(jié)點(diǎn)名來創(chuàng)建View對象的。確實(shí)如此,在createViewFromTag()方法的內(nèi)部又會(huì)去調(diào)用createView()方法,然后使用反射的方式創(chuàng)建出View的實(shí)例并返回。

當(dāng)然,這里只是創(chuàng)建出了一個(gè)根布局的實(shí)例而已,接下來會(huì)在第31行調(diào)用rInflate()方法來循環(huán)遍歷這個(gè)根布局下的子元素,代碼如下所示:

private void rInflate(XmlPullParser parser, View parent, final AttributeSet attrs)
        throws XmlPullParserException, IOException {
    final int depth = parser.getDepth();
    int type;
    while (((type = parser.next()) != XmlPullParser.END_TAG ||
            parser.getDepth() > depth) && type != XmlPullParser.END_DOCUMENT) {
        if (type != XmlPullParser.START_TAG) {
            continue;
        }
        final String name = parser.getName();
        if (TAG_REQUEST_FOCUS.equals(name)) {
            parseRequestFocus(parser, parent);
        } else if (TAG_INCLUDE.equals(name)) {
            if (parser.getDepth() == 0) {
                throw new InflateException("<include /> cannot be the root element");
            }
            parseInclude(parser, parent, attrs);
        } else if (TAG_MERGE.equals(name)) {
            throw new InflateException("<merge /> must be the root element");
        } else {
            final View view = createViewFromTag(name, attrs);
            final ViewGroup viewGroup = (ViewGroup) parent;
            final ViewGroup.LayoutParams params = viewGroup.generateLayoutParams(attrs);
            rInflate(parser, view, attrs);
            viewGroup.addView(view, params);
        }
    }
    parent.onFinishInflate();
}

當(dāng)然,這里只是創(chuàng)建出了一個(gè)根布局的實(shí)例而已,接下來會(huì)在第31行調(diào)用rInflate()方法來循環(huán)遍歷這個(gè)根布局下的子元素,代碼如下所示:

private void rInflate(XmlPullParser parser, View parent, final AttributeSet attrs)
        throws XmlPullParserException, IOException {
    final int depth = parser.getDepth();
    int type;
    while (((type = parser.next()) != XmlPullParser.END_TAG ||
            parser.getDepth() > depth) && type != XmlPullParser.END_DOCUMENT) {
        if (type != XmlPullParser.START_TAG) {
            continue;
        }
        final String name = parser.getName();
        if (TAG_REQUEST_FOCUS.equals(name)) {
            parseRequestFocus(parser, parent);
        } else if (TAG_INCLUDE.equals(name)) {
            if (parser.getDepth() == 0) {
                throw new InflateException("<include /> cannot be the root element");
            }
            parseInclude(parser, parent, attrs);
        } else if (TAG_MERGE.equals(name)) {
            throw new InflateException("<merge /> must be the root element");
        } else {
            final View view = createViewFromTag(name, attrs);
            final ViewGroup viewGroup = (ViewGroup) parent;
            final ViewGroup.LayoutParams params = viewGroup.generateLayoutParams(attrs);
            rInflate(parser, view, attrs);
            viewGroup.addView(view, params);
        }
    }
    parent.onFinishInflate();
}

可以看到,在第21行同樣是createViewFromTag()方法來創(chuàng)建View的實(shí)例,然后還會(huì)在第24行遞歸調(diào)用rInflate()方法來查找這個(gè)View下的子元素,每次遞歸完成后則將這個(gè)View添加到父布局當(dāng)中。

這樣的話,把整個(gè)布局文件都解析完成后就形成了一個(gè)完整的DOM結(jié)構(gòu),最終會(huì)把最頂層的根布局返回,至此inflate()過程全部結(jié)束。

比較細(xì)心的朋友也許會(huì)注意到,inflate()方法還有個(gè)接收三個(gè)參數(shù)的方法重載,結(jié)構(gòu)如下:

inflate(int resource, ViewGroup root, boolean attachToRoot)
那么這第三個(gè)參數(shù)attachToRoot又是什么意思呢?其實(shí)如果你仔細(xì)去閱讀上面的源碼應(yīng)該可以自己分析出答案,這里我先將結(jié)論說一下吧,感興趣的朋友可以再閱讀一下源碼,校驗(yàn)我的結(jié)論是否正確。

  1. 如果root為null,attachToRoot將失去作用,設(shè)置任何值都沒有意義。

  2. 如果root不為null,attachToRoot設(shè)為true,則會(huì)給加載的布局文件的指定一個(gè)父布局,即root。

  3. 如果root不為null,attachToRoot設(shè)為false,則會(huì)將布局文件最外層的所有l(wèi)ayout屬性進(jìn)行設(shè)置,當(dāng)該view被添加到父view當(dāng)中時(shí),這些layout屬性會(huì)自動(dòng)生效。

  4. 在不設(shè)置attachToRoot參數(shù)的情況下,如果root不為null,attachToRoot參數(shù)默認(rèn)為true。

好了,現(xiàn)在對LayoutInflater的工作原理和流程也搞清楚了,你該滿足了吧。額。。。。還嫌這個(gè)例子中的按鈕看起來有點(diǎn)小,想要調(diào)大一些?那簡單的呀,修改button_layout.xml中的代碼,如下所示:

<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="80dp"
    android:text="Button" >
 
</Button>

這里我們將按鈕的寬度改成300dp,高度改成80dp,這樣夠大了吧?現(xiàn)在重新運(yùn)行一下程序來觀察效果。咦?怎么按鈕還是原來的大小,沒有任何變化!是不是按鈕仍然不夠大,再改大一點(diǎn)呢?還是沒有用!

其實(shí)這里不管你將Button的layout_width和layout_height的值修改成多少,都不會(huì)有任何效果的,因?yàn)檫@兩個(gè)值現(xiàn)在已經(jīng)完全失去了作用。平時(shí)我們經(jīng)常使用layout_width和layout_height來設(shè)置View的大小,并且一直都能正常工作,就好像這兩個(gè)屬性確實(shí)是用于設(shè)置View的大小的。而實(shí)際上則不然,它們其實(shí)是用于設(shè)置View在布局中的大小的,也就是說,首先View必須存在于一個(gè)布局中,之后如果將layout_width設(shè)置成match_parent表示讓View的寬度填充滿布局,如果設(shè)置成wrap_content表示讓View的寬度剛好可以包含其內(nèi)容,如果設(shè)置成具體的數(shù)值則View的寬度會(huì)變成相應(yīng)的數(shù)值。這也是為什么這兩個(gè)屬性叫作layout_width和layout_height,而不是width和height。

再來看一下我們的button_layout.xml吧,很明顯Button這個(gè)控件目前不存在于任何布局當(dāng)中,所以layout_width和layout_height這兩個(gè)屬性理所當(dāng)然沒有任何作用。那么怎樣修改才能讓按鈕的大小改變呢?解決方法其實(shí)有很多種,最簡單的方式就是在Button的外面再嵌套一層布局,如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <Button
        android:layout_width="300dp"
        android:layout_height="80dp"
        android:text="Button" >
    </Button>
 
</RelativeLayout>

可以看到,這里我們又加入了一個(gè)RelativeLayout,此時(shí)的Button存在與RelativeLayout之中,layout_width和layout_height屬性也就有作用了。當(dāng)然,處于最外層的RelativeLayout,它的layout_width和layout_height則會(huì)失去作用?,F(xiàn)在重新運(yùn)行一下程序,結(jié)果如下圖所示:


image.png

OK!按鈕的終于可以變大了,這下總算是滿足大家的要求了吧。

看到這里,也許有些朋友心中會(huì)有一個(gè)巨大的疑惑。不對呀!平時(shí)在Activity中指定布局文件的時(shí)候,最外層的那個(gè)布局是可以指定大小的呀,layout_width和layout_height都是有作用的。確實(shí),這主要是因?yàn)?,在setContentView()方法中,Android會(huì)自動(dòng)在布局文件的最外層再嵌套一個(gè)FrameLayout,所以layout_width和layout_height屬性才會(huì)有效果。那么我們來證實(shí)一下吧,修改MainActivity中的代碼,如下所示:

public class MainActivity extends Activity {
 
    private LinearLayout mainLayout;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mainLayout = (LinearLayout) findViewById(R.id.main_layout);
        ViewParent viewParent = mainLayout.getParent();
        Log.d("TAG", "the parent of mainLayout is " + viewParent);
    }
 
}

可以看到,這里通過findViewById()方法,拿到了activity_main布局中最外層的LinearLayout對象,然后調(diào)用它的getParent()方法獲取它的父布局,再通過Log打印出來?,F(xiàn)在重新運(yùn)行一下程序,結(jié)果如下圖所示:

the parent of mainLayout is androidx.appcompat.widget.ContentFrameLayout{ android:id/content}

非常正確!LinearLayout的父布局確實(shí)是一個(gè)ContentFrameLayout,而這個(gè)FrameLayout就是由系統(tǒng)自動(dòng)幫我們添加上的。而內(nèi)容布局就是一個(gè)ContentFrameLayout,這個(gè)布局的id叫作content,我們調(diào)用setContentView()方法時(shí)所傳入的布局其實(shí)就是放到這個(gè)ContentFrameLayout中的,這也是為什么這個(gè)方法名叫作setContentView(),而不是叫setView()。

好了,今天就講到這里了,支持的、吐槽的、有疑問的、以及打醬油的路過朋友盡管留言吧 嘿嘿 感興趣的朋友可以繼續(xù)閱讀 Android視圖繪制流程完全解析,帶你一步步深入了解View(二)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容