06/09/2012

Implementao de Interfaces grficas

Gibeon Aquino gibeon@dimap.ufrn.br

Elementos de UI
Menus Dialogs Action bar Notifications

06/09/2012

Menus

Menus
Android oferece trs tipos de menu
Options Menu
Menu padro de aplicaes Android

Context Menu
Menu flutuante e contextual

Popup menu
???

06/09/2012

Options Menu
Modelo principal de menus no android Diretamente relacionado ao Activity em execuo Ativado pelo boto MENU do aparelho ou na barra de aes (em aparelhos que rodam Android 3.x).
A partir do Android 3.0 (API level 11), os aparelhos no so obrigados a ter um boto dedicado opo de Menu

Aparece na parte inferior da tela (Android 2.x) ou na barra de aes (Android 3.x)

Options Menu
Android 2.x

O menu de opes s apresenta 6 itens de menu. Se a quantidade de itens for maior que 6, a opo More automaticamente adicionada.

06/09/2012

Options Menu
Android 3.x

Action Bar

Options Menu
Quando o Android cria o Options Menu, o mtodo onCreateOptionsMenu() da atividade em execuo invocado Para definir o menu de sua atividade basta redefinir esse mtodo
private int MENU_ADD = 1; private int MENU_RESET = 2; @Override public boolean onCreateOptionsMenu(Menu menu) { menu.add(Menu.NONE, MENU_ADD, Menu.NONE, "Add") .setIcon(R.drawable.ic_menu_add); menu.add(Menu.NONE, MENU_RESET, Menu.NONE, "Reset") .setIcon(R.drawable.ic_menu_refresh); return(super.onCreateOptionsMenu(menu)); }

Assinatura do mtodo: add(int groupId, int itemId, int order, CharSequence title)

06/09/2012

Options Menu

Ver cdigo: SimpleProgramaticMenu.java

Definindo o Menu (Declarativo)

Para criar um menu de maneira declarativa deve-se:
Criar um arquivo XML no diretrio res/menu/ Contendo os seguintes elementos
<menu> - Elemento raiz do XML e deve conter os itens de menu <item> - Representa um item de menu e pode ter outro menu para representar um submenu <group> - Item opcional de agrupamento de itens (invisvel e serve para definir propriedades comuns)

06/09/2012

Menu XML

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/new_game" android:icon="@drawable/ic_new_game" android:title="@string/new_game" /> <item android:id="@+id/help" android:icon="@drawable/ic_help" android:title="@string/help" /> </menu>

menu_basico.xml

Carregando o menu XML

@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.menu_basico, menu); return true; }

06/09/2012

Tratando as aes de menu

@Override public boolean onOptionsItemSelected(MenuItem item) { // Handle item selection switch (item.getItemId()) { case R.id.new_game: newGame(); return true; case R.id.help: showHelp(); return true; default: return super.onOptionsItemSelected(item); } }

Modificando os itens do menu

possvel modificar os itens de menu durante a execuo da Activity No Android 2.3 e inferior, o mtodo onPrepareOptionsMenu() chamado toda vez que o usurio abre o Options Menu
Deve-se redefinir este mtodo para atualizar os itens de menu

No Android 3.0 e superior, voc deve chamar o mtodo invalidateOptionsMenu() quando quiser atualizar o menu
O Android chamar o onPrepareOptionsMenu()

06/09/2012

Context Menu
Similar aos menus contextuais em PCs que so ativados ao se clicar com o boto direito do mouse
No Android eles so ativados por um pressionamento demorado em um componente visual

Diretamente relacionados ao View pressionado

Exemplo Context Menu

06/09/2012

Formas do Context Menu

1.

Flutuante
Modelo padro de menu contextual

2.

Action mode
Disponvel a partir do Android 3 (API 11)

(1)

(2)

Menu flutuante - Passos

Para criar um menu de contexto deve-se
1.

2.

3.

Registrar a view atravs do mtodo registerForContextMenu() Redefinir o mtodo onCreateContextMenu() da Activity para definir o menu Redefinir o mtodo onContextItemSelected() para tratar as aes de clique

06/09/2012

Menu flutuante - Definio

@Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); menu.setHeaderTitle("Context Menu"); menu.add(0, menu.FIRST, Menu.NONE,"Item 1").setIcon(R.drawable.menu_item); menu.add(0, menu.FIRST+1, Menu.NONE, "Item 2").setCheckable(true); menu.add(0, menu.FIRST+2, Menu.NONE, "Item 3").setShortcut(3, 3); SubMenu sub = menu.addSubMenu("Submenu"); sub.add("Submenu Item"); }

OU
@Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.context_menu, menu); }

Menu flutuante Tratando aes

Contm informaes sobre a View selecionada
@Override public boolean onContextItemSelected(MenuItem item) { AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getMenuInfo(); switch (item.getItemId()) { case R.id.edit: editNote(info.id); return true; case R.id.delete: deleteNote(info.id); return true; default: return super.onContextItemSelected(item); } }

10

06/09/2012

Menu no modo Action Mode Passos

1.

Implementar a interface ActionMode.Callback

Possui mtodos de callback para tratar o ciclo de vida e eventos dos itens de ao no ActionMode

2.

Chamar o mtodo startActionMode() quando desejar mostrar a barra de aes

Exemplo Action Mode

Ver Activity SimpleActionModeMenu...

11

06/09/2012

Submenu
Menu que o usurio pode abrir a partir da seleo de um item de outro menu til quando um sistema tem muitas opes de menu Android no permite submenus aninhados

