Implementação de Interfaces gráficas

(1)

Implementação de Interfaces

gráficas

(2)



Menus



Dialogs



Action bar



Notifications

(3)

(4)



Android oferece três tipos de menu



Options Menu



Menu padrão de aplicações Android



Context Menu



Menu flutuante e contextual



Popup menu



A partir da versão 3.0

(5)



Modelo principal de menus no android



Diretamente relacionado ao Activity em execução



Ativado pelo botão MENU do aparelho ou na barra de

ações (em aparelhos que rodam Android 3.x).



A partir do Android 3.0 (API level 11), os aparelhos não são

obrigados a ter um botão dedicado à opção de Menu



Aparece na parte inferior da tela (Android 2.x) ou na

barra de ações (Android 3.x)

(6)

Options Menu

Android 2.x

O menu de opções só apresenta 6

itens de menu. Se a quantidade de

itens for maior que 6, a opção “More”

é automaticamente adicionada.

(7)

Options Menu

Android 3.x

.

(8)



Quando o Android cria o Options Menu, o método

onCreateOptionsMenu()

da atividade em execução é invocado



Para definir o menu de sua atividade basta redefinir esse método

Options Menu

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)); }

(9)

Definindo o Menu (Declarativo)



Para criar um menu de maneira

declarativa deve-se:



Criar um arquivo XML no diretório 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

(invisível e serve para definir propriedades

comuns)

(10)

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

(11)

Carregando o menu XML

@Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.menu_basico, menu);

return true;

(12)

Tratando as ações de menu

@Override

public boolean onOptionsItemSelected(MenuItem item) { // Handle item selection

switch (item.getItemId()) { case R.id.new_game: newGame(); returntrue; case R.id.help: showHelp(); returntrue; default:

returnsuper.onOptionsItemSelected(item); }

(13)



É possível modificar os itens de menu durante a

execução da Activity



No Android 2.3 e inferior, o método

onPrepareOptionsMenu() é chamado toda vez que o

usuário abre o Options Menu



Deve-se redefinir este método para atualizar os itens de



No Android 3.0 e superior, você deve chamar o

método invalidateOptionsMenu() quando quiser

atualizar o menu



O Android chamará o

onPrepareOptionsMenu()

(14)



Similar aos menus contextuais em PCs

que são ativados ao se clicar com o botão

direito do mouse



No Android eles são ativados por um

pressionamento demorado em um

componente visual



Diretamente relacionados ao View

pressionado

(15)

(16)

1. Flutuante



Modelo padrão de menu

contextual

2. “Action mode”



Disponível a partir do

Android 3 (API 11)

Formas do Context Menu

(17)



Para criar um menu de contexto deve-se

1. Registrar a view através do método

registerForContextMenu()

2. Redefinir o método

onCreateContextMenu()

da Activity para definir o menu

3. Redefinir o método

onContextItemSelected()

para tratar as ações de clique

(18)

Menu flutuante - Definição

@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"); }

@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); }

(19)

Menu flutuante – Tratando ações

@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); } }

Contém informações sobre

a View selecionada

(20)

1. Implementar a interface ActionMode.Callback



Possui métodos de callback para tratar o ciclo de

vida e eventos dos itens de ação no ActionMode

2. Chamar o método startActionMode() quando

desejar mostrar a barra de ações

Menu no modo Action Mode -

Passos

(21)



Menu que o usuário pode abrir a partir da

seleção de um item de outro menu



Útil quando um sistema tem muitas opções

de menu



Android não permite submenus aninhados

(22)

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" >  <menu> <item android:id="@+id/create_new" android:title="@string/create_new" /> <item android:id="@+id/open" android:title="@string/open" /> </menu> </item> </menu>

(23)

Itens de menu “checkables”

<?xml version="1.0" encoding="utf-8"?>

<item android:id="@+id/red"

android:title="@string/red" />

<item android:id="@+id/blue"

android:title="@string/blue" />

</group> </menu>

(24)

(25)



Android possui os seguintes tipos de

Dialogs implementados



AlertDialog



ProgressDialog



DatePickerDialog



TimePickerDialog



Você pode criar seus próprios Dialogs

estendendo a classe Dialog

(26)



Deve-se chamar o método showDialog(int)

no momento em que se deseja mostrar o

Dialog

Mostrando um Dialog

(27)



Deve-se redefinir os métodos:



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 informações do Dialog

(28)

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; }

(29)

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();

}

});

(30)

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...");

(31)



Widget que substitui a barra de título

tradicional em aplicações Android 3.X

Action bar

Logo da Aplicação

Título da Activity

Itens de ação

(32)



Automaticamente adicionado em

aplicações Android 3.X



Pode ser removido para uma Activity

específica

Adicionando/removendo a Action bar

<uses-sdk android:targetSdkVersion="11" />

AndroidManifest.xml

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

(33)



Itens do Options Menu podem aparecer

como itens de ação

Adicionando itens de ação

<?xml version="1.0" encoding="utf-8"?>

<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>

(34)



Ícone da aplicação pode responder a

ações do usuário



Adicionar Action Views



Adicionar Tabs



Modificar o estilo

Mais sobre Action Bar

http://developer.android.com/guide/topics/ui/actionbar.html

(35)



Além do uso de Dialogs, existem mais

duas formas de notificar o usuário



Toast Notifications



Status Bar Notification

(36)



Mensagens de popup que aparecem e

desaparecem automaticamente



Não permitem interação com usuário



Podem ser geradas por Activities e

Services

Toast Notifications

Context context = getApplicationContext();

CharSequence text = "Hello toast!";

int duration = Toast.LENGTH_SHORT;

Toast toast = Toast.makeText(context, text, duration);

(37)



Podem ser geradas por Activities e

Services



Para criar um Status Bar Notification,

deve-se:

1. Obter uma referência para o

NotificationManager

2. Criar uma instância de Notification

3. Definir a mensagem expandida e o Intent

4. Passar a instância de Notification para o

NotificationManager

(38)



Obter uma referência para o

NotificationManager

Exibindo uma notificação: Passo 1

String ns = Context.NOTIFICATION_SERVICE;

NotificationManager mNotificationManager = (NotificationManager) getSystemService(ns);

(39)



Criar uma instância de Notification

Exibindo uma notificação: Passo 2

int icon = R.drawable.notification_icon;

CharSequence tickerText = "Hello";

long when = System.currentTimeMillis();

Notification notification = new Notification(icon, tickerText, when);

(40)



Definir a mensagem expandida e o Intent

Exibindo uma notificação: Passo 3

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);

(41)



Passar a instância de Notification para o

NotificationManager

Exibindo uma notificação: Passo 4

private static final int HELLO_ID = 1;

mNotificationManager.notify(HELLO_ID, notification);

(42)