Minicurso de Android Básico I - Dia 2

Minicurso Básico de Android – 2º Dia
Thales Levi Azevedo Valente

Apresentação
• Thales Levi Azevedo Valente
– selaht7@gmail.com
– Bacharel em Ciência da Computação – UFMA
– Pesquisador em:
• Processamento de Imagens
• Android
– Lattes:
• http://lattes.cnpq.br/1509490497932923
(28/05 - 03/07)/2015 2Thales Levi Azevedo Valente - UFMA

O trabalho Minicurso de Android Básico I (este trabalho), bem como suas outras partes
(referente também aos dias 2, 3 e 4), de Thales Levi Azevedo Valente está licenciado com
uma Licença Creative Commons - Atribuição-NãoComercial-SemDerivações 4.0
Internacional. Para ver uma cópia desta licença, visite
http://creativecommons.org/licenses/by-nc-nd/4.0/.
• Você é livre para:
– Copiar, distribuir o material
• Sobre as seguintes condições:
– Atribuição de créditos: você deve fazer referência ao autor
– Não-comercial: você não deve usar este material para propósitos comerciais
– Não-Derivados: Se você criar trabalhos derivados deste, você não deve distribuí-lo.
Termos de uso deste material
(28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 3

Roteiro 2º Dia
• Gerenciadores de
Layout
• AbsoluteLayout
• LinearLayout
• RelativeLayout
• TableLayout
• ScrollView
• Widgets – Componentes de
Interface
• Views
• TextView
• EditText
• ImageView
• ScaleTypes
• Button
• CheckBox
• RadioGroup
• Spinner
• ArrayAdapter

Widgets – Componentes de Interface

• Unidade básica de componentes de interface com o usuário no
Android (superclasse dos widgets)
• Ocupa uma área retangular na tela
• Responsável por elaboração e captura de eventos relacionados a si
mesmo
• Permitem instância em XML ou Java. São exemplos de subclasses:
Views
 TextView
 EditText
 ImageView
 Button
 CheckBox
 Spinner
 RadioGroup
 RadioButton

• Permite exibir textos estáticos na tela
• Por padrão, não permite edição de texto
• Alguns atributos:
– text : define o texto que seria exibido no componente.
– textStyle : define o estilo do texto. As opções possíveis são negrito, itálico e normal.
– fontFamily : especifica a família da fonte do texto.
– typeFace : define o tipo de letra para o texto. Os valores possíveis são normal, sans, serif e
espaçamento fixo.
– textSize : define o tamanho do texto. Recomenda-se a utilização sp para o tamanho.
– textColor : define a cor do texto. Definida em hexadecimal ou como uma referência a outro recurso.
– background : define a cor de fundo do texto. Definido da mesma forma descrito anteriormente.
– lines : define a altura exata do TextView em linhas.
– clickable : indica se a exibição reage a eventos click.
– autoLink : identifica os links no texto e os converte em clicáveis (web, email, telefone).
TextView

TextView
TextViews instanciados em Java
TextViews instanciado em XML
O primeiro TextView foi gerado em XML e
os seguintes gerados dinâmicamente

• Como boa prática, você deve utilizar o recurso strings.xml ao invés de colocar o
texto diretamente num TextView.
• Isso se aplica a qualquer outro componente de interface que tem região
textual. Ex:
Regiões Textuais e o recurso Strings.xml
Quando o texto é inserido diretamente na região textual, é sugerido a você
usar o recurso Strings.xml. Mas, se você optar por não seguir a sugestão, seu
código funcionará sem problemas.

Regiões Textuais e o recurso Strings.xml
Localização, no projeto, do recurso
strings.xml
Exemplo de como adicionar uma string no arquivo string.xml
formato: <string name= “frase identificadora”> frase que aparecerá na região textual </string>
Exemplo de como utilizar um recurso de string. Compare com o
slide anterior

• Permite que o usuário insira valores por meio de teclado físico ou
virtual.
• Alguns atributos:
– Hint: texto explicativo que diz o que deve ser inserido no componente
– Text: texto simples
– inputType
• textCapCharacter: texto com todas as letras em maiúsculo
• textEMailAddress: usado para campos de e-mail
• textPassword: usado para campos de senha
• Number: permite apenas números (sem sinais)
• numberSigned: permite apenas números (com sinais)
• Phone: usado para digitação de números de telefone
EditText

• No slide 37 tem exemplos de como definir em XML. Este caso
especificamente refere-se ao EditText de e-mail. Para se obter o que
foi digitado pelo usuário, em código, faça:
EditText
1- recupero o objeto pelo seu ID (o ID é opcional e definido em XML)
2- Pego o texto e converto para String

• Componente que permite exibir imagens
• As imagens podem ser carregadas a partir de:
– Arquivos da galeria de imagens
– Internet
– Da pasta de recursos do aplicativo
– algum tratamento de imagens (edição, processamento, etc)
• Oferece diversas opções de exibição (escala, recorte, etc)
ImageView

• Como usar em XML:
– src: seta a imagem no ImageView.
ImageView

• Como usar em Java:
ImageView
Escale o quanto for necessário em X e/ou Y.
Tem prioridade sobre adjustViewBounds, por
isso não preservou a razão de aspecto

• Como usar em Java:
ImageView
Compare com o slide anterior e comprove ;)

