入门SkinUI（9）：资源（6）：可绘制

• 存放路径
  bin\res\UIDemo\drawable\TestDrawable.xml

• 名词解释
  可绘制是一种由不同可绘制图形组合起来的xml文件。

##可绘制图形

• 所有形状均支持以下属性：

【Radius】圆角半径

####描边

• 格式如下：

<StrokeShape Color="ID_COLOR_BLACK"/>

• 属性说明

【Color】描边颜色

####图片

• 格式如下：

<ImageShape Image="ListItem.png" Index="1"/>

• 属性说明

【Image】图片文件名
【Index】填充图片第几帧，从0开始

####纯色填充

• 格式如下：

<SolidShape Color="ID_COLOR_BLACK"/>

• 属性说明

【Color】填充颜色

####水平渐变填充

• 格式如下：

<HorzGradientShape StartColor="ID_COLOR_BLACK" EndColor="ID_COLOR_WHITE"/>

• 属性说明

【StartColor】渐变开始颜色
【EndColor】渐变结束颜色

####垂直渐变填充

• 格式如下：

<VertGradientShape StartColor="ID_COLOR_BLACK" EndColor="ID_COLOR_WHITE"/>

• 属性说明

【StartColor】渐变开始颜色
【EndColor】渐变结束颜色

##可绘制类型
####图层可绘制

• 名词解释
  图层可绘制是一种按照顺序，依次绘制一组图形的的xml文件。

• 文件格式如下：

<?xml version="1.0" encoding="utf-8"?>
<LayerDrawable>
    <SolidShape Color="ID_COLOR_BLACK"/>
    <ImageShape Image="Test.png" Index="0"/>
</LayerDrawable>

####状态可绘制

• 名词解释
  状态可绘制是一种按照状态，分别绘制一种图形的的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>

• 属性说明

【State】状态

• 支持以下五种状态

【Normal】正常状态
【Hover】鼠标悬停状态
【Pressed】鼠标按下状态
【Disabled】禁用状态
【Default】默认状态

• 拥有选中状态的控件有：RadioButton、CheckBox、ListItem

####示例1（Tab按钮背景）

• 默认状态，绘制背景时始终绘制【TabButton.png】第一帧

<Default>
    <ImageShape Image="TabButton.png" Index="0" State="Default"/>
</Default>

• 选中状态，绘制背景时始终绘制【TabButton.png】第二帧

<Checked>
    <ImageShape Image="TabButton.png" Index="1" State="Default"/>
</Checked>

####示例2（普通按钮背景）

• 默认状态，绘制背景时按照按钮当前状态，分别绘制【TabButton.png】第一帧、第二帧、第三帧和第四帧

<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>