O documento discute componentização e padrões de projeto e interface em Android. Ele explica o que são componentes, quando e como criá-los, e apresenta exemplos. Também discute padrões comuns de interface como action bar, search bar e companion widgets.

1. Componentização e
padrões de
projeto e interface
em Android
Welington Silva
welington.silva@cesar.org.br

2. Componentização
G
16/02/2012 2

3. O que?
• {Agregado} de view(s)
• Customizável ou não
16/02/2012 Componentização e padrões de projeto e interface 3

4. Por que?
• Facilita a utilização
• Forma de reuso
• Evita duplicação de código
• Concentra a lógica
• Facilita a manutenção
16/02/2012 Componentização e padrões de projeto e interface 4

5. Quando?
• Aparição recorrente na tela
– Muitos recursos (Imagens, fontes, etc.)
– Muitas telas
– Detalhes de design
– Mesma aparência, configuração
16/02/2012 Componentização e padrões de projeto e interface 5

6. Como?
• Crie o layout (se necessário)
• Crie a respectiva classe do componente
– Ex.: MyComponent.java
– Infle o layout criado no construtor
– Faça as inicializações e customizações necessárias
– Faça os métodos para controle do seu componente
16/02/2012 Componentização e padrões de projeto e interface 6

7. Como? Exemplo[0]
• Agregador de botões
button_host_layout.xml
<LinearLayout
android:id="@+idButtonHost/buttonHost"
android:layout_width="135px"
android:layout_height="334px"
android:orientation="vertical"
android:gravity="center_horizontal|bottom"
android:background="@drawable/fundo_host"
android:padding="2px”
>
</LinearLayout>
16/02/2012 Componentização e padrões de projeto e interface 7

8. Como? Exemplo[1]
ButtonHostComponent.java
public ButtonSetComponent(Context context) {
super(context);
this.context = context;
inflateLayout();
}
public ButtonSetComponent(Context context,
AttributeSet attrs) {
super(context, attrs);
this.context = context;
inflateLayout();
}
16/02/2012 Componentização e padrões de projeto e interface 8

9. Como? Exemplo[2]
private void inflateLayout() {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.button_host_layout, this);
}
public Button addButton(int resStringId, int resBgId,
View.OnClickListener listener) {
Button button = new Button(context);
button.setText(context.getText(resStringId));
button.setBackgroundResource(resBgId);
button.setOnClickListener(listener);
return button;
}
16/02/2012 Componentização e padrões de projeto e interface 9

10. Como? Exemplo[3]
• Incluindo no layout
Nome completo do pacote
<br.example.component.ButtonHostComponent
android:id="@+idMyActivity/buttonHost"
android:layout_width="wrap_content"
android:layout_height=“wrap_content "
/>
Identificando o componente
16/02/2012 Componentização e padrões de projeto e interface 10

11. Como? Exemplo[4]
• Instanciando
ButtonHostComponent bhc = new
ButtonHostComponent(MyActivity.this);
• Recuperando
ButtonSetComponent b = (ButtonSetComponent)
findViewById(R.idMyActivity.buttonHost);
• Utilizando
bhc.addButton(R.string.label, R.drawable.bg,
listener);
16/02/2012 Componentização e padrões de projeto e interface 11

12. Padrões de projeto
16/02/2012 12

13. Definição
” Solução genérica e repetível
para problemas comumente recorrentes”
16/02/2012 Componentização e padrões de projeto e interface 13

14. Listener (Observer)
Objetos registram seu interesse
em ser notificados em caso de alguma mudança
ocorridas em outros objetos
1
source listener
16/02/2012 Componentização e padrões de projeto e interface 14

15. Factory
Interface de criação de objetos
relacionados ou dependentes,
sem especificar suas classes concretas
16/02/2012 Componentização e padrões de projeto e interface 15

16. Padrões de interface
16/02/2012 16

17. Quais?
• Dashboard
• Action Bar
• Search Bar
• Quick Actions
• Companion Widgets
16/02/2012 Componentização e padrões de projeto e interface 17

18. Dashboard
• Revela funções
• Destaca conteúdo
• Tela toda
• Organizada por
– Função, categoria ou perfil
16/02/2012 Componentização e padrões de projeto e interface 18

19. Action Bar
• Navegação
• Operações usadas com frequência
• Topo da tela
• Geralmente oferece
– Busca, atualização, criação, retorno para o dashboard
16/02/2012 Componentização e padrões de projeto e interface 19

20. Quick Action
• “Pop-up” com funções disponíveis
• Ações explícitas, bem objetivas
• “Fast & Fun”
16/02/2012 Componentização e padrões de projeto e interface 20

21. Search Bar
• Busca (... Não me diga!)
• Substitui action bar, se houver
• Autocompletar
16/02/2012 Componentização e padrões de projeto e interface 21

22. Companion widget
• Conteúdo da aplicação na tela inicial
• Tela inicial personalizada
16/02/2012 Componentização e padrões de projeto e interface 22

23. Isso é tudo pessoal!
Welington Silva, welington.silva@cesar.org.br
16/02/2012 23