SOUI 九宫格图片显示教程¶

Warning

The current page still doesn't have a translation for this language.

You can read it through google translate.

本教程将介绍如何在SOUI中使用九宫格拉伸方式显示图片资源。九宫格是一种常用的图片缩放技术，能够在保持图片边缘特效的同时实现图片的缩放。

什么是九宫格拉伸？¶

九宫格拉伸将图片分为九个区域： - 四个角落：保持原始大小不变 - 四个边：只在一个方向上拉伸 - 中心区域：在两个方向上拉伸

实现步骤¶

1. 准备资源文件¶

创建资源目录
在uires目录下创建适当的子目录（如jpg, png等）
将图片文件放入该目录

文件组织建议

uires/
├── jpg/
│   └── your-image.jpg
├── png/
│   └── other-images.png
└── uires.idx

2. 注册资源¶

在uires.idx文件中添加资源定义：

<resource>
    <jpg>
        <file name="myimage" path="jpg/your-image.jpg"/>
    </jpg>
</resource>

关键属性： - name：资源的引用名称 - path：资源文件相对路径

3. 定义皮肤对象¶

在全局或局部skin节点中定义imgframe对象：

<skin>
    <imgframe name="skin_myimage" 
              src="jpg:myimage" 
              margin-x="50" 
              margin-y="50"/>
</skin>

参数说明： - name：皮肤对象的引用名称 - src：资源类型和名称（格式：类型:名称） - margin-x：水平方向不拉伸的边距 - margin-y：垂直方向不拉伸的边距

4. 使用图片控件¶

在布局XML中使用img控件显示图片：

<window>
    <img pos="0,0,-0,-0" skin="skin_myimage"/>
</window>

属性说明： - pos：控件位置（左,上,右,下） - skin：引用的皮肤对象名称

进阶使用¶

1. 不同的九宫格设置¶

<!-- 细边框图片 -->
<imgframe name="skin_border" 
          src="png:border" 
          margin-x="5" 
          margin-y="5"/>

<!-- 大边框图片 -->
<imgframe name="skin_panel" 
          src="png:panel" 
          margin-x="20" 
          margin-y="20"/>

2. 组合使用¶

<window>
    <!-- 背景面板 -->
    <img pos="0,0,-0,-0" skin="skin_panel"/>

    <!-- 内容区域 -->
    <img pos="10,10,-10,-10" skin="skin_content"/>
</window>

3. 动态调整¶

<window size="-1,-1">
    <img pos="10,10,@300,@200" skin="skin_myimage"/>
    <img pos="10,[10,@500,@300" skin="skin_myimage"/>
</window>

最佳实践¶

图片设计
选择合适的边距大小
保持边框纹理的连续性
考虑最小使用尺寸
性能优化
合理设置margin值
避免过大的图片
适当使用图片缓存
布局考虑
预留足够的缩放空间
注意最小尺寸限制
合理使用定位方式

常见问题¶

1. 图片变形¶

检查margin设置是否合适
确保原始图片质量
避免过度拉伸

2. 显示不完整¶

检查控件大小设置
确认布局位置正确
验证资源加载成功

3. 性能问题¶

优化图片大小
使用合适的图片格式
考虑使用缓存机制

调试技巧¶

可视化调试

<!-- 添加背景色便于观察 -->
<img pos="0,0,-0,-0" 
     skin="skin_myimage" 
     colorBkgnd="#ffff0000"/>

使用布局参考线

<!-- 添加参考框 -->
<window pos="0,0,-0,-0" colorBorder="#ff0000" margin="1,1,1,1"/>

小结¶

通过本教程，我们学习了： - 如何在SOUI中使用九宫格图片 - 资源的注册和使用方法 - 图片控件的布局技巧 - 常见问题的解决方案

九宫格拉伸是实现自适应界面的重要技术，合理使用可以大大提高界面的美观性和适应性。