Sketchware レイアウトデザイナー

Sketchware レイアウトデザイナースキル

概要

このスキルは、Sketchware Pro プロジェクトのUIレイヤーを専門に作成・管理します。.swb バックアップパッケージ内の data/view に必要な正確なJSON仕様を生成し、ウィジェット階層、スタイリング、レスポンシブレイアウト、フローティングアクションボタン（FAB）を完全にサポートします。

---

1. バックアップアーカイブ内のファイル構造

Sketchware プロジェクトまたは .swb アーカイブでは、すべての画面レイアウトが単一の AES暗号化ファイル data/view に結合されます。

マルチスクリーンとセクションヘッダー

レイアウトはセクションマーカーで区切られます。

• @<アクティビティ_xml名>.xml（例：@main.xml、@home.xml）
• @<アクティビティ_xml名>.xml_fab（フローティングアクションボタンがあるアクティビティ用）
• @<カスタムビュー名>.xml（ListView/Spinnerで使用するカスタムビュー用）

@main.xml
<ビュー1のViewBean JSON>
<ビュー2のViewBean JSON>
<ビュー3のViewBean JSON>

@main.xml_fab
<FABのViewBean JSON>

@item_row.xml
<カスタムビューアイテムのViewBean JSON>

---

2. ViewBean JSONスキーマと必須フィールド

各UI要素は、ViewBean を表す1行のJSON文字列です。

{
  "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. ウィジェットとレイアウトのタイプ定数

タイプInt	ウィジェット/レイアウトクラス	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	2状態選択可能なチェックボックス
12	ScrollView	ScrollView	垂直スクロールコンテナ
13	Switch	Switch	2状態トグルスイッチ
14	SeekBar	SeekBar	ドラッグ可能な値スライダー
15	CalendarView	CalendarView	インタラクティブな月間カレンダー
16	FloatingActionButton	FloatingActionButton	標準マテリアルFAB（_fab セクション内）
17	AdView	AdView	Google AdMob バナー
18	MapView	MapView	Google Maps コンテナ

---

4. 階層と親ルール（重要）

1. ルートレベルビュー:
   • 画面ベースに直接配置する要素は、"parent": "root" を設定します。
   • "parentType": 0（FABの場合は -1）を設定します。
2. コンテナ内の子ビュー:
   • "parent": "<コンテナビューのid>"（例："parent": "linear_main"）を設定します。
   • "parentType": <コンテナのタイプint>（例：LinearLayoutの場合は 0）を設定します。
3. インデックスの順序:
   • 同じ "parent" を持つ兄弟間で、"index" は 0, 1, 2, 3... と連続している必要があります。
4. レイアウトの寸法:
   • MATCH_PARENT: -1
   • WRAP_CONTENT: -2
   • 正確なdp値: 正の整数（例：48dpの場合は 48）
5. 線形レイアウトの方向:
   • 水平: "orientation": 0
   • 垂直: "orientation": 1
   • 非コンテナウィジェット: "orientation": -1

---

5. スタイリング、色、タイポグラフィ

• ARGB 16進数から32ビット符号付き整数へ: Sketchware は色を32ビット符号付き整数で保存します。
  • 透明/デフォルト: 16777215（0x00FFFFFF）
  • 黒（#FF000000）: -16777216
  • 白（#FFFFFFFF）: -1
  • Sketchware プライマリブルー（#FF008DCD）: -16740915
  • マテリアルアクセントレッド（#FFFF4081）: -49023
  • マテリアルグレー（#FF9E9E9E）: -6381922
• テキストスタイル（textType）:
  • 0: 通常
  • 1: 太字
  • 2: 斜体
  • 3: 太字斜体
• 入力タイプ（EditTextの inputType）:
  • 1: 通常テキスト
  • 2: テキスト（候補表示なし）
  • 33: メールアドレス（TYPE_TEXT_VARIATION_EMAIL_ADDRESS）
  • 129: パスワード（TYPE_TEXT_VARIATION_PASSWORD）
  • 2: 数値（TYPE_CLASS_NUMBER）
  • 3: 電話番号（TYPE_CLASS_PHONE）
• スケールタイプ（ImageViewの scaleType）:
  • "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文字列は、それぞれの @<画面>.xml ヘッダーの下に結合され、data/view に暗号化されます。