2.2 水平布局
<p>SkinHorizontalLayout表示水平布局。</p>
<p>水平布局会将容器里面的组件一个挨着一个地水平排列起来。</p>
<p>水平布局不会换行，当组件一个挨一个地排列到头之后，剩下的组件将不会被显示出来。</p>
<p>因此，水平布局容器的子组件必须能确定自己的布局宽度和布局高度。</p>
<p>通常来说，会将子组件的布局高度设置为跟父组件高度相同，否则需要利用属性【LayoutAlignment】确定组件垂直方向的坐标。</p>
<h2>请看下面的示例</h2>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/2/2/1.png" alt="水平布局" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;400&quot; SysButton=&quot;CLOSE&quot; Icon=&quot;128&quot; Caption=&quot;IDS_LAYOUT_SHOW2&quot; Animation=&quot;SizeChange&quot;&gt;
&lt;SkinHorizontalLayout LayoutWidth=&quot;WrapContent&quot; LayoutHeight=&quot;WrapContent&quot; AlignParentHorizontalCenter=&quot;0&quot; AlignParentVerticalCenter=&quot;0&quot;&gt;
&lt;SkinRelativeLayout LayoutWidth=&quot;50&quot; LayoutHeight=&quot;100&quot; 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 LayoutWidth=&quot;100&quot; LayoutHeight=&quot;100&quot; 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 LayoutWidth=&quot;150&quot; LayoutHeight=&quot;100&quot; 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;/SkinHorizontalLayout&gt;
&lt;/SkinDialog&gt;</code></pre>
<p>上面的布局，色块一个挨着一个地水平排列。</p>
<p>第一个色块的宽度为50像素，第二个色块的宽度的宽度为100像素，第三个色块的宽度的宽度为150像素。</p>