SkinUI入门教程

SkinUI入门教程


2.1 帧布局

<p>SkinFrameLayout表示帧布局,通常和Tab控件配合使用。</p> <p>帧布局子组件的大小跟父组件保持一致。</p> <h2>请看下面的示例</h2> <h4>效果图</h4> <p><img src="http://www.skinui.cn/doc/img/2/1/1.png" alt="帧布局1" /></p> <p><img src="http://www.skinui.cn/doc/img/2/1/2.png" alt="帧布局2" /></p> <h4>布局文件</h4> <pre><code class="language-xml">&amp;lt;SkinDialog DefaultWidth=&amp;quot;400&amp;quot; DefaultHeight=&amp;quot;300&amp;quot; SysButton=&amp;quot;CLOSE&amp;quot; Icon=&amp;quot;128&amp;quot; Caption=&amp;quot;IDS_LAYOUT_SHOW1&amp;quot; Animation=&amp;quot;SizeChange&amp;quot; ThemeHeight=&amp;quot;65&amp;quot;&amp;gt; &amp;lt;SkinRadioGroup Id=&amp;quot;100&amp;quot; LayoutWidth=&amp;quot;210&amp;quot; LayoutHeight=&amp;quot;30&amp;quot; AlignParentLeft=&amp;quot;0&amp;quot; AlignParentTop=&amp;quot;35&amp;quot;&amp;gt; &amp;lt;SkinRadioButton Id=&amp;quot;101&amp;quot; LayoutWidth=&amp;quot;100&amp;quot; LayoutHeight=&amp;quot;FillParent&amp;quot; ChildText1=&amp;quot;TabFrame1&amp;quot; Image=&amp;quot;TabButton.png&amp;quot; Layout=&amp;quot;TabButton.xml&amp;quot; BindView=&amp;quot;1100&amp;quot; AlignParentLeft=&amp;quot;0&amp;quot; Checked=&amp;quot;true&amp;quot;/&amp;gt; &amp;lt;SkinRadioButton Id=&amp;quot;102&amp;quot; LayoutWidth=&amp;quot;100&amp;quot; LayoutHeight=&amp;quot;FillParent&amp;quot; ChildText1=&amp;quot;TabFrame2&amp;quot; Image=&amp;quot;TabButton.png&amp;quot; Layout=&amp;quot;TabButton.xml&amp;quot; BindView=&amp;quot;1200&amp;quot; AlignParentLeft=&amp;quot;100&amp;quot; Radius=&amp;quot;5&amp;quot;/&amp;gt; &amp;lt;/SkinRadioGroup&amp;gt; &amp;lt;SkinRelativeLayout AlignParentLeft=&amp;quot;10&amp;quot; AlignParentTop=&amp;quot;80&amp;quot; AlignParentRight=&amp;quot;10&amp;quot; AlignParentBottom=&amp;quot;10&amp;quot;&amp;gt; &amp;lt;SkinFrameLayout Id=&amp;quot;1000&amp;quot; AlignParentLeft=&amp;quot;15&amp;quot; AlignParentTop=&amp;quot;15&amp;quot; AlignParentRight=&amp;quot;15&amp;quot; AlignParentBottom=&amp;quot;15&amp;quot;&amp;gt; &amp;lt;SkinRelativeLayout Id=&amp;quot;1100&amp;quot; BkgColor=&amp;quot;ID_COLOR_RED&amp;quot;&amp;gt; &amp;lt;SkinTextView Text=&amp;quot;1&amp;quot; LayoutWidth=&amp;quot;FillParent&amp;quot; LayoutHeight=&amp;quot;FillParent&amp;quot; HorzAlignment=&amp;quot;Center&amp;quot; VertAlignment=&amp;quot;Center&amp;quot; FontColor=&amp;quot;ID_COLOR_WHITE&amp;quot;/&amp;gt; &amp;lt;/SkinRelativeLayout&amp;gt; &amp;lt;SkinRelativeLayout Id=&amp;quot;1200&amp;quot; BkgColor=&amp;quot;ID_COLOR_GREEN&amp;quot; Visible=&amp;quot;false&amp;quot;&amp;gt; &amp;lt;SkinTextView Text=&amp;quot;2&amp;quot; LayoutWidth=&amp;quot;FillParent&amp;quot; LayoutHeight=&amp;quot;FillParent&amp;quot; HorzAlignment=&amp;quot;Center&amp;quot; VertAlignment=&amp;quot;Center&amp;quot; FontColor=&amp;quot;ID_COLOR_WHITE&amp;quot;/&amp;gt; &amp;lt;/SkinRelativeLayout&amp;gt; &amp;lt;/SkinFrameLayout&amp;gt; &amp;lt;/SkinRelativeLayout&amp;gt; &amp;lt;/SkinDialog&amp;gt;</code></pre> <p>上面的布局,色块宽度跟父组件同宽,高度跟父组件同高。</p>

页面列表

ITEM_HTML