AndroidForgeHQ/sketchware-layout-designer

Sketchware Layout Designer Skill

Überblick

Diese Fähigkeit ist spezialisiert auf die Erstellung und Verwaltung der UI-Schicht von Sketchware Pro Projekten. Sie produziert die exakten JSON-Spezifikationen, die für data/view in .swb-Backup-Paketen erforderlich sind, und bietet volle Unterstützung für Widget-Hierarchien, Styling, responsive Layouts und Floating Action Buttons (FAB).

---

1. Dateistruktur im Backup-Archiv

In einem Sketchware-Projekt oder .swb-Archiv sind alle Bildschirmlayouts in einer einzigen AES-verschlüsselten Datei kombiniert: data/view.

Mehrere Bildschirme & Abschnittsüberschriften

Layouts werden durch Abschnittsmarkierungen geteilt:

• @<activity_xml_name>.xml (z. B. @main.xml, @home.xml)
• @<activity_xml_name>.xml_fab (für Aktivitäten mit einem Floating Action Button)
• @<custom_view_name>.xml (für CustomViews in ListViews/Spinnern)

@main.xml
<ViewBean JSON für View 1>
<ViewBean JSON für View 2>
<ViewBean JSON für View 3>

@main.xml_fab
<ViewBean JSON für FAB>

@item_row.xml
<ViewBean JSON für benutzerdefinierte View-Elemente>

---

2. ViewBean JSON Schema & Erforderliche Felder

Jedes UI-Element ist ein einzeiliger JSON-String, der ein ViewBean darstellt:

{
  "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": "Senden",
    "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. Widget- & Layout-Typ Konstanten

Typ Int	Widget / Layout Klasse	convert String	Beschreibung
0	LinearLayout	LinearLayout	Linearer Container (Horizontal oder Vertikal)
1	RelativeLayout	RelativeLayout	Relativer Container
2	HorizontalScrollView	HorizontalScrollView	Horizontaler Scroll-Container
3	Button	Button	Interaktiver Druckknopf
4	TextView	TextView	Textanzeige-Label
5	EditText	EditText	Texteingabefeld
6	ImageView	ImageView	Bildcontainer
7	WebView	WebView	In-App-Browser / Web-Frame
8	ProgressBar	ProgressBar	Runde oder horizontale Ladeanzeige
9	ListView	ListView	Scrollbare vertikale Elementliste
10	Spinner	Spinner	Dropdown-Auswahlliste
11	CheckBox	CheckBox	Zweistufiges anwählbares Kästchen
12	ScrollView	ScrollView	Vertikaler Scroll-Container
13	Switch	Switch	Zweistufiger Umschalter
14	SeekBar	SeekBar	Verschiebbarer Wertregler
15	CalendarView	CalendarView	Interaktiver Monatskalender
16	FloatingActionButton	FloatingActionButton	Standard Material FAB (in _fab-Abschnitt)
17	AdView	AdView	Google AdMob Banner
18	MapView	MapView	Google Maps Container

---

4. Hierarchie & Elternregeln (KRITISCH)

1. Root-Level Views:
   • Für Elemente, die direkt an der Bildschirmbasis befestigt sind, setze "parent": "root".
   • Setze "parentType": 0 (oder -1 für FAB).
2. Kind-Views in Containern:
   • Setze "parent": "<container_view_id>" (z. B. "parent": "linear_main").
   • Setze "parentType": <container_type_int> (z. B. 0 für LinearLayout).
3. Index-Reihenfolge:
   • "index" MUSS 0, 1, 2, 3... sequenziell unter Geschwistern mit demselben "parent" sein.
4. Layout-Abmessungen:
   • MATCH_PARENT: -1
   • WRAP_CONTENT: -2
   • Exakte DP: positive ganze Zahl (z. B. 48 für 48dp).
5. Orientierung von Linear Layouts:
   • Horizontal: "orientation": 0
   • Vertikal: "orientation": 1
   • Nicht-Container-Widgets: "orientation": -1

---

5. Styling, Farben & Typografie

• ARGB-Hex in 32-Bit-Signed Int: Sketchware speichert Farben als 32-Bit-Signed-Integer:
  • Transparent / Standard: 16777215 (0x00FFFFFF)
  • Schwarz (#FF000000): -16777216
  • Weiß (#FFFFFFFF): -1
  • Sketchware Primärblau (#FF008DCD): -16740915
  • Material Accent Rot (#FFFF4081): -49023
  • Material Grau (#FF9E9E9E): -6381922
• Textstile (textType):
  • 0: Normal
  • 1: Fett
  • 2: Kursiv
  • 3: Fett Kursiv
• Eingabetypen (inputType für EditText):
  • 1: Normaler Text
  • 2: Text (Keine Vorschläge)
  • 33: E-Mail-Adresse (TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
  • 129: Passwort (TYPE_TEXT_VARIATION_PASSWORD)
  • 2: Nummer (TYPE_CLASS_NUMBER)
  • 3: Telefon (TYPE_CLASS_PHONE)
• Skalierungstypen (scaleType für ImageView):
  • "CENTER", "CENTER_CROP", "CENTER_INSIDE", "FIT_CENTER", "FIT_START", "FIT_END", "FIT_XY"

---

6. Floating Action Button (FAB) Einrichtung

Wenn eine Aktivität den FAB aktiviert:

1. Setze in data/file (@activity) "options": 1 (oder Bitmaske mit FAB).
2. Füge in data/view einen Eintrag unter @<activity>.xml_fab hinzu:

@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. In data/logic bindet das Klickereignis an das Ziel _fab:
   • Ereigniskopf: @MainActivity.java_events -> {"eventName":"onClick","eventType":1,"targetId":"_fab","targetType":16}
   • Logikblockkopf: @MainActivity.java__fab_onClick

---

7. Fähigkeitsübergreifendes Integrationsprotokoll

• Mit sketchware-events-manager: Jede interaktive View (Button, EditText, ImageView, ListView, _fab), die hier erstellt wird, wird in data/logic über ihre id und targetType für Klick-, Änderungs- und Element-Listener referenziert.
• Mit sketchware-blocks-engine: View-IDs werden an UI-Blockparameter übergeben (z. B. setText, getText, setVisible, setImageUrl).
• Mit sketchware-project-generator: Generierte View-JSON-Strings werden unter ihren jeweiligen @<screen>.xml-Köpfen kombiniert und in data/view verschlüsselt.