Fragment onCreateView inflate注意事项

用Fragment很久了，今天忽然发现自己写的东西，明明子Fragment是全屏，但是宽度只有那么一点点。其实这个问题的本质是inflate的方法的使用，之前也研究过但么有留下记录，在fragment使用上又暴漏出来了。直觉告诉我一定是哪块出问题了，很快锁定到onCreateView上。 
在onCreateView里我们一般有两种写法，方法1：

<code class="hljs java has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">        <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> View <span class="hljs-title" style="box-sizing: border-box;">onCreateView</span>(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// TODO Auto-generated method stub</span>        View root = inflater.inflate(layoutId(), container, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> root;    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

方法2

<code class="hljs java has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> View <span class="hljs-title" style="box-sizing: border-box;">onCreateView</span>(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// TODO Auto-generated method stub</span>        View root = inflater.inflate(layoutId(), <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> root;    }   </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

这两种都可以，但是如果采用第二种，就不会继承到母布局的参数信息。来看下文档：

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    /**     * Inflate a new view hierarchy <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">from</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> specified xml resource. Throws     * {@link InflateException} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> there <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> an <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">error</span>.     *      * @param resource ID <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> an XML layout resource <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span> load (e.g.,     *        <code>R.layout.main_page</code>)     * @param root Optional view <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span> be <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> parent <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> generated hierarchy.     * @<span class="hljs-constant" style="box-sizing: border-box;">return</span> The root View <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> inflated hierarchy. If root was supplied,     *         this <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> root View; otherwise <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">it</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> root <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> inflated     *         XML <span class="hljs-type" style="box-sizing: border-box;">file</span>.     */    public View inflate(int resource, ViewGroup root) {<span class="hljs-command" style="box-sizing: border-box;">        return</span> inflate(resource, root, root != null);    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    /**     * Inflate a new view hierarchy <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">from</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> specified xml resource. Throws     * {@link InflateException} <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> there <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> an <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">error</span>.     *      * @param resource ID <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> an XML layout resource <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span> load (e.g.,     *        <code>R.layout.main_page</code>)     * @param root Optional view <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span> be <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> parent <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> generated hierarchy (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>     *        <em>attachToRoot</em> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> <span class="hljs-constant" style="box-sizing: border-box;">true</span>), <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">or</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> simply an object <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">that</span>     *        provides a <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> LayoutParams values <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> root <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> returned     *        hierarchy (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> <em>attachToRoot</em> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> <span class="hljs-constant" style="box-sizing: border-box;">false</span>.)     * @param attachToRoot Whether <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> inflated hierarchy should be attached <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span>     *        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> root parameter? If <span class="hljs-constant" style="box-sizing: border-box;">false</span>, root <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> only used <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">to</span> create <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span>     *        correct subclass <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> LayoutParams <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> root view <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> XML.     * @<span class="hljs-constant" style="box-sizing: border-box;">return</span> The root View <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> inflated hierarchy. If root was supplied <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">and</span>     *         attachToRoot <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> <span class="hljs-constant" style="box-sizing: border-box;">true</span>, this <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> root; otherwise <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">it</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">is</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> root <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span>     *         <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">the</span> inflated XML <span class="hljs-type" style="box-sizing: border-box;">file</span>.     */    public View inflate(int resource, ViewGroup root, <span class="hljs-type" style="box-sizing: border-box;">boolean</span> attachToRoot) {        final Resources res = getContext().getResources();        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (DEBUG) {            Log.d(TAG, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"INFLATING from resource: \""</span> + res.getResourceName(resource) + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"\" ("</span>                    + Integer.toHexString(resource) + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">")"</span>);        }        final XmlResourceParser parser = res.getLayout(resource);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">try</span> {<span class="hljs-command" style="box-sizing: border-box;">            return</span> inflate(parser, root, attachToRoot);        } finally {            parser.close();        }    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li></ul>

方法2最终调用了方法1，即inflate(int resource, ViewGroup root, boolean attachToRoot)，所以直接看方法1.如果root不为空，attachToRoot为false的情况下，文档说的很明白：If false, root is only used to create the correct subclass of LayoutParams for the root view in the XML，即root只用来创建母布局的参数信息。而为true，则添加到母布局。因为我们控制fragment时要手动add，所以此处attachToRoot一定是false。

再反过来看，如果用了方法2，root一定要传null，此时子view不会得到母view的布局信息，子view里一堆的match_parent也就毫无用途。

总结：90%的情况下，我们使用fragment此处一定要用方法1. 有一种情况，如创建dialog fragment时，不需要得到母布局参数信息可以用方法2.

补充：上文代码里的layoutId（）是个虚函数，用来在子类里实现。子类只需return R.layout.*就可以了，不必每个fragment都重写onCreateView了。在onViewCreated里根据传来的参数root去实例化各个控件。