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