O documento discute a customização de componentes no Android, incluindo: 1) Estilos customizados para alterar a aparência de componentes existentes; 2) Componentes compostos/personalizados criados a partir de Views existentes; 3) Componentes totalmente customizados criados a partir de zero estendendo a classe View.

1. Componentes customizados:
Android te dá asas!
1
GUILHERME DE CLEVA FARTO
É DIA DE JAVA 2013
UNIVERSIDADE FEDERAL DE SÃO CARLOS ( UFSCar )

2. Agenda
 Apresentação
 Introdução
 Estilos customizados
 Componentes compostos/personalizados
 Componentes customizados
2

3. Apresentação
 Guilherme de Cleva Farto
 Graduação em Ciência da Computação (BCC)
 FEMA 2010
 Pós-graduação em Engenharia de Componentes Java
 FIO/TNT 2011
 Analista/desenvolvedor Java PRX/TOTVS
 Professor de curso de graduação e pós-graduação
 Mestrado aceito na área de Sistemas Colaborativos
 Instituto Tecnológico da Aeronáutica (ITA)
 Autor do projeto “Andruino”
 Aceito no Droidcon ‘13 (Berlim/Alemanha)
 Autor de diversos artigos, treinamentos e palestras
3

4. In Memoriam
 Rafael Sussel Decleva
  09/03/1982
  21/08/2013
 Filho, pai, marido, professor; amigo...
 “A um homem bom não é possível que ocorra
nenhum mal, nem em vida nem em morte.”
Sócrates
4

5. Introdução
 O ambiente de desenvolvimento de Google Android fornece
inúmeros componentes da camada de visualização
 Também chamados de View ou ViewGroup
5

6. Introdução
 Entretanto, nem sempre os objetos View nativos são
“atraentes” e “amigáveis”
 Assim como, dependendo da necessidade, os componentes
existentes podem não atender as reais expectativas
 Para isso, deve-se aplicar os conceitos de engenharia de
componentes e componentização da camada de visualização
6

7. Introdução
 Por que componentizar?
 Modularizar código-fonte repetitivo
 Acessar métodos protegidos de um componente existente
 Otimizar o desempenho de renderização
 Obter total controle do componente com measure, layout e draw
7

8. Introdução
 Por que componentizar?
8

9. Introdução
 Em Google Android, pode-se
 Customizar os estilos e temas de uma aplicação
 Modelar e implementar componentes compostos/personalizados
 Construir componentes customizados
9

10. Estilos customizados
 A plataforma Android permite a customização de estilos
 Fontes, cores, bordas, alinhamento, espaçamento e outros
 Possibilita a modificação da aparência mas não do
comportamento
 As propriedades de componentes podem ser alteradas por
meio de arquivos XML
 /values/styles.xml
 /values/themes.xml
10

11. Estilos customizados
 Exemplo de arquivo /values/styles.xml
11
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="buttonStyle" parent="@android:style/Widget.Button">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:gravity">center</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">0.6</item>
<item name="android:background">@drawable/button_custom</item>
<item name="android:padding">10dip</item>
</style>
</resources>

12. Estilos customizados
 Exemplo de arquivo /drawable/button_custom.xml
12
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#598e96" />
<gradient android:angle="-90" android:endColor="#7fbac6"
android:startColor="#27646c" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#598e96" />
<solid android:color="#4ea0ab" />
</shape>
</item>
...

13. Estilos customizados
 Exemplo de arquivo /drawable/button_custom.xml
13
...
<item>
<shape android:shape="rectangle">
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#598e96" />
<gradient android:angle="-90" android:endColor="#4ea0ab"
android:startColor="#94dcea" />
</shape>
</item>
</selector>

14. Estilos customizados
 Aplicando o estilo de um arquivo XML de layout
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp" >
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button2"
style="@style/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Button" />
</LinearLayout>

15. Estilos customizados
 Resultado após a definição do estilo
15

16. Estilos customizados
 É possível definir o estilo criado como recurso do tema da
aplicação
 Arquivo /values/styles.xml
16
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="android:Theme.Light"></style>
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:buttonStyle">@style/buttonStyle</item>
</style>
<style name="buttonStyle" parent="@android:style/Widget.Button">
<item name="android:textSize">15sp</item>
...
</style>
</resources>

17. Estilos customizados
 É possível definir o estilo criado como recurso do tema da
aplicação
 Arquivo AndroidManifest.xml
17
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="farto.cleva.guilherme.androidprojeto"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="10" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
...
</application>
</manifest>

18. Estilos customizados
18
 Implementação de estilos customizados
 styles.xml
 themes.xml
 Componentes
 Button
 SeekBar
 CheckBox
 RatingBar

19. Estilos customizados
 Páginas importantes
 http://developer.android.com/design/style/writing.html
 http://developer.android.com/guide/topics/resources/style-resource.html
 http://developer.android.com/guide/topics/resources/more-resources.html
19

20. Componentes compostos/personalizados
 A plataforma Android provê um sofisticado e poderoso
modelo componentizado da camada de UI
 Pode-se, a partir das classes de View existentes, definir um
novo componente para atender a uma necessidade específica
 Vantagens
 Reuso de software
 Manutenibilidade
 Escalabilidade
 Baixa probabilidade de erros/falhas
20

21. Componentes compostos/personalizados
 A criação de um novo componente requer a implementação
em Java
 Criar um arquivo XML de layout da interface da View
 Criar uma arquivo /values/attrs.xml para definir as propriedades
ou atributos do componente
 Criar uma classe Java para inflar o layout customizado e definir os
comportamentos
21

22. Componentes compostos/personalizados
22
 Implementação de componente composto/personalizado
 /layout/edittext_validator_view.xml
 /values/attrs.xml
 /anim/
 shake_effect.xml
 cycle_effect.xml
 Classe EditTextValidator.java
 Leitura de atributos
 Uso de expressões regulares
 TextWatcher
 Animation

23. Estilos customizados
 Páginas importantes
 http://developer.android.com/guide/topics/ui/custom-components.html
 http://developer.android.com/design/index.html
23

24. Componentes customizados
 Por fim, a plataforma Android torna possível a construção de
novos componentes ou Views customizadas
 A criação de um novo componente engloba toda a
implementação de aparência e funcionalidades
 Requer mais código Java
 Nova classe Java que estende de “android.view.View”
 Não faz uso de arquivos XML de layout
 Deve “desenhar” sua própria interface
24

25. Componentes customizados
 Principais conceitos
 Measure
 onMeasure(int widthMeasureSpec, int heightMeasureSpec)
 Layout
 onLayout(boolean changed, int left, int right, int top, int bottom)
 Draw
 onDraw(Canvas canvas)
 dispatchDraw(Canvas canvas)
25

26. Componentes customizados
 Principais conceitos
 Interação (TouchEvent)
 onTouchEvent(MotionEvent event)
 event.getAction()
 MotionEvent.ACTION_DOWN
 MotionEvent.ACTION_MOVE
 MotionEvent.ACTION_UP
 event.getX()
 event.getY()
26

27. Componentes customizados
27
 Implementação de componente customizado
 ColumnChartView.java

28. Dúvidas?
28

29. Guilherme de Cleva Farto
guilherme_computacao@yahoo.com.br
guilherme.farto@gmail.com
@gcleva
Obrigado!
29