AndroidForgeHQ/sketchware-layout-designer

Skill de Diseñador de Layouts Sketchware

Resumen

Este skill se especializa en crear y gestionar la capa de UI de proyectos Sketchware Pro. Produce las especificaciones JSON exactas requeridas para data/view en paquetes de respaldo .swb y proporciona soporte completo para la jerarquía de widgets, estilos, layouts responsivos y botones de acción flotante (FAB).

---

1. Estructura de Archivos en el Archivo de Respaldo

En un proyecto Sketchware o archivo .swb, todos los layouts de pantalla se combinan en un único archivo cifrado con AES: data/view.

Encabezados de Sección y Múltiples Pantallas

Los layouts se dividen mediante marcadores de sección:

• @<nombre_actividad_xml>.xml (ej. @main.xml, @home.xml)
• @<nombre_actividad_xml>.xml_fab (para actividades con un Botón de Acción Flotante)
• @<nombre_vista_personalizada>.xml (para CustomViews usadas en ListViews/Spinners)

@main.xml
<JSON de ViewBean para vista 1>
<JSON de ViewBean para vista 2>
<JSON de ViewBean para vista 3>

@main.xml_fab
<JSON de ViewBean para FAB>

@item_row.xml
<JSON de ViewBean para elementos de vista personalizada>

---

2. Esquema JSON de ViewBean y Campos Requeridos

Cada elemento de UI es una cadena JSON de una sola línea que representa un 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. Constantes de Tipo de Widget y Layout

Tipo Int	Clase de Widget / Layout	Cadena convert	Descripción
0	LinearLayout	LinearLayout	Contenedor lineal (Horizontal o Vertical)
1	RelativeLayout	RelativeLayout	Contenedor relativo
2	HorizontalScrollView	HorizontalScrollView	Contenedor de desplazamiento horizontal
3	Button	Button	Botón pulsador interactivo
4	TextView	TextView	Etiqueta de visualización de texto
5	EditText	EditText	Campo de entrada de texto
6	ImageView	ImageView	Contenedor de imágenes
7	WebView	WebView	Navegador / marco web en la aplicación
8	ProgressBar	ProgressBar	Indicador de carga circular o horizontal
9	ListView	ListView	Lista de elementos vertical desplazable
10	Spinner	Spinner	Lista de selección desplegable
11	CheckBox	CheckBox	Casilla de verificación de dos estados
12	ScrollView	ScrollView	Contenedor de desplazamiento vertical
13	Switch	Switch	Interruptor de dos estados
14	SeekBar	SeekBar	Control deslizante de valor arrastrable
15	CalendarView	CalendarView	Calendario mensual interactivo
16	FloatingActionButton	FloatingActionButton	FAB Material estándar (en sección _fab)
17	AdView	AdView	Banner de Google AdMob
18	MapView	MapView	Contenedor de Google Maps

---

4. Jerarquía y Reglas de Padre (CRÍTICO)

1. Vistas de Nivel Raíz:
   • Para elementos adjuntos directamente a la base de la pantalla, establece "parent": "root".
   • Establece "parentType": 0 (o -1 para FAB).
2. Vistas Hijas en Contenedores:
   • Establece "parent": "<id_del_contenedor>" (ej. "parent": "linear_main").
   • Establece "parentType": <tipo_int_del_contenedor> (ej. 0 para LinearLayout).
3. Orden de Índices:
   • "index" DEBE ser 0, 1, 2, 3... secuencialmente entre hermanos que comparten el mismo "parent".
4. Dimensiones del Layout:
   • MATCH_PARENT: -1
   • WRAP_CONTENT: -2
   • DP exacto: entero positivo (ej. 48 para 48dp).
5. Orientación del Layout Lineal:
   • Horizontal: "orientation": 0
   • Vertical: "orientation": 1
   • Widgets no contenedores: "orientation": -1

---

5. Estilos, Colores y Tipografía

• ARGB Hex a Entero con Signo de 32 bits: Sketchware almacena los colores como enteros con signo de 32 bits:
  • Transparente / Predeterminado: 16777215 (0x00FFFFFF)
  • Negro (#FF000000): -16777216
  • Blanco (#FFFFFFFF): -1
  • Azul Primario de Sketchware (#FF008DCD): -16740915
  • Rojo de énfasis Material (#FFFF4081): -49023
  • Gris Material (#FF9E9E9E): -6381922
• Estilos de Texto (textType):
  • 0: Normal
  • 1: Negrita
  • 2: Cursiva
  • 3: Negrita Cursiva
• Tipos de Entrada (inputType para EditText):
  • 1: Texto Normal
  • 2: Texto (Sin sugerencias)
  • 33: Dirección de Correo Electrónico (TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
  • 129: Contraseña (TYPE_TEXT_VARIATION_PASSWORD)
  • 2: Número (TYPE_CLASS_NUMBER)
  • 3: Teléfono (TYPE_CLASS_PHONE)
• Tipos de Escala (scaleType para ImageView):
  • "CENTER", "CENTER_CROP", "CENTER_INSIDE", "FIT_CENTER", "FIT_START", "FIT_END", "FIT_XY"

---

6. Configuración del Botón de Acción Flotante (FAB)

Si una Actividad habilita el FAB:

1. En data/file (@actividad), establece "options": 1 (o máscara de bits con FAB).
2. En data/view, agrega una entrada bajo @<actividad>.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. En data/logic, el evento de clic se vincula al destino _fab:
   • Encabezado del evento: @MainActivity.java_events -> {"eventName":"onClick","eventType":1,"targetId":"_fab","targetType":16}
   • Encabezado del bloque de lógica: @MainActivity.java__fab_onClick

---

7. Protocolo de Integración entre Skills

• Con sketchware-events-manager: Cada vista interactiva (Button, EditText, ImageView, ListView, _fab) creada aquí se referencia en data/logic mediante su id y targetType para los listeners de clic, cambio y elementos.
• Con sketchware-blocks-engine: Los IDs de las vistas se pasan como parámetros en los bloques de UI (ej. setText, getText, setVisible, setImageUrl).
• Con sketchware-project-generator: Las cadenas JSON de las vistas generadas se combinan bajo sus respectivos encabezados @<pantalla>.xml y se cifran en data/view.