AndroidForgeHQ/sketchware-layout-designer

Skill de Designer de Layout Sketchware

Visão Geral

Este skill é especializado em criar e gerenciar a camada de interface do usuário de projetos Sketchware Pro. Ele produz as especificações JSON exatas necessárias para data/view em pacotes de backup .swb e fornece suporte completo para hierarquia de widgets, estilização, layouts responsivos e botões de ação flutuante (FAB).

---

1. Estrutura de Arquivos no Arquivo de Backup

Em um projeto Sketchware ou arquivo .swb, todos os layouts de tela são combinados em um único arquivo criptografado AES: data/view.

Cabeçalhos de Seção de Múltiplas Telas e Seções

Os layouts são divididos por marcadores de seção:

• @<activity_xml_name>.xml (ex: @main.xml, @home.xml)
• @<activity_xml_name>.xml_fab (para atividades com um Botão de Ação Flutuante)
• @<custom_view_name>.xml (para Visualizações Personalizadas usadas em ListViews/Spinners)

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

@main.xml_fab
<ViewBean JSON para FAB>

@item_row.xml
<ViewBean JSON para itens de visualização personalizada>

---

2. Esquema JSON ViewBean e Campos Obrigatórios

Cada elemento de interface do usuário é uma string JSON de linha única representando um 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 e Layout

Tipo Int	Classe Widget / Layout	String convert	Descrição
0	LinearLayout	LinearLayout	Contêiner linear (Horizontal ou Vertical)
1	RelativeLayout	RelativeLayout	Contêiner relativo
2	HorizontalScrollView	HorizontalScrollView	Contêiner de rolagem horizontal
3	Button	Button	Botão de pressão interativo
4	TextView	TextView	Rótulo de exibição de texto
5	EditText	EditText	Campo de entrada de texto
6	ImageView	ImageView	Contêiner de imagem
7	WebView	WebView	Navegador / quadro web no aplicativo
8	ProgressBar	ProgressBar	Indicador de carregamento circular ou horizontal
9	ListView	ListView	Lista vertical de itens rolável
10	Spinner	Spinner	Lista de seleção suspensa
11	CheckBox	CheckBox	Caixa de seleção de dois estados
12	ScrollView	ScrollView	Contêiner de rolagem vertical
13	Switch	Switch	Interruptor de alternância de dois estados
14	SeekBar	SeekBar	Controle deslizante de valor arrastável
15	CalendarView	CalendarView	Calendário mensal interativo
16	FloatingActionButton	FloatingActionButton	FAB Material padrão (na seção _fab)
17	AdView	AdView	Banner do Google AdMob
18	MapView	MapView	Contêiner do Google Maps

---

4. Regras de Hierarquia e Parentesco (CRÍTICO)

1. Visualizações de Nível Raiz:
   • Para elementos anexados diretamente à base da tela, defina "parent": "root".
   • Defina "parentType": 0 (ou -1 para FAB).
2. Visualizações Filhas em Contêineres:
   • Defina "parent": "<id_do_container>" (ex: "parent": "linear_main").
   • Defina "parentType": <int_do_tipo_do_container> (ex: 0 para LinearLayout).
3. Ordenação por Índice:
   • "index" DEVE ser 0, 1, 2, 3... sequencialmente entre irmãos que compartilham o mesmo "parent".
4. Dimensões do Layout:
   • MATCH_PARENT: -1
   • WRAP_CONTENT: -2
   • DP exato: inteiro positivo (ex: 48 para 48dp).
5. Orientação do LinearLayout:
   • Horizontal: "orientation": 0
   • Vertical: "orientation": 1
   • Widgets que não são contêineres: "orientation": -1

---

5. Estilização, Cores e Tipografia

• ARGB Hex para Inteiro com Sinal de 32 bits: O Sketchware armazena cores como inteiros com sinal de 32 bits:
  • Transparente / Padrão: 16777215 (0x00FFFFFF)
  • Preto (#FF000000): -16777216
  • Branco (#FFFFFFFF): -1
  • Azul Primário do Sketchware (#FF008DCD): -16740915
  • Vermelho de Acento Material (#FFFF4081): -49023
  • Cinza Material (#FF9E9E9E): -6381922
• Estilos de Texto (textType):
  • 0: Normal
  • 1: Negrito
  • 2: Itálico
  • 3: Negrito Itálico
• Tipos de Entrada (inputType para EditText):
  • 1: Texto Normal
  • 2: Texto (Sem sugestões)
  • 33: Endereço de Email (TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
  • 129: Senha (TYPE_TEXT_VARIATION_PASSWORD)
  • 2: Número (TYPE_CLASS_NUMBER)
  • 3: Telefone (TYPE_CLASS_PHONE)
• Tipos de Escala (scaleType para ImageView):
  • "CENTER", "CENTER_CROP", "CENTER_INSIDE", "FIT_CENTER", "FIT_START", "FIT_END", "FIT_XY"

---

6. Configuração do Botão de Ação Flutuante (FAB)

Se uma Atividade ativar o FAB:

1. Em data/file (@activity), defina "options": 1 (ou bitmask com FAB).
2. Em data/view, adicione uma entrada sob @<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. Em data/logic, o evento de clique vincula-se ao alvo _fab:
   • Cabeçalho do evento: @MainActivity.java_events -> {"eventName":"onClick","eventType":1,"targetId":"_fab","targetType":16}
   • Cabeçalho do bloco lógico: @MainActivity.java__fab_onClick

---

7. Protocolo de Integração entre Skills

• Com sketchware-events-manager: Cada visualização interativa (Button, EditText, ImageView, ListView, _fab) criada aqui é referenciada em data/logic por meio de seu id e targetType para listeners de clique, alteração e item.
• Com sketchware-blocks-engine: Os IDs das visualizações são passados para parâmetros de blocos de interface do usuário (ex: setText, getText, setVisible, setImageUrl).
• Com sketchware-project-generator: As strings JSON de visualização geradas são combinadas sob seus respectivos cabeçalhos @<screen>.xml e criptografadas em data/view.