Aula 05 - Interface Gráfica (UI) 🎨

🏗️ A Hierarquia de Views

No Android, tudo o que você vê é baseado em uma árvore de elementos.

graph TD
    Root[ViewGroup / Layout] --> Child1[TextView]
    Root --> Child2[Button]
    Root --> InnerVG[LinearLayout]
    InnerVG --> GrandChild[ImageView]

🧱 Views vs ViewGroups

View: O átomo da interface (Botão, Campo de Texto, Imagem).
ViewGroup: O esqueleto que organiza os átomos (LinearLayout, ConstraintLayout).

📏 Unidades: dp vs sp

Regra de ouro: NUNCA use px.

dp (Density-independent Pixels): Para tamanhos e margens.
sp (Scale-independent Pixels): Para textos.

📐 LinearLayout

O mais simples. Organiza itens em fila.

Vertical: Um abaixo do outro.
Horizontal: Um ao lado do outro.
Peso (layout_weight): Útil para preencher espaço proporcionalmente.

⚓ ConstraintLayout

O padrão da indústria moderna.

Baseado em restrições (amarras).
Evita aninhamento de layouts (performance 🚀).
Flexível e responsivo para qualquer tamanho de tela.

Exemplo: Botão centralizado

<Button
    android:id="@+id/btnCentro"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

🖼️ ImageView & Drawable

Como exibir imagens?

Use vetores (SVG -> Vector Drawable) sempre que possível.
Formatos bitmap (PNG/JPG) aumentam o tamanho do app.
Escala: scaleType="centerCrop" vs fitCenter.

⌨️ Entrada de Dados: EditText

Use inputType="textPassword" para senhas.
Use inputType="emailAddress" para teclados customizados.
Dica: TextInputLayout (Material Design) dá um visual premium.

💅 Temas e Estilos

Não repita código! Centralize o estilo.

<style name="BotaoRosa">
    <item name="android:backgroundTint">@color/pink</item>
</style>

🆚 Android XML vs iOS Auto Layout

Recurso	Android	iOS
Pai	ViewGroup	UIView
Logic	Layout Params	Constraints
Unidade	dp	points
Arquivo	.xml	.storyboard / .xib

🔗 ViewBinding na Prática

Adeus findViewById!

// Inicialização no onCreate
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)

// Uso
binding.btnSalvar.setOnClickListener { ... }

🖱️ Eventos de Clique

binding.myButton.setOnClickListener {
    Toast.makeText(this, "Clicou!", Toast.LENGTH_SHORT).show()
}

♿ Acessibilidade

O Android deve ser para todos.

contentDescription: OBRIGATÓRIO para imagens (leitores de tela).
Cores: Contraste adequado.
Tamanhos: Botões com pelo menos 48dp de área de toque.

🛠️ Desafio da Aula: Tela de Cadastro

Crie uma tela com: 1. Nome (EditText) 2. E-mail (EditText) 3. Senha (Password) 4. Botão "Salvar" 5. Use ConstraintLayout para posicionar tudo.

🧪 Preview de Layout

O Android Studio permite testar seu layout em diferentes dispositivos (Pixel, Tablets, Dobráveis) sem rodar o app.