Aula 06 App Bem Vindo Desenvolvedor Android

Prévia do material em texto

Prof. Milton Escóssia 
2018 
PROGRAMAÇÃO PARA 
DISPOSITIVOS MÓVEIS - CCT0080 
Aula – 6 App Bem Vindo Desenvolvedor Android 
O App Bem Vindo Desenv. Android 
 Objetivo: 
 Cria um projeto Android no Android Studio composto por 
Texto e Imagem. 
 Aprofundar os conhecimentos sobre componentes View. 
 RelativeLayout 
 LinearLayout 
 TextView 
 ImageView 
 Apresentar a manipulação de imagens. 
 Compreender as unidades de dimensionamento do 
Android. 
 Fazer uso de mensagens do recurso strings.xml. 
Tela Inicial – Iniciando a criação do projeto. 
Clique aqui para iniciar 
um novo projeto Android. 
Dados para criação do projeto Android 
 Application Name: 
 App Bem Vindo Desenv Android 
 Company Domain: 
 pdm.br.estacio.fic.appbemvindo 
 Package Name: 
 pdm.br.estacio.fic.appbemvindo 
 
 Target Android Device: 
 Phone and Table 
 Minimum SDK: 
 API 18: Android 4.3 (Jelly Bean) 
 
 
 
 
 
 
 
Dados para criação do projeto Android 
 Activity Template: 
 Empty Activity 
 
 Activity Name: 
 AppBemVindoDesenvAndroidActivity 
 
 Layout Name: 
 activity_bem_vindo 
 
 
 
 
 
 
Definindo o Gerenciador de Layout 
Definindo o Gerenciador de Layout 
Adicionando Widgets ao Layout 
Adicionando uma Imagem ao ImageView 
Adicionando uma Imagem ao ImageView 
Adicionando Widgets ao Layout 
A Árvore de Componentes da Tela 
O Layout no modo texto 
Definindo o Texto de Forma Indireta 
Definindo o Texto de Forma Indireta 
Definindo o Texto de Forma Indireta 
Definindo o Texto de Forma Indireta 
Definindo o Texto de Forma Indireta 
Configurando o componente TextView 
Alinhando o texto do TextView 
Configurando a imagem do ImageView 
Ajustando o tamanho da imagem no 
ImageView 
Executando a aplicação no Emulador 
1 2 
Executando a aplicação no Emulador 
Resultado 
Explicando o que foi feito 
 
Editor Gráfico de Layout 
Palleta de Componentes View 
ViewGroups 
(Gerenciadores de Layout) 
Widgets 
(Componentes UI) 
Hide 
Barra de Ferramentas do Editor Gráfico 
Barra de Ferramentas 
Barra de Ferramentas do Editor Gráfico 
Barra de Ferramentas do Editor Gráfico 
Barra de Ferramentas do Editor Gráfico 
Barra de Ferramentas do Editor Gráfico 
Barra de Ferramentas do Editor Gráfico 
Barra de Ferramentas do Editor Gráfico 
Barra de Ferramentas do Editor Gráfico 
Barra de Ferramentas do Editor Gráfico 
Gravity 
Barra de Ferramentas do Editor Gráfico 
Configura a propriedade 
layout_width para 
wrap_content 
Configura a Propriedade 
layout_height para 
wrap_content 
Zoom In Zoom Out 
Barra de Ferramentas do Editor Gráfico 
Zoom In Zoom Out 
Zoom Fit 
Zoom 100% 
Barra de Ferramentas do Editor Gráfico 
Jump to 
Source 
Refresh 
Options 
Janela de Árvore de componentes 
Janela de Propriedades 
Construindo a Interface do Usuário 
 Consiste em determinar o gerenciador de layout e 
os componentes da UI. 
Componentes de UI Android 
 Uma tela de uma app Android é composta por 
View e ViewGroup. 
 
 O Android fornece widgets para auxiliar a 
construção da GUI. 
Estrutura de Classes da View e ViewGroup 
TextView ImageView ViewGroup 
LinearLayout FrameLayout GridView Button EditText 
. . . 
TableLayout 
View 
. . . 
View e ViewGroup 
 View: são os componentes da UI 
 ViewGroup: representa as classes de layout. 
ViewGroup 
View 
Exemplo de Layout de Telas 
Exemplo de Layout de Telas 
Exemplo de Layout de Telas 
Telas no Android 
 Uma tela pode se criada de 2 formas básicas no 
