SSkinImgList 图片列表皮肤¶

概述¶

SSkinImgList 是 SOUI 中最常用的图片皮肤类型之一，主要用于处理多状态的图片资源。它将多个状态的图片水平或垂直排列在一张图片中，通过指定状态数来自动计算每个状态图片的大小。

类定义¶

class SOUI_EXP SSkinImgList : public SSkinObjBase
{
protected:
    SAutoRefPtr<IBitmap> m_pImg;     // 图片对象
    BOOL                m_bVertical;  // 垂直排列标志
};

属性列表¶

属性名	类型	默认值	说明
name	string	-	皮肤名
scale	float	-	比例
alpha	int	-	alpha
enableColorize	bool	-	enableColorize（是:1
autoFit	bool	-	autoFit（是:1
tile	bool	-	平铺（拉伸:0
vertical	bool	-	垂直排列（垂直:1
states	int	-	子图数量(states)
src	string	-	数据源(src)
filterLevel	string	-	filterLevel（none

XML示例¶

<!-- 水平排列的按钮皮肤 -->
<imglist name="btn_normal" src="img:btn_normal" states="4" autoFit="1"/>

<!-- 垂直排列的图标皮肤 -->
<imglist name="icons" src="img:icons" states="5" vertical="1" filterLevel="high"/>

<!-- 平铺绘制的背景皮肤 -->
<imglist name="bg_pattern" src="img:pattern" tile="1" enableColorize="1"/>

<!-- 带透明度和缩放的皮肤 -->
<imglist name="scaled_img" src="img:scaled" scale="1.5" alpha="200"/>

使用场景¶

按钮状态
正常、悬停、按下、禁用等多状态
状态图片水平/垂直排列
图标列表
工具栏图标
状态指示图标
背景图案
平铺背景
可缩放的界面元素

代码示例¶

1. 创建皮肤¶

// 通过代码创建
SAutoRefPtr<SSkinImgList> pSkin;
BUILDSKINNATIVE(pSkin, SSkinImgList);
pSkin->SetImage(L"img:btn_normal");
pSkin->SetStates(4);
pSkin->SetVertical(FALSE);

// 使用皮肤
SButton *pBtn = new SButton;
pBtn->SetSkin(pSkin);

2. 状态切换¶

// 在绘制时自动根据控件状态选择对应部分图片
BOOL SSkinImgList::Draw(IRenderTarget *pRT, LPCRECT rcDraw, DWORD dwState, BYTE byAlpha)
{
    if(!m_pImg) return FALSE;
    size_t nStates = GetStates();
    if(dwState >= nStates) return FALSE;

    // 计算当前状态图片位置
    CRect rcSrc = GetPartRect(dwState);

    // 绘制图片
    if(m_bTile)
    {
        // 平铺绘制
        pRT->DrawBitmapEx(rcDraw, m_pImg, &rcSrc, EM_TILE, byAlpha);
    }
    else
    {
        // 拉伸绘制
        pRT->DrawBitmapEx(rcDraw, m_pImg, &rcSrc, EM_STRETCH, byAlpha);
    }
    return TRUE;
}

注意事项¶

1. 图片规格¶

确保原始图片能被状态数整除
每个状态图片大小相同
推荐使用PNG格式（支持透明通道）

2. 性能优化¶

合理控制图片大小
适当使用图片缓存
避免频繁切换状态

3. 兼容性¶

考虑不同DPI缩放
处理图片加载失败情况
注意内存占用

常见问题¶

Q: 图片显示不完整或状态切换异常怎么办？¶

A: 检查 states 属性是否与图片中实际状态数一致，确认图片排列方向与 vertical 设置匹配。

Q: 图片模糊或锯齿明显怎么办？¶

A: 调整 filterLevel 属性，选择合适的过滤级别提升渲染质量。

Q: 如何实现图片颜色变换效果？¶

A: 设置 enableColorize 为 1，然后通过代码设置颜色化参数。

最佳实践¶

资源优化：将多个状态的图片合并为一张图片，减少资源加载次数
状态管理：合理设置 states 属性，确保状态数量与图片中实际状态数一致
绘制模式：根据需要选择合适的 tile 模式，平铺适合背景图案，拉伸适合按钮等控件
排列方向：通过 vertical 属性指定正确的排列方向
性能优化：使用 filterLevel 属性控制图片渲染质量，在性能和质量之间取得平衡