Definindo submenus

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/file" android:icon="@drawable/file" android:title="@string/file" > <!-- "file" submenu --> <menu> <item android:id="@+id/create_new" android:title="@string/create_new" /> <item android:id="@+id/open" android:title="@string/open" /> </menu> </item> </menu>

12

06/09/2012

Itens de menu checkables

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/red" android:title="@string/red" /> <item android:id="@+id/blue" android:title="@string/blue" /> </group> </menu>

Dialogs

13

06/09/2012

Dialogs
Android possui os seguintes tipos de Dialogs implementados
AlertDialog ProgressDialog DatePickerDialog TimePickerDialog

Voc pode criar seus prprios Dialogs estendendo a classe Dialog

Criando um Dialog
Deve-se redefinir os mtodos:
onCreateDialog(int)
Chamado uma nica vez, quando o Dialog criado Deve-se instanciar o Dialog e retorn-lo

onPrepareDialog(int, Dialog)
Chamado toda vez que o Dialog aberto Pode-se alterar informaes do Dialog

14

06/09/2012

Criando um Dialog

protected Dialog onCreateDialog(int id) { Dialog dialog; switch(id) { case DIALOG_PAUSED_ID: // do the work to define the pause Dialog break; case DIALOG_GAMEOVER_ID: // do the work to define the game over Dialog break; default: dialog = null; } return dialog; }

Mostrando um Dialog
Deve-se chamar o mtodo showDialog(int) no momento em que se deseja mostrar o Dialog

showDialog(DIALOG_PAUSED_ID);

15

06/09/2012

Criando um AlertDialog
AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setMessage("Are you sure you want to exit?") .setCancelable(false) .setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { MyActivity.this.finish(); } }) .setNegativeButton("No", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.cancel(); } }); AlertDialog alert = builder.create();

Ver cdigo completo: SimpleDialog.java

Criando um ProgressDialog
ProgressDialog dialog = ProgressDialog.show(MyActivity.this, "", "Loading. Please wait...", true);

ProgressDialog progressDialog; progressDialog = new ProgressDialog(mContext); progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL); progressDialog.setMessage("Loading..."); progressDialog.setCancelable(false);

16

06/09/2012

Criando um DatePicker

Ver cdigo completo: SimpleDatePickerDialog.java

Action bar
Widget que substitui a barra de ttulo tradicional em aplicaes Android 3.X
Options Menu Ttulo da Activity

Logo da Aplicao

Itens de ao

17

06/09/2012

Adicionando/removendo a Action bar

Automaticamente adicionado em aplicaes Android 3.X
AndroidManifest.xml
<uses-sdk android:targetSdkVersion="11" />

Pode ser removido para uma Activity especfica

<activity android:theme="@android:style/Theme.Holo.NoActionBar">

ou
ActionBar actionBar = getActionBar(); actionBar.hide();

Adicionando itens de ao
Itens do Options Menu podem aparecer como itens de ao
Menu em XML
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_save" android:icon="@drawable/ic_menu_save" android:title="@string/menu_save" android:showAsAction="ifRoom|withText" /> <item android:id="@+id/menu_delete" android:icon="@drawable/ic_menu_delete" android:title="@string/menu_delete" android:showAsAction="ifRoom|withText" /> </menu>

18

06/09/2012

Mais sobre Action Bar

cone da aplicao pode responder a aes do usurio Adicionar Action Views Adicionar Tabs Modificar o estilo
Veja detalhes em: http://developer.android.com/guide/topics/ui/actionbar.html

Notifications
Alm do uso de Dialogs, existem mais duas formas de notificar o usurio
Toast Notifications

Status Bar Notification

19

06/09/2012

Toast Notifications
Mensagens de popup que aparecem e desaparecem automaticamente No permitem interao com usurio Podem ser geradas por Activities e Services

Context context = getApplicationContext(); CharSequence text = "Hello toast!"; int duration = Toast.LENGTH_SHORT; Toast toast = Toast.makeText(context, text, duration); toast.show();

Status Bar Notifications

Podem ser geradas por Activities e Services Para criar um Status Bar Notification, deve-se:
1.

2. 3. 4.

Obter uma referncia para o NotificationManager Criar uma instncia de Notification Definir a mensagem expandida e o Intent Passar a instncia de Notification para o NotificationManager

20

06/09/2012

Exibindo uma notificao: Passo 1

Obter uma referncia para o NotificationManager
String ns = Context.NOTIFICATION_SERVICE; NotificationManager mNotificationManager = (NotificationManager) getSystemService(ns);

Exibindo uma notificao: Passo 2

Criar uma instncia de Notification

int icon = R.drawable.notification_icon; CharSequence tickerText = "Hello"; long when = System.currentTimeMillis(); Notification notification = new Notification(icon, tickerText, when);

21

06/09/2012

Exibindo uma notificao: Passo 3

Definir a mensagem expandida e o Intent
Context context = getApplicationContext(); CharSequence contentTitle = "My notification"; CharSequence contentText = "Hello World!"; Intent notificationIntent = new Intent(this, MyClass.class); PendingIntent contentIntent = PendingIntent.getActivity(this, 0, notificationIntent, 0); notification.setLatestEventInfo(context, contentTitle, contentText, contentIntent);

Exibindo uma notificao: Passo 4

Passar a instncia de Notification para o NotificationManager

private static final int HELLO_ID = 1; mNotificationManager.notify(HELLO_ID, notification);

22

06/09/2012

Gibeon Aquino gibeon@dimap.ufrn.br

FIM

23