Aula_5

Prévia do material em texto

PROGRAMAÇÃO PARA DISPOSITIVOS 
MÓVEIS - CCT0697
PROFESSOR: LUCAS SAMPAIO LEITE
- Imagine que você vai criar uma aplicação para armazenar uma agenda de contatos.
1. Crie um projeto e uma actvity que receberá o dados dos contatos a serem registrados. Esta classe 
deve receber o nome do contato, seu endereço, telefone e email.
Utilize os componentes vistos em sala (TextView, EditText, Button) ou quaisquer que ache que se 
ajusta melhor.
2. Ao final dos preenchimento dos dados o usuário deve clicar no botão de salvar.
3. Quando clicado, os dados salvos devem ser apresentados em uma segunda activity.
E o nosso exercício?
Layouts e widgets
 O layout define a estrutura de uma interface do usuário no aplicativo, como 
acontece na activity. 
 Todos os elementos do layout são criados usando a hierarquia de objetos View
e ViewGroup. 
 A View geralmente desenha algo que o usuário pode ver e com que pode 
interagir. Já um ViewGroup é um contêiner invisível que define a estrutura do 
layout para View e outros objetos ViewGroup.
https://developer.android.com/guide/topics/ui/declaring-layout?hl=pt-br
Layouts e widgets
Layouts e widgets
 Os objetos View geralmente são chamados de "widgets" e podem ser uma das 
muitas subclasses, como Button ou TextView. 
 Os objetos ViewGroup geralmente são chamados de layouts e podem ser de 
um dos muitos tipos que fornecem uma estrutura de layout diferente, como 
LinearLayout ou ConstraintLayout.
Layouts e widgets
 Um layout pode ser declarado de duas maneiras:
 Declarar elementos da IU em XML. O Android fornece um vocabulário XML direto 
que corresponde às classes e subclasses de visualização, como as de widgets e 
layouts.
Também é possível usar o Layout Editor do Android Studio para criar o layout XML 
usando uma interface de arrastar e soltar.
 Instanciar elementos do layout no momento da execução. O aplicativo pode criar 
objetos View e ViewGroup (e processar suas propriedades) programaticamente.
Layouts e widgets
 Ao declarar a IU no XML, é possível separar a apresentação do seu aplicativo do 
código que controla o comportamento dele. 
 O uso de arquivos XML também facilita conseguir layouts diferentes para 
diferentes orientações e tamanhos de tela. 
 A biblioteca do Android oferece flexibilidade para usar um ou ambos os 
métodos para criar a IU do seu aplicativo. Por exemplo, é possível declarar os 
layouts padrão do aplicativo em XML e, em seguida, modificar o layout no 
momento da execução.
Layouts e widgets
 Usando o vocabulário XML do Android, é possível projetar rapidamente layouts 
de IU e os elementos de tela, do mesmo modo que se cria páginas Web em 
HTML - com uma série de elementos aninhados.
 Cada arquivo de layout deve conter exatamente um elemento raiz, que deve 
ser um objeto View ou ViewGroup. Com o elemento raiz definido, é possível 
adicionar objetos ou widgets de layout extras como elementos filho para 
construir gradualmente uma hierarquia de View que define o layout. 
Layouts e widgets
Layouts e widgets
 Ao compilar o aplicativo, cada arquivo de layout XML é compilado em um 
recurso View. Deve-se carregar o recurso de layout do código do aplicativo na 
implementação de callback Activity.onCreate(). 
 Usa-se setContentView(), passando a referência para o recurso de layout na 
forma: R.layout.layout_file_name.
 Um layout define a estrutura visual e organiza os componentes gráficos para 
compor a interface do usuário.
 Existem diversos tipos de layout em Android. Em geral 4 tipos de layouts são os 
mais utilizados:
 LinearLayout
 ConstraintLayout
 RelativeLayout
 TableLayout
Layouts e Widgets
LinearLayout
 LinearLayout é um grupo de visualizações que alinha todos os filhos em uma 
única direção vertical ou horizontal. Você pode especificar a direção do layout 
com o atributo android:orientation.
LinearLayout
 Todos os filhos de um LinearLayout são empilhados um após o outro. 
 Portanto, uma lista vertical terá somente um filho por linha, 
independentemente da largura, e uma lista horizontal terá altura de apenas uma 
linha (a altura do filho mais alto, mais preenchimento). 
 Um LinearLayout respeita margens entre filhos e a gravidade (alinhamento à 
direita, no centro ou à esquerda) de cada filho
LinearLayout
 Distribuição igual:
Para criar um layout linear em que cada filho usa a mesma quantidade de 
espaço na tela, defina android:layout_height de cada visualização como 
"0dp" (para um layout vertical) ou a android:layout_width como "0dp" (para 
um layout horizontal). Em seguida, defina a android:layout_weight de cada 
visualização como "1".
LinearLayout
 Distribuição desigual:
 Você também pode criar layouts lineares em que os elementos filhos usam 
diferentes quantidades de espaço na tela:
 Se houver três elementos view e dois deles tiverem uma ponderação 1, enquanto o terceiro 