• ScaleTypes e seus resultados
ImageView
Com adjustViewBounds Com os ScaleTypes

• É um componente de interface que consiste em um texto ou ícone
(ou ambos), que comunica qual ação ocorre quando o usuário o toca.
– Para ícone pode-se utilizar ImageButton
Button
ÍconeTexto Texto e Ícone

• Quando o usuário “clica” em um botão, tal botão recebe um evento
de click. Este evento pode ser manipulado de duas maneiras
1. XML:
A. adicione o atributo android:onClick no elemento <Button> e dê um nome ao
método que irá tratar o evento.
B. Crie o método dentro da Activity em que aquele botão está instanciado.
• Deve ser público
• Deve retornar void
• Deve conter como parâmetro uma única View.
Button

2. Usando onClickListener
A. Instancie o botão em tempo de execução ou recupere o botão definido no XML
pelo seu ID.
B. Adicione um onClickListener para o botão.
Button
Obs: mais de um botão pode chamar o mesmo
método que trata o click. Neste caso, você pode
verificar o ID da View antes de tomar alguma
ação.

• Permite ao usuário selecionar uma ou mais opções de um determinado
conjunto.
• Tem que ser verificado quais caixas estão ativadas e/ou desativadas.
CheckBox
Exemplo de CheckBox

CheckBox
Instanciando em XML
Criando uma variável e recuperando o checkbox pelo ID em código
Ao usuário solicitar o total, se o checkBox do lápis estiver verificado, realizo a ação correspondente (no
caso, estou recuperando a quantidade de lápis indicada pelo usuário no campo EditText, multiplicando
pelo preço do lápis e somando ao total – variável resultado)

• Classe usada para agrupar um conjunto de Radio Buttons de tal
forma que não seja permitida múltiplas escolhas.
• Em outras palavras, dentro de um Radio Group, a escolha de um
Radio Button anula a escolha de outro
• Use este componente apenas se você quer mostrar as opções lado a
lado. Senão, considere utilizar Spinner (discutido mais à frente) para
economizar espaço na tela.
• Muito útil para fazer enquetes.
RadioGroup

RadioGroup
Exemplo de utilização de RadioGroup e RadioButtons

RadioGroup
Exemplo anterior definido em XML.
Obs: Não esqueça que em
uma aplicação, como boa
prática, você não deve
colocar o texto diretamente
em um componente textual
e utilizar o recurso
string.xml

RadioGroup
Dando ação ao nosso exemplo

• Provê uma rápida seleção de um elemento dentro de um conjunto
• Por padrão, um spinner mostra apenas o elemento selecionado e
sempre o primeiro elemento é o selecionado incialmente.
• Ao ser tocado, mostra uma lista com os elementos do conjunto, no
qual o usuário seleciona um dos elementos.
Spinner
Exemplo de seleção utilizando Spinner

Spinner
XML
Código

• No geral, adaptadores são classes que fazem ligação entre coleções
de objetos e componentes de interface com o usuário.
• Em seu construtor, informamos 3 parâmetros
1. A Activity em que será instanciada
2. Um recurso de layout (utilizaremos um contido no SDK)
3. Uma coleção de objetos
• Depois de criado, setamos no componente que irá utilizá-lo. No
caso do slide anterior, no Spinner.
ArrayAdapter
Obs: Para acessar recursos já predefinidos presentes no SDK, utilizamos a
classe android.R

• Por último, adicionamos um onItemSelectedListener e
implementamos o método onItemSelected que nos dá acesso:
– ao ArrayAdapter em que a seleção aconteceu
– à View selecionada
– à posição, no adaptador, da View selecionada
– à posição, na linha, do item selecionado.
Spinner

• São elementos que definem como os elementos de interface estarão
organizados na tela ou em porção dela
• Cada um se comporta de um forma específica
• Pode-se aninhar um gerenciador com outro (A contém B)
• Alguns exemplos de gerenciadores:
– AbsoluteLayout
– FrameLayout
– LinearLayout
– RelativeLayout
– TableLayout
– ScrollView
Gerenciadores de Layouts

