2.3 水平比例布局
<p>SkinHorzPercentLayout表示水平比例布局。</p>
<p>水平比例布局和水平布局类似，也会将容器里面的组件一个挨着一个地水平排列起来。</p>
<p>子组件的布局高度设置为跟父组件高度相同， 子组件的宽度由子组件的布局宽度决定，此处的布局宽度表示占父组件宽度的百分比，最后一个子组件的宽度为剩余的宽度。</p>
<h2>请看下面的示例</h2>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/2/3/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_SHOW3&quot; Animation=&quot;SizeChange&quot;&gt;
&lt;SkinHorzPercentLayout AlignParentLeft=&quot;15&quot; AlignParentRight=&quot;15&quot; LayoutHeight=&quot;100&quot; AlignParentVerticalCenter=&quot;0&quot;&gt;
&lt;SkinRelativeLayout LayoutWidth=&quot;20&quot; LayoutHeight=&quot;100&quot; BkgColor=&quot;ID_COLOR_RED&quot;&gt;
&lt;SkinTextView Text=&quot;20%&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;30&quot; LayoutHeight=&quot;100&quot; BkgColor=&quot;ID_COLOR_GREEN&quot;&gt;
&lt;SkinTextView Text=&quot;30%&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;50&quot; LayoutHeight=&quot;100&quot; BkgColor=&quot;ID_COLOR_BLUE&quot;&gt;
&lt;SkinTextView Text=&quot;50%&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;/SkinHorzPercentLayout&gt;
&lt;/SkinDialog&gt;</code></pre>
<p>上面的布局，色块一个挨着一个地水平排列。</p>
<p>第一个色块的宽度占父组件宽度的20%，第二个色块的宽度占父组件宽度的30%，第三个色块的宽度占父组件宽度的50%。</p>