não tiver ponderação, o terceiro campo de texto não será expandido. Em vez disso, esse 
terceiro view ocupará somente a área exigida pelo conteúdo. Os outros dois campos se 
expandirão igualmente para preencher o espaço restante depois que os três campos forem 
medidos.
 Se houver dois view, ambos com uma ponderação 1, enquanto o terceiro tiver uma 
ponderação 2, o último será declarado mais importante que os outros e ficará com metade 
do espaço total restante, enquanto os dois primeiros compartilharão o resto igualmente.
LinearLayout
ConstraintLayout
 O ConstraintLayout permite criar layouts grandes e complexos com uma 
hierarquia de visualização plana (sem grupos de visualização aninhados). 
ConstraintLayout
 Ele é semelhante a RelativeLayout: todas as visualizações são dispostas de 
acordo com as relações entre visualizações irmãs e layout pai, mas são mais 
flexíveis que RelativeLayout e mais fáceis de usar com o Layout Editor do 
Android Studio.
 Todo o poder do ConstraintLayout está disponível diretamente nas ferramentas 
visuais do Layout Editor.
ConstraintLayout
Para definir a posição de uma visualização no ConstraintLayout, adicione pelo 
menos uma restrição horizontal e uma vertical para a visualização.
 Cada restrição representa uma conexão ou alinhamento para outra 
visualização, o layout pai ou uma linha guia invisível. 
ConstraintLayout
RelativeLayout
 RelativeLayout é um grupo de visualizações que exibe visualizações filhas em 
posições relativas. A posição de cada visualização pode ser especificada como 
relativa a elementos irmãos (por exemplo, à esquerda ou abaixo de outra 
visualização) ou em posições relativas à área RelativeLayout pai (por exemplo, 
alinhado à parte inferior, à esquerda ou no centro).
RelativeLayout
 Um RelativeLayout é um utilitário muito eficiente para projetar uma interface 
de usuário, porque ele pode eliminar grupos de visualização aninhados e manter 
a hierarquia de layout plana, o que melhora o desempenho. 
 Se você estiver usando vários grupos aninhados de Linear Layout, poderá 
substituí-los por um único RelativeLayout.
RelativeLayout
 RelativeLayout permite que as visualizações filhas especifiquem a posição delas 
em relação à visualização pai ou entre si (especificadas pelo código). 
 Assim, você pode alinhar dois elementos pela borda direita ou deixar um 
abaixo do outro, centralizado na tela, centralizado à esquerda e assim por 
diante. 
 Por padrão, todas as visualizações filhas são desenhadas no canto superior 
esquerdo do layout. Portanto, precisa-se definir a posição de cada visualização 
usando as diversas propriedades de layout disponíveis em 
RelativeLayout.LayoutParams.
RelativeLayout
https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams
RelativeLayout
 O valor de cada propriedade de layout é um booleano para ativar uma posição 
de layout em relação ao RelativeLayout pai ou um ID que referencia outra 
visualização no layout em que a visualização tem que ser posicionada.
 No layout XML, as dependências em relação a outras visualizações no layoutpodem ser declaradas em qualquer ordem. Por exemplo, você pode declarar 
que "visualização1" está posicionada abaixo de "visualização2", mesmo que 
"visualização2" seja a última visualização declarada na hierarquia. 
RelativeLayout
GridLayout
 TableLayout é um ViewGroup que exibe elementos filhos de View em linhas e 
colunas.
 No Android existem diversos tipos de componentes gráficos (Widgets):
 TextView: Mostra um texto na tela. É com certeza o componente gráfico mais usado em Android. 
 ImageView: Mostra uma imagem ou simplesmente uma janela na tela. Toda vez que você for 
mostrar uma imagem ou mostrar ao usuário uma janela colorida, por exemplo, esse componente 
será usado.
 EditText: obtém um texto digitado pelo usuário, que poderá ser usado para interagir com a 
aplicação Android.
 Button: Este componente é um dos mais comuns em qualquer sistema de layout. Neste 
componente, uma ação é executada após um clique ser dado nele.
 CheckBox: Um componente que basicamente possui dois valores: verdadeiro ou falso. Muito 
usado para representar configurações do sistema.
 Outros: RadioGroup, ListView, GridView, Spinner, SeekBar, etc...
 Para que estes esteja organizados e apareçam na tela do dispositivo eles precisam 
está inseridos em um Layout.
Layouts e Widgets
 Algumas das propriedades importantes:
 android:textSize -> define o tamanho do texto. 
 android:textColor -> define a cor do texto.
 android:textStyle -> define o estilo do texto
 android:hint -> define o texto de dica a ser exibido quando o texto estiver vazio. 
 android:gravity -> especifica o alinhamento pelo eixo x e/ou y.
 android:background -> muda a cor de background
 android:size -> define o tamanho do componente
 android:padding -> define o tamanho de padding
 android:margin -> define o tamanho da margem
 android:onclick -> define a assinatura do evento de click
Layouts e Widgets
Exercício: vamos usar a criatividade para 
criar layouts?
- Escolher um dos modelos e tentar reproduzir.
Dúvidas