Sketchware布局设计师

Sketchware 布局设计师技能

概述

本技能专用于创建和管理 Sketchware Pro 项目的 UI 层。它能生成 .swb 备份包中 data/view 所需的精确 JSON 规范，并全面支持小部件层次结构、样式、响应式布局和浮动操作按钮 (FAB)。

---

1. 备份存档中的文件结构

在 Sketchware 项目或 .swb 存档中，所有屏幕布局都合并到一个 AES 加密文件中：data/view。

多屏幕与节标题

布局通过节标记进行划分：

• @<activity_xml_name>.xml (例如 @main.xml, @home.xml)
• @<activity_xml_name>.xml_fab (用于具有浮动操作按钮的活动)
• @<custom_view_name>.xml (用于 ListView/Spinner 中使用的自定义视图)

@main.xml
<ViewBean JSON for view 1>
<ViewBean JSON for view 2>
<ViewBean JSON for view 3>

@main.xml_fab
<ViewBean JSON for FAB>

@item_row.xml
<ViewBean JSON for custom view items>

---

2. ViewBean JSON 模式与必填字段

每个 UI 元素都是一个单行 JSON 字符串，代表一个 ViewBean：

{
  "id": "button_submit",
  "type": 3,
  "parent": "root",
  "parentType": 0,
  "index": 0,
  "convert": "Button",
  "customView": "",
  "enabled": 1,
  "clickable": 1,
  "alpha": 1.0,
  "translationX": 0.0,
  "translationY": 0.0,
  "scaleX": 1.0,
  "scaleY": 1.0,
  "firstDayOfWeek": 1,
  "dividerHeight": 1,
  "choiceMode": 0,
  "checked": 0,
  "indeterminate": "false",
  "progress": 0,
  "max": 100,
  "progressStyle": "?android:progressBarStyle",
  "spinnerMode": 1,
  "inject": "",
  "adSize": "",
  "adUnitId": "",
  "preIndex": 0,
  "preParentType": -1,
  "parentAttributes": {},
  "layout": {
    "width": -1,
    "height": -2,
    "orientation": -1,
    "gravity": 0,
    "layoutGravity": 0,
    "weight": 0,
    "weightSum": 0,
    "marginLeft": 16,
    "marginTop": 16,
    "marginRight": 16,
    "marginBottom": 16,
    "paddingLeft": 12,
    "paddingTop": 12,
    "paddingRight": 12,
    "paddingBottom": 12,
    "backgroundColor": 16777215,
    "borderColor": -16740915
  },
  "text": {
    "text": "Submit",
    "textSize": 16,
    "textColor": -16777216,
    "hint": "",
    "hintColor": 16777215,
    "singleLine": 0,
    "line": 0,
    "inputType": 1,
    "imeOption": 0,
    "textFont": "default_font",
    "textType": 1
  },
  "image": {
    "rotate": 0,
    "scaleType": "CENTER"
  }
}

---

3. 小部件与布局类型常量

类型整数	小部件 / 布局类	convert 字符串	描述
0	LinearLayout	LinearLayout	线性容器（水平或垂直）
1	RelativeLayout	RelativeLayout	相对布局容器
2	HorizontalScrollView	HorizontalScrollView	水平滚动容器
3	Button	Button	交互式按钮
4	TextView	TextView	文本显示标签
5	EditText	EditText	文本输入字段
6	ImageView	ImageView	图像容器
7	WebView	WebView	应用内浏览器/网页框架
8	ProgressBar	ProgressBar	圆形或水平加载指示器
9	ListView	ListView	可滚动的垂直项目列表
10	Spinner	Spinner	下拉选择列表
11	CheckBox	CheckBox	双状态可勾选框
12	ScrollView	ScrollView	垂直滚动容器
13	Switch	Switch	双状态切换开关
14	SeekBar	SeekBar	可拖动的值滑块
15	CalendarView	CalendarView	交互式月历
16	FloatingActionButton	FloatingActionButton	标准 Material FAB（位于 _fab 节中）
17	AdView	AdView	Google AdMob 横幅广告
18	MapView	MapView	Google 地图容器

---

4. 层次结构与父级规则（关键）

1. 根级别视图：
   • 对于直接附加到屏幕基座的元素，设置 "parent": "root"。
   • 设置 "parentType": 0（FAB 则为 -1）。
