2.7 网格布局
<p>SkinGridLayout表示网格布局。</p>
<p>网格布局会将容器分为 m 行 n 列。m、n由属性【ColumnCount】决定。例如：</p>
<ul>
<li>设置网格布局为 5 列，有以下两种方法：
设置XML属性
<pre><code class="language-xml">ColumnCount=&quot;5&quot;</code></pre>
<p>调用C++方法</p>
<pre><code class="language-c">pView-&gt;SetColumnCount(5);</code></pre></li>
</ul>
<p>至于行数，则由子组件的个数决定。</p>
<p>网格布局会将容器里面的组件一个挨着一个地按 m 行 n 列排列起来。</p>
<p>例如：网格布局为 5 列，子组件个数为 10 个，则为 2 行；网格布局为 5 列，子组件个数为 13 个，则为 3 行。</p>
<p>网格布局容器的子组件的大小跟网格大小保持一致。也就是说，子组件宽度为父组件宽度/列数，子组件高度为父组件高度/行数。</p>
<h2>请看下面的示例</h2>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/2/7/1.png" alt="网格布局" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Icon=&quot;128&quot; Caption=&quot;IDS_LAYOUT_SHOW7&quot; Animation=&quot;SizeChange&quot;&gt;
&lt;SkinGridLayout Id=&quot;1000&quot; AlignParentLeft=&quot;15&quot; AlignParentTop=&quot;45&quot; AlignParentRight=&quot;15&quot; AlignParentBottom=&quot;15&quot; ColumnCount=&quot;3&quot;&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_RED&quot;&gt;
&lt;SkinTextView Text=&quot;1&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_GREEN&quot;&gt;
&lt;SkinTextView Text=&quot;2&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_BLUE&quot;&gt;
&lt;SkinTextView Text=&quot;3&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_BLUE&quot;&gt;
&lt;SkinTextView Text=&quot;4&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_BLACK&quot;&gt;
&lt;SkinTextView Text=&quot;5&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_RED&quot;&gt;
&lt;SkinTextView Text=&quot;6&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_RED&quot;&gt;
&lt;SkinTextView Text=&quot;7&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_GREEN&quot;&gt;
&lt;SkinTextView Text=&quot;8&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_BLUE&quot;&gt;
&lt;SkinTextView Text=&quot;9&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_BLUE&quot;&gt;
&lt;SkinTextView Text=&quot;10&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_BLACK&quot;&gt;
&lt;SkinTextView Text=&quot;11&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout BkgColor=&quot;ID_COLOR_RED&quot;&gt;
&lt;SkinTextView Text=&quot;12&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;/SkinGridLayout&gt;
&lt;/SkinDialog&gt;</code></pre>
<p>上面的布局，九个色块分别占据一个单元格。</p>