Android User Interface (UI)
Instrutor: Fernando Ghisi
Programação para Dispositivos Móveis
18 de Março de 2014
Tópicos
● Plataforma Android
● UI do Android
● Classes de atividade (Activities)
– AndroidManifest.xml
– Ciclo de vida das...
Plataforma Android
●
Desenvolvida pela Google
● Sistema operacional móvel mais popular do
mundo
– Presente em mais de 1 bi...
Google Android Building 44
UI do Android
● Principais componentes:
– View
– ViewGroups, AdapterViews e Layouts
– Menus e ActionBar
– Dialogs
● View
–...
Views pré-definidas
● Button
● ToggleButton
● CheckBox
● TextView
● RatingBar
● AutoCompleteTextView
● …
*São componentes ...
ViewGroup
● Uma View invisível que contém outras Views
● Usada para agrupar e organizar um conjunto de Views.
● As views s...
ViewGroups pré-definidos
● RadioGroup
● TimePicker
● DatePicker
● WebView
● MapView
● ListView
● Gallery
● GridView
● Spin...
Layout
● Um ViewGroup genérico que define uma estrutura
de apresentação para as Views que ele contém.
● Exemplos:
– Linear...
AdapterViews
● Views que têm seus filhos gerencidos por um
Adapter*.
– O Adapter gerencia os dados e provê visualizações
d...
AdapterViews pré-definidos
● ListView, Spinner, Gallery e GridView.
*ListView apresenta uma lista, filtrável e com scroll,...
Menus e ActionBar
● Menus: Options, Context e Submenu.
– Activities podem adicionar itens e tratar seleção.
● ActionBar:
–...
Dialogs
● Sub-janelas independentes, utilizadas pelas
Activities para se comunicarem com o usuário.
● Exemplos:
– AlertDia...
View
● Duas responsabilidades principais:
– Se desenhar;
– Gerenciar eventos.
Renderização da UI
● Measure
– Dimensões de cada View
● Layout
– Posicionamento de cada View
● Draw
– Desenho de cada View
Eventos na View
● Interação do usuário
– Touch
– Keyboard; Trackball; D-pad...
● Controle do sistema
– Mudanças no “ciclo ...
View Listener Interfaces
● OnClickListener.onClick();
● OnLongClickListener.onLongClick();
● OnFocusChangeListener.onFocus...
Activities
● Uma Activity representa uma atividade que o usuário
pode fazer.
● Quase sempre existe interação com o usuário...
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/and...
Activity
● Cria uma janela, na qual o desenvolvedor pode
colocar seus elementos de interface (GUI) através do
método "setC...
Activities Stack
● As Activities são organizadas em forma de pilha.
– Apenas uma pode estar no topo (“foreground”);
– As o...
Estados da Activity
a) Rodando ou ativa
– Em foco, no topo da pilha.
b) Pausada
– Ainda visível, mas sem foco (com outra A...
Ciclo de vida da Activity
Relembrando...
● Plataforma Android
● UI do Android
– View
– ViewGroup e Layout
– AdapterView
– Menus e ActionBar
– Dialog...
Perguntas?
Contato: fernandoghisi@gmail.com
Próximos SlideShares
Carregando em…5
×

Android User Interface

338 visualizações

Publicada em

Visão geral da plataforma Android, da Google, com o foco na UI (User Interface).

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
338
No SlideShare
0
A partir de incorporações
0
Número de incorporações
10
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Android User Interface

  1. 1. Android User Interface (UI) Instrutor: Fernando Ghisi Programação para Dispositivos Móveis 18 de Março de 2014
  2. 2. Tópicos ● Plataforma Android ● UI do Android ● Classes de atividade (Activities) – AndroidManifest.xml – Ciclo de vida das Activities ● Considerações finais e dúvidas
  3. 3. Plataforma Android ● Desenvolvida pela Google ● Sistema operacional móvel mais popular do mundo – Presente em mais de 1 bilhão de smartphones e tablets. – Embarcado em 78,6% dos dispositivos em 2013. (IDC, "Worldwide Quarterly Mobile Phone Tracker", 2014) http://www.android.com http://developer.android.com
  4. 4. Google Android Building 44
  5. 5. UI do Android ● Principais componentes: – View – ViewGroups, AdapterViews e Layouts – Menus e ActionBar – Dialogs ● View – Base dos componentes de UI. – Representa um espaço retangular na tela. http://developer.android.com/reference/android/view/View.html
  6. 6. Views pré-definidas ● Button ● ToggleButton ● CheckBox ● TextView ● RatingBar ● AutoCompleteTextView ● … *São componentes visuais configuráveis!
  7. 7. ViewGroup ● Uma View invisível que contém outras Views ● Usada para agrupar e organizar um conjunto de Views. ● As views são organizadas em forma de árvore. ● ViewGroup é a classe base para os layouts.
  8. 8. ViewGroups pré-definidos ● RadioGroup ● TimePicker ● DatePicker ● WebView ● MapView ● ListView ● Gallery ● GridView ● Spinner
  9. 9. Layout ● Um ViewGroup genérico que define uma estrutura de apresentação para as Views que ele contém. ● Exemplos: – LinearLayout – RelativeLayout – TableLayout – GridView* http://developer.android.com/guide/topics/ui/declaring-layout.html
  10. 10. AdapterViews ● Views que têm seus filhos gerencidos por um Adapter*. – O Adapter gerencia os dados e provê visualizações desses dados para o Adapter View. – O AdapterView apresenta as visualizações de dados. http://developer.android.com/reference/android/widget/AdapterView.html http://developer.android.com/reference/android/widget/Adapter.html
  11. 11. AdapterViews pré-definidos ● ListView, Spinner, Gallery e GridView. *ListView apresenta uma lista, filtrável e com scroll, de itens selecionáveis; itens são gerenciados por um ListAdapter.
  12. 12. Menus e ActionBar ● Menus: Options, Context e Submenu. – Activities podem adicionar itens e tratar seleção. ● ActionBar: – Similar à barra superior das aplicações desktop. – Acesso rápido às operações comuns no app. – Navegação consistente nos diferentes apps. http://developer.android.com/design/patterns/actionbar.html
  13. 13. Dialogs ● Sub-janelas independentes, utilizadas pelas Activities para se comunicarem com o usuário. ● Exemplos: – AlertDialog – ProgressDialog – DatePickerDialog – TimePickerDialog
  14. 14. View ● Duas responsabilidades principais: – Se desenhar; – Gerenciar eventos.
  15. 15. Renderização da UI ● Measure – Dimensões de cada View ● Layout – Posicionamento de cada View ● Draw – Desenho de cada View
  16. 16. Eventos na View ● Interação do usuário – Touch – Keyboard; Trackball; D-pad... ● Controle do sistema – Mudanças no “ciclo de vida” *Observação: Existem outras formas de entrada não associadas diretamente a eventos nas telas - por exemplo, serviços de sensores registrados na Activity.
  17. 17. View Listener Interfaces ● OnClickListener.onClick(); ● OnLongClickListener.onLongClick(); ● OnFocusChangeListener.onFocusChange(); ● OnKeyListener.onKey(); final Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { button.setText("Got Pressed:" + ++count); } });
  18. 18. Activities ● Uma Activity representa uma atividade que o usuário pode fazer. ● Quase sempre existe interação com o usuário, através de uma View associada à Activity. ● Todo aplicativo Android começa por uma Activity.
  19. 19. AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package=“course.labs.activitylab" android:versionCode=“1" android:versionName="1.0" > <uses-sdk android:minSdkVersion=“8" android:targetSdkVersion="17" /> <application android:allowBackup=“true” android:icon="@drawable/ic_launcher” android:label="@string/app_name” android:theme="@style/AppTheme” > <activity android:name=“course.labs.activitylab.ActivityOne" android:label="@string/app_name" > <intent-filter>                 <action android:name="android.intent.action.MAIN" />                 <category android:name="android.intent.category.LAUNCHER" />             </intent-filter> </activity> <activity android:name="course.labs.activitylab.ActivityTwo" android:label="@string/title_activity_activity_two" > </activity> </application> </manifest>
  20. 20. Activity ● Cria uma janela, na qual o desenvolvedor pode colocar seus elementos de interface (GUI) através do método "setContentView(View)". ● A forma como as atividades são gerenciadas é parte fundamental do modelo de aplicação da plataforma Android. public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }
  21. 21. Activities Stack ● As Activities são organizadas em forma de pilha. – Apenas uma pode estar no topo (“foreground”); – As outras ficam abaixo (“background”).
  22. 22. Estados da Activity a) Rodando ou ativa – Em foco, no topo da pilha. b) Pausada – Ainda visível, mas sem foco (com outra Activity transparente na frente ou que não ocupe toda a tela). c) Parada – Não visível, com outra Activity na frente.
  23. 23. Ciclo de vida da Activity
  24. 24. Relembrando... ● Plataforma Android ● UI do Android – View – ViewGroup e Layout – AdapterView – Menus e ActionBar – Dialogs – Renderização e eventos na View. ● Classes de atividade (Activities) – AndroidManifest.xml – Ciclo de vida das Activities
  25. 25. Perguntas? Contato: fernandoghisi@gmail.com

×