Prática 2: Ajustando a Interface para Diversos Dispositivos e Orientações

Assista e acompanhe a prática em sala dos exercícios "Ajustando a Interface para Diversos Dispositivos e Orientações". Execute as instruções conforme a apresentação.

Exercício 1. Ajustando a Tela de Início

1.1. Abra o arquivo Main.Storyboard localize e selecione a tela de Início

1.2. Altere o size classes para Any Width | Compact Height

1.3. Exclua a Constraint de Height desta size class

1.4. Inclua uma nova Constraint de Height com 100 pontos

1.5. Selecione o Controle de Início da Sessão

1.6. Remova as Constraints originais deste Size Class

Remova as constraints:

• Align Center X to: Superview
• Bottom Space to: Escolha sua Atividade Equals: 8

1.7. Adicione as novas Constraints ao componente

Adicione as seguintes Constraints ao controle de início:

• Leading Space to: Superview - 8

1.8. Selecione o botão de Seleção de Atividades

1.9. Remova as Constraints originais deste Size Class

Remova as constraints:

• Leading Space to: Superview Equals: 16
• Trailing Space to: Superview Equals: 16

1.10. Reposicione e Redimensione o Controle ao lado do botão de Inicio e inclua as Constraints

Com o botão posicionado ao lado do botão de Início inclua as Constraints:

• Leading Space to: Button Equals: 8
• Trailing Space to: Superview
• Align Center Y to: Button

1.11. Ajuste a propriedade Content Hugging Priority

Ajuste a propriedade Horizontal em Content Huggins Priority para 249.

1.12. Ajuste a posição do Botão de Início e a cor de Fundo

Ajusta a posição do botão de início no Document Outline de forma que ele fique a frente do Label para sobrepor. Ajuste a cor de fundo do botão de início para que ela seja transparente.