SOUI 尺寸系统指南¶

Warning

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

You can read it through google translate.

尺寸系统是用户界面设计的基础组成部分。SOUI 框架提供了灵活且强大的尺寸定义机制，支持多种单位类型和集中式管理，确保界面在不同屏幕密度下保持一致的视觉效果。

支持的尺寸单位¶

SOUI 支持以下尺寸单位，每种单位都有其特定的使用场景：

单位类型	符号表示	说明	使用场景	示例
像素	px	物理像素单位	精确像素控制	`100px`
密度无关像素	dp	基于160dpi的相对单位	组件尺寸定义	`16dp`

单位详解¶

px (像素)：物理像素单位，在不同密度的屏幕上显示效果不同
dp (密度无关像素)：在160dpi屏幕上1dp=1px，自动适配不同屏幕密度

具名尺寸定义¶

创建尺寸资源文件¶

在项目的 values 目录下创建尺寸定义文件（推荐命名为 dimens.xml）：

<?xml version="1.0" encoding="utf-8"?>
<dimen>
    <!-- 间距定义 -->
    <spacing_xs value="4dp"/>
    <spacing_sm value="8dp"/>
    <spacing_md value="16dp"/>
    <spacing_lg value="24dp"/>
    <spacing_xl value="32dp"/>

    <!-- 组件高度 -->
    <button_height value="36dp"/>
    <toolbar_height value="56dp"/>
    <list_item_height value="48dp"/>
    <card_elevation value="2dp"/>

    <!-- 文本大小 -->
    <text_size_small value="12sp"/>
    <text_size_normal value="14sp"/>
    <text_size_large value="16sp"/>
    <text_size_title value="20sp"/>

    <!-- 圆角半径 -->
    <corner_radius_small value="2dp"/>
    <corner_radius_normal value="4dp"/>
    <corner_radius_large value="8dp"/>

    <!-- 分割线高度 -->
    <divider_height value="1px"/>
    <divider_padding value="16dp"/>
</dimen>

注册尺寸资源¶

在资源索引文件注册（uires.idx）：

<values>
    <!-- 其他资源引用 -->
    <file name="dimens" path="values\dimens.xml"/>
</values>

在界面定义文件引用（init.xml）：

<UIDEF>
    <dim src="values:dimens"/>
    <!-- 其他配置 -->
</UIDEF>

尺寸使用方式¶

在布局文件中使用¶

通过 @dim/尺寸名称 语法引用定义的具名尺寸：

<!-- 设置控件尺寸 -->
<button name="confirm" width="@dim/button_width" height="@dim/button_height" text="确定"/>

<!-- 设置内边距 -->
<window name="container" padding="@dim/spacing_md" margin="@dim/spacing_sm">
    <text name="title" text="标题" size="@dim/text_size_title"/>
</window>

<!-- 设置分割线 -->
<colorrect name="divider" height="@dim/divider_height" color="#E0E0E0" margin="@dim/divider_padding,0"/>

<!-- 设置圆角 -->
<window name="card" width="200dp" height="100dp" roundCorner="@dim/corner_radius_normal"/>

常用属性支持¶

以下属性支持使用 @dim/ 引用：

属性名称	说明	示例
`width`	控件宽度	`width="@dim/button_width"`
`height`	控件高度	`height="@dim/list_item_height"`
`margin`	外边距	`margin="@dim/spacing_md"`
`padding`	内边距	`padding="@dim/spacing_sm"`
`roundCorner`	圆角半径	`roundCorner="@dim/corner_radius_normal"`
`size`	文本大小	`size="@dim/text_size_normal"`

设计规范建议¶

命名规范¶

采用语义化命名，使用小写字母和下划线：

间距类：spacing_[size] - 如 spacing_md, spacing_lg
尺寸类：[component]_[property] - 如 button_height, toolbar_height
文本类：text_size_[type] - 如 text_size_normal, text_size_title
装饰类：[property]_[type] - 如 corner_radius_normal, elevation_small

尺寸阶梯¶

建议建立标准化的尺寸阶梯：

<!-- 间距阶梯（4dp 为基准）-->
<spacing_xs value="4dp"/>    <!-- 最小间距 -->
<spacing_sm value="8dp"/>    <!-- 小间距 -->
<spacing_md value="16dp"/>   <!-- 标准间距 -->
<spacing_lg value="24dp"/>   <!-- 大间距 -->
<spacing_xl value="32dp"/>   <!-- 最大间距 -->

<!-- 文本阶梯（2sp 为增量）-->
<text_size_small value="12sp"/>
<text_size_normal value="14sp"/>
<text_size_large value="16sp"/>
<text_size_title value="18sp"/>
<text_size_headline value="22sp"/>

适配建议¶

使用dp单位：除特殊需求外，优先使用dp单位确保密度适配
避免硬编码：所有尺寸应通过资源文件定义
建立基准：以8dp或4dp作为基础尺寸单位
保持一致性：相同用途的尺寸使用统一的具名值

常见问题解答¶

Q: dp和px有什么区别？ A: dp是密度无关像素，会根据屏幕密度自动缩放；px是物理像素，在不同密度屏幕上显示大小不同。

Q: 如何支持不同屏幕密度？ A: 使用dp单位可以自动适配不同密度，SOUI框架会在运行时根据屏幕密度进行转换。