2. 容器中的子视图：
   • 设置 "parent": "<container_view_id>"（例如 "parent": "linear_main"）。
   • 设置 "parentType": <container_type_int>（例如 LinearLayout 为 0）。
3. 索引顺序：
   • "index" 必须在共享相同 "parent" 的兄弟元素中 按顺序 为 0, 1, 2, 3...。
4. 布局尺寸：
   • MATCH_PARENT：-1
   • WRAP_CONTENT：-2
   • 精确 DP：正整数（例如 48 表示 48dp）。
5. 线性布局方向：
   • 水平："orientation": 0
   • 垂直："orientation": 1
   • 非容器小部件："orientation": -1

---

5. 样式、颜色与排版

• ARGB 十六进制转 32 位有符号整数： Sketchware 将颜色存储为 32 位有符号整数：
  • 透明/默认：16777215 (0x00FFFFFF)
  • 黑色 (#FF000000)：-16777216
  • 白色 (#FFFFFFFF)：-1
  • Sketchware 主蓝色 (#FF008DCD)：-16740915
  • Material 强调红 (#FFFF4081)：-49023
  • Material 灰色 (#FF9E9E9E)：-6381922
• 文本样式 (textType)：
  • 0：正常
  • 1：粗体
  • 2：斜体
  • 3：粗斜体
• 输入类型 (inputType for EditText)：
  • 1：普通文本
  • 2：文本（无建议）
  • 33：电子邮件地址 (TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
  • 129：密码 (TYPE_TEXT_VARIATION_PASSWORD)
  • 2：数字 (TYPE_CLASS_NUMBER)
  • 3：电话 (TYPE_CLASS_PHONE)
• 缩放类型 (scaleType for ImageView)：
  • "CENTER", "CENTER_CROP", "CENTER_INSIDE", "FIT_CENTER", "FIT_START", "FIT_END", "FIT_XY"

---

6. 浮动操作按钮 (FAB) 设置

如果某个活动启用了 FAB：

1. 在 data/file (@activity) 中，设置 "options": 1（或包含 FAB 的位掩码）。
2. 在 data/view 中，在 @<activity>.xml_fab 下添加一个条目：

@main.xml_fab
{"adSize":"","adUnitId":"","alpha":1.0,"checked":0,"choiceMode":0,"clickable":1,"convert":"","customView":"","dividerHeight":1,"enabled":1,"firstDayOfWeek":1,"id":"_fab","image":{"rotate":0,"scaleType":"CENTER"},"indeterminate":"false","index":0,"inject":"","layout":{"backgroundColor":16777215,"borderColor":-16740915,"gravity":0,"height":-2,"layoutGravity":85,"marginBottom":16,"marginLeft":16,"marginRight":16,"marginTop":16,"orientation":-1,"paddingBottom":0,"paddingLeft":0,"paddingRight":0,"paddingTop":0,"weight":0,"weightSum":0,"width":-2},"max":100,"parentAttributes":{},"parentType":-1,"preIndex":0,"preParentType":0,"progress":0,"progressStyle":"?android:progressBarStyle","scaleX":1.0,"scaleY":1.0,"spinnerMode":1,"text":{"hint":"","hintColor":16777215,"imeOption":0,"inputType":1,"line":0,"singleLine":0,"text":"","textColor":16777215,"textFont":"default_font","textSize":12,"textType":0},"translationX":0.0,"translationY":0.0,"type":16}

3. 在 data/logic 中，点击事件绑定到目标 _fab：
   • 事件头：@MainActivity.java_events -> {"eventName":"onClick","eventType":1,"targetId":"_fab","targetType":16}
   • 逻辑块头：@MainActivity.java__fab_onClick

---

7. 技能间集成协议

• 与 sketchware-events-manager： 此处创建的每个交互式视图（Button、EditText、ImageView、ListView、_fab）在 data/logic 中通过其 id 和 targetType 被引用，用于点击、更改和项目监听器。
• 与 sketchware-blocks-engine： 视图 ID 被传递到 UI 块参数中（例如 setText、getText、setVisible、setImageUrl）。
• 与 sketchware-project-generator： 生成的视图 JSON 字符串在各自的 @<screen>.xml 头下合并，并加密到 data/view 中。