Android, usando Java: 
 Declarativa 
 Estática 
 Realizado em tempo de edição 
 Especificação via tag e atributos xml 
 
 Programática 
 Dinâmica 
 Realizado em tempo de execução 
 Via código java. 
Telas no Android 
 Declarativa - através de especificação do layout em 
um arquivo XML. 
 
Especificação Layout forma Declarativa 
Telas no Android 
 Programática - através da codificação usando a API 
do Android (similar a API Swing do Java). 
Displays x Pixels 
 A tela (display) é constituído por pequenos pontos 
chamados de PIXEL, dispostos em forma de uma grid 
(grade). 
 
 
 
 
 
 
 
 Os pixels são dispostos na horizontal da esquerda para a 
direita(eixo x) e na vertical de cima para baixo(eixo y). 
 
PIXEL 
Sistema de Coordenadas Android 
Resolução de um Display 
 A resolução de um display corresponde ao número 
de pixels da horizontal pelo número de pixels da 
vertical. 
 O total de pixels existente no display. 
 Quanto maior melhor a resolução. 
 
 Ex: Uma resolução de 320 x 480. 
 
Tamanho de um Display 
 O tamanho de um display 
(celular, smartphone, tablet, 
laptop, pc ou tv) é comumente 
dado em polegadas. 
 
 1 pol = 2.54 cm 
Densidade de um Display 
 A densidade de um display é medido em PPI - Pixels 
Per Inch (Pixels por polegada). 
 
 Corresponde ao número de pixels que cabem em uma 
polegada. Quanto maior o número mais nítida as 
imagens serão exibidas no diplay. 
 
 Muitas vezes é medido em DPI (Dots Per Inch) 
 
 PPI para displays, DPI para impressoras. 
 
 Para dispositivos Android PPI = DPI. 
Densidade de um Display 
 Quanto maior a densidade de uma tela (pixel 
density) mais pixels existem em uma determinada 
área do display. 
 
 Dispositivos antigos eram de baixa densidade (low 
density) 
 Dispositivos atuais são de altíssima densidade (high 
density) 
Densidade de um Display 
Densidades de Display de Dispositivos 
Móveis 
Tipos de Resoluções no Android 
Tipos de Resoluções no Android 
Unidades de Medida no Android 
 unidade de medida - Utilizado para definir os 
limites do elemento e de seu tamanho no layout. 
 
 wrap_content - Ajusta o tamanho do componente para 
se adequar ao tamanho original de seu conteúdo. 
 
 match_parent (fill_parent nas versões anteriores) – 
Ajusta o tamanho do componentes de forma a "igualar" 
os limites do elemento para seu elemento pai, usando o 
máximo permitido espaço. 
 Permite que o elemento ocupe o tamanho máximo que o 
componente pai permite, e ajusta o tamanho do elemento, se 
necessário. 
 
Unidades de Medida no Android 
Unidades de Dimensionamento 
 px - Um pixel real na tela. 
 É dependente da densidade. 
 O tamanho físico de um único "px" varia dependendo da 
densidade da tela. 
 
 em - Uma polegada física na tela. 
 É independente da densidade. 
 O tamanho físico de um único "nó" é o mesmo em cada 
densidade de tela. 
Unidades de Dimensionamento 
 mm - Um milímetro físico na tela. 
 É independente da densidade. 
 O tamanho físico de um único "mm" é o mesmo em cada 
densidade de tela. 
 Há “25.4mm" em uma polegada. 
 O número de pixels num único "mm" traduz a densidade varia 
dependendo tela. 
 
 pt - Um ponto, uma unidade de tamanho de fonte comum, na 
tela. 
 É independente da densidade. 
 O tamanho físico de um único "PT" é o mesmo em cada 
densidade de tela. 
 Há “72 pt" em uma polegada. 
 O número de pixels num único "PT" traduz a densidade varia 
dependendo tela. 
Unidades de Dimensionamento 
 dp - Um pixel independente da densidade. 
 É independente da densidade. 
 O tamanho físico de um único "DP"é aproximadamente 
a mesma densidade em cada tela. 
 Há aproximadamente “160 dp" em uma polegada. 
 O número de pixels num único "DP" varia dependendo 
