Minicurso de Android Básico I - Dia 2

354 visualizações

Publicada em

Publicada em: Celular
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
354
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Minicurso de Android Básico I - Dia 2

  1. 1. Minicurso Básico de Android – 2º Dia Thales Levi Azevedo Valente
  2. 2. 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
  3. 3. 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
  4. 4. 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 4
  5. 5. Widgets – Componentes de Interface
  6. 6. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 6  TextView  EditText  ImageView  Button  CheckBox  Spinner  RadioGroup  RadioButton
  7. 7. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 7
  8. 8. TextView (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 8 TextViews instanciados em Java TextViews instanciado em XML O primeiro TextView foi gerado em XML e os seguintes gerados dinâmicamente
  9. 9. • 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. (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 9
  10. 10. 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 10
  11. 11. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 11
  12. 12. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 12 1- recupero o objeto pelo seu ID (o ID é opcional e definido em XML) 2- Pego o texto e converto para String
  13. 13. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 13
  14. 14. • Como usar em XML: – src: seta a imagem no ImageView. ImageView (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 14
  15. 15. • Como usar em Java: ImageView (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 15 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
  16. 16. • Como usar em Java: ImageView (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 16 Compare com o slide anterior e comprove ;)
  17. 17. • ScaleTypes e seus resultados ImageView (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 17 Com adjustViewBounds Com os ScaleTypes
  18. 18. • É 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 18
  19. 19. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 19
  20. 20. 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. (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 20
  21. 21. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 21
  22. 22. 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) (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 22
  23. 23. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 23
  24. 24. RadioGroup Exemplo de utilização de RadioGroup e RadioButtons (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 24
  25. 25. 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 25
  26. 26. RadioGroup Dando ação ao nosso exemplo (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 26
  27. 27. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 27
  28. 28. Spinner XML Código (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 28
  29. 29. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 29
  30. 30. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 30
  31. 31. Gerenciadores de Layouts
  32. 32. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 32
  33. 33. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 33
  34. 34. AbsoluteLayout (x1,y1) (0,0) (x5,y5) (x3,y3)(x4,y4) (x2,y2) Exemplo gráfico do uso do AbsoluteLayout (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 34
  35. 35. 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 35
  36. 36. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 36
  37. 37. • Posiciona um componente filho em relação ao layout pai ou a outros componentes filhos RelativeLayout (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 37
  38. 38. • 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 38
  39. 39. • Primeira TableRow – TextView • Segunda TableRow – TextView e EditText • Terceira TableRow – ... TableLayout (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 39
  40. 40. • É 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 (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 40
  41. 41. 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) (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 41
  42. 42. (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 42 Dúvidas ?
  43. 43. (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 43 Até a próxima !
  44. 44. (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 44 • 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
  45. 45. (28/05 - 03/07)/2015 Thales Levi Azevedo Valente - UFMA 45 • 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

×