• Trata a tela como um plano cartesiano
• Posiciona os componentes fornecendo coordenadas x e y.
• Os valores de x crescem da esquerda para direita, e de y de cima
para baixo
• A posição padrão dos objetos é (0,0) – canto superior esquerdo
• Caiu em desuso por devido à sua baixa flexibilidade – é melhor dar
posições relativas do que absolutas, pois há diversos tamanhos de
telas e resoluções e a tela pode mudar a sua horientação
(horizontal/vertical).
AbsoluteLayout

AbsoluteLayout
(x1,y1)
(0,0)
(x5,y5)
(x3,y3)(x4,y4)
(x2,y2)
Exemplo gráfico do uso do AbsoluteLayout

AbsoluteLayout
Situação B - 3,7” 480 x 800 hdpi
Situação A - 4,7” 720 x 1280 xhdpi
Um exemplo de problema utilizando
AbsoluteLayout. Uma posição (x,y)
numa tela maior pode não existir em
uma tela menor

• Um dos gerenciadores e layout
mais utilizados.
• Permite organizar os
componentes de interface de
forma linear.
• Lembra uma organização de
elementos em um vetor.
– Vertical: cada ítem é adicionado
abaixo de seu antecessor
– Horizontal: cada ítem é adicionado
do lado direito de seu antecessor
LinearLayout
View View View View
View
View
View
Horizontal
Vertical

• Posiciona um
componente filho em
relação ao layout pai
ou a outros
componentes filhos
RelativeLayout

• Organiza os componentes através de linhas e colunas (uma tabela).
• Cada linha é uma table row
• As colunas são definidas automaticamente na medida que
adicionamos os componentes em uma table row.
• Cada table row pode ter mais de um componente e cada um será
organizado de forma a parecer que é uma coluna, porém não
aparecerá nenhuma linha informando que é uma coluna
TableLayout

• Primeira TableRow – TextView
• Segunda TableRow – TextView e EditText
• Terceira TableRow – ...
TableLayout

• É um gerenciador com barra de rolagem que permite que
componentes de interface sejam visualizados mesmo que o espaço
ocupado por estes sejam maior que a tela do dispositivo
• Permite apenas um componente filho. Geralmente utiliza-se o
LinearLayout com orientação vertical e constrói-se uma hierarquia
complexa tendo este último como pai.
• Obs: para rolagem horizontal, utilize HorizontalScrollView
(Fazendo um trocadilho, o ScrollView é um avô que quis quer ter apenas um filho! HaHaHa)
ScrollView

ScrollView
Widget
Widget
Widget
Vertical
Widget
Widget
Widget
ScrollView
LinearLayout (ou outro elemento)
Região visível na tela
Região não visível (necessário rolagem)

Dúvidas ?

Até a próxima !

• As imagens utilizadas foram adquiridas, em maior parte, através de
screenshots da tela do computador do próprio autor deste material.
• As imagens especificadas abaixo foram adquiridas através da ferramenta de
pesquisa de imagens da google https://images.google.com/. Todos os créditos
referente a elas são dados aos locais selecionados através de tal ferramenta. Se
você é autor e deseja que as imagens sejam removidas, entre em contato e
será feito.
http://www.appschopper.com/blog/wp-content/uploads/2013/03/Be-the-Pro-with-Best-Books-for-Android-Application-Development-
Banner.jpg
http://radixsmartclass.in/radixtemp/wp-content/uploads/2013/03/android_on_android_classroom_control.jpg
http://vamsystems.com/Images/ContentImages/2015/1/android-banner.jpg
http://3.bp.blogspot.com/-sRZob5WYyes/UzU7MkCOR0I/AAAAAAAACx4/sAlM8OIRrnQ/s1600/android-app-banner.png
http://hd.wallpaperswide.com/thumbs/android_green_background-t2.jpg
http://4.bp.blogspot.com/-OOXne6FICPk/VSGOCJtMm2I/AAAAAAAAABQ/ScOC2wFsnJU/s1600/android.png
http://www.androidcentral.com/sites/androidcentral.com/files/postimages/108579/bugdroid-salute-cropped.png
Referências

• LECHETA, R. R. (2010). Google Android. 2a edição, São Paulo, Novatec.
• LECHETA, R. R. (2012). Google Android Para Tablets - Aprenda a Desenvolver Aplicações
Para o Android de Smartphones a Tablets. 2ª edição, São Paulo, Novatec.
• ANDROID DEVELOPERS. Disponível em:
<http://developer.android.com/develop/index.html.>. Acesso em: junho de 2015.
Referências

Minicurso de Android Básico I - Dia 2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (11)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Minicurso de Android Básico I - Dia 2

Ähnlich wie Minicurso de Android Básico I - Dia 2 (20)

Minicurso de Android Básico I - Dia 2