da densidade de pixel na tela. 
Unidades de Dimensionamento 
 sp - Um pixel independente da escala. 
 Especialmente designado para tamanhos de texto. 
 É independente da densidade. 
 O tamanho físico de um único "SP" é aproximadamente a 
mesma densidade em cada tela. 
 O número de pixels varia de acordo com a densidade da 
tela. 
Tipos de dimensões no Android 
Fonte: http://www.gargasz.info/android/ 
Texto x Unidades de Dimensionamento 
Views do tipo ViewGroup 
 ViewGroup 
 Representa um repositório virtual onde as views são 
“depositadas”. 
 Tem como objetivo gerenciar e organizar a aparência 
da interface do usuário. 
 Estabelece a disposição (layout) dos componentes 
do Android em uma tela. 
 
Construção do Layout de tela com 
ViewGroup 
 A construção de uma tela inicia com a determinação 
de um ViewGroup. 
 É um tipo especial de view. 
 Permite agrupar uma ou mais componentes view. 
 Permite organizar a aparência e a sequencia dos 
componentes view de uma tela. 
 
 Uma tela pode conter um ViewGroup, ou a 
combinação de diferentes tipos de ViewGroup. 
Organização dos componentes de uma tela 
Widget do tipo ViewGroup 
 Tipos de ViewGroup 
 LinearLayout 
 RelativeLayout 
 AbsoluteLayout 
 TableLayout 
 FrameLayout 
 ScrollView 
 etc 
Widget do tipo ViewGroup 
RelativeLayout 
 Organiza os componentes através de 
relacionamentos entre si ou ao seu pai. 
 o atributo below, informa que o componente deve ser 
posicionado embaixo de outro componente view. 
 
 Importante: 
 caso um componente referencie (por meio da 
propriedade below, por exemplo) algum outro 
componente, este primeiro deve obrigatoriamente ser 
definido antes (definindo um nome no atributo android:id), 
caso contrário ocorrerá um erro em sua estrutura de 
layout. 
RelativeLayout 
LinearLayout 
 Permite o posicionamento das Views de forma 
linear. 
 Orientações permitidas: 
 Vertical 
 Horizontal 
 Tag: 
 <LinearLayout> 
 Atributo: 
 android:layout_orientation 
LinearLayout 
Widget do tipo View 
 View 
 Elementos gráficos de uma tela de interação com o 
usuário. 
 Componentes gráficos como botões, caixas de 
entrada de dados, combos, etc. 
 
 Tipos de view: 
 TextView 
 ImageView 
 EditText 
 Button 
 CheckBox 
 RadioButton 
 TaggedButton 
 RadioGroup 
 Etc. 
TextView 
 Representa um texto a ser exibido na tela. 
 Funciona como um Label (“rotulo”) 
 um título a ser exibido, 
 exibir alguma informação, mensagem e etc. 
 Propriedades: 
 “android:text” 
 
TextView - Propriedades 
View ImageView 
 Componente que permite a visualização de imagens 
dentro dele. 
 
 Suporta imagens no formato JPEG, GIF e PNG. 
 
 A propriedade “src” (source) identifica qual o arquivo 
de imagem a ser exibido. 
 Faz uso da notação @drawable para indicar o arquivo de 
imagem a ser exibido. 
Exemplo 
Exemplo 
Copiando uma imagem para o Projeto 
Android 
Colando a imagem no Projeto Android 
Copiando uma imagem para o Projeto 
Android 
Geração Automática de Clones para cada 
resolução de tela 
Exercício 
 Refaça o exemplo, porém utilize o ViewGroup 
RelativeLayout. 
 
 Ao final compare o resultado obtido com o do 
exemplo. 
 Esforço para diagramação 
 Facilidade de dispor os componentes no layout. 
 
 Facilidade de uso 
 Ocorreu algum problema de desalinhamento? 
 
 Aparência final da tela 
 ficou a mesma do exemplo ? 
 
Quiz 
 Porque em um layout é necessário definir um 
Viewgroup ? 
 
 Para que necessitamos de widgets na UI ? 
 
 Qual a relação entre Viewgroup e Widget? 
 
 Pra que serve um TextView ? 
 
Quiz 
 As medidas de layout match_parent e wrap_content 
são a mesma coisa ? 
 
 A unidade de dimensionamento DP é indicada para 
determinar o tamanho de textos no layout ? 
 
 Um ImageView é útil para ... ? 
 
 Qual a diferença entre um RelativeLayout e um 
LinearLayout ?