可绘制
<ul>
<li>
<p>存放路径
bin\res\UIDemo\drawable\TestDrawable.xml</p>
</li>
<li>名词解释
可绘制是一种由不同可绘制图形组合起来的xml文件。</li>
</ul>
<h2>可绘制图形</h2>
<ul>
<li>所有形状均支持以下属性：
<pre><code class="language-xml">【Radius】圆角半径</code></pre></li>
</ul>
<h4>描边</h4>
<ul>
<li>格式如下：
<pre><code class="language-xml"><StrokeShape Color="ID_COLOR_BLACK"/></code></pre></li>
<li>属性说明
<pre><code class="language-xml">【Color】描边颜色</code></pre></li>
</ul>
<h4>图片</h4>
<ul>
<li>格式如下：
<pre><code class="language-xml"><ImageShape Image="ListItem.png" Index="1"/></code></pre></li>
<li>属性说明
<pre><code class="language-xml">【Image】图片文件名
【Index】填充图片第几帧，从0开始</code></pre></li>
</ul>
<h4>纯色填充</h4>
<ul>
<li>格式如下：
<pre><code class="language-xml"><SolidShape Color="ID_COLOR_BLACK"/></code></pre></li>
<li>属性说明
<pre><code class="language-xml">【Color】填充颜色</code></pre></li>
</ul>
<h4>水平渐变填充</h4>
<ul>
<li>格式如下：
<pre><code class="language-xml"><HorzGradientShape StartColor="ID_COLOR_BLACK" EndColor="ID_COLOR_WHITE"/></code></pre></li>
<li>属性说明
<pre><code class="language-xml">【StartColor】渐变开始颜色
【EndColor】渐变结束颜色</code></pre></li>
</ul>
<h4>垂直渐变填充</h4>
<ul>
<li>格式如下：
<pre><code class="language-xml"><VertGradientShape StartColor="ID_COLOR_BLACK" EndColor="ID_COLOR_WHITE"/></code></pre></li>
<li>属性说明
<pre><code class="language-xml">【StartColor】渐变开始颜色
【EndColor】渐变结束颜色</code></pre></li>
</ul>
<h2>可绘制类型</h2>
<h4>图层可绘制</h4>
<ul>
<li>
<p>名词解释
图层可绘制是一种按照顺序，依次绘制一组图形的的xml文件。</p>
</li>
<li>文件格式如下：
<pre><code class="language-xml"><?xml version="1.0" encoding="utf-8"?>
<LayerDrawable>
<SolidShape Color="ID_COLOR_BLACK"/>
<ImageShape Image="Test.png" Index="0"/>
</LayerDrawable></code></pre></li>
</ul>
<h4>状态可绘制</h4>
<ul>
<li>
<p>名词解释
状态可绘制是一种按照状态，分别绘制一种图形的的xml文件。</p>
</li>
<li>
<p>文件格式如下：</p>
<pre><code class="language-xml"><?xml version="1.0" encoding="utf-8"?>
<StateDrawable>
<Default>
<ImageShape Image="TabButton.png" Index="0" State="Default"/>
</Default>
<Checked>
<ImageShape Image="TabButton.png" Index="1" State="Default"/>
</Checked>
</StateDrawable></code></pre>
</li>
<li>
<p>属性说明</p>
<pre><code class="language-xml">【State】状态</code></pre>
</li>
<li>
<p>支持以下五种状态</p>
<pre><code class="language-xml">【Normal】正常状态
【Hover】鼠标悬停状态
【Pressed】鼠标按下状态
【Disabled】禁用状态
【Default】默认状态</code></pre>
</li>
<li>拥有选中状态的控件有：RadioButton、CheckBox、ListItem</li>
</ul>
<h4>示例1（Tab按钮背景）</h4>
<ul>
<li>默认状态，绘制背景时始终绘制【TabButton.png】第一帧
<pre><code class="language-xml"><Default>
<ImageShape Image="TabButton.png" Index="0" State="Default"/>
</Default></code></pre></li>
<li>选中状态，绘制背景时始终绘制【TabButton.png】第二帧
<pre><code class="language-xml"><Checked>
<ImageShape Image="TabButton.png" Index="1" State="Default"/>
</Checked></code></pre></li>
</ul>
<h4>示例2（普通按钮背景）</h4>
<ul>
<li>默认状态，绘制背景时按照按钮当前状态，分别绘制【TabButton.png】第一帧、第二帧、第三帧和第四帧
<pre><code class="language-xml"><Default>
<ImageShape Image="Button.png" Index="0" State="Normal"/>
<ImageShape Image="Button.png" Index="1" State="Hover"/>
<ImageShape Image="Button.png" Index="2" State="Pressed"/>
<ImageShape Image="Button.png" Index="3" State="Disabled"/>
</Default></code></pre></li>
</ul>