COMPUTAÇÃO MÓVELProf.: Jean Carlo Mendesjean.mendes@gmail.commobile@mendesnet.com.brhttp://www.mendesnet.com.br

Android – Interface com usuário• Todos os elementos da interface são baseados nos objetos View e ViewGroup

• View: Objeto que desenha algo na tela com o qual o usuário interage

• ViewGroup: Objeto que suporta outras Views (ou ViewGroups) para definir seu layout

Android – View e ViewGroup• A interface de cada componente do App é definida usando a hierarquia de ViewGroup e View.

• Cada ViewGroup é um container invisível que organiza Views filhas

Android – Layouts• Um layout define a estrutura visual para a interface com o usuário

• Pode ser definido de duas formas• Declarado através de arquivo XML• Instanciado via código em tempo de execução

• Declarar em XML é mais vantajoso (desacopla visual e programação)

Android – Views - Atributos• ID: Todo objeto View possui um atributo ID associado a ele

• O formato da atributo é• Android:id=“@+id/nome”• O símbolo arroba indica que o parser XML deve expandir o resto do texto e trata-lo como um recurso

• O símbolo “+” significa que este é um recurso novo que deve ser criado e adicionado no arquivo de recursos (R.java)

Android – Posição do Layout• A view é baseada em retângulo

• A localização da view é dada por coordenadas left – top e duas dimensões (width e height) – (unidade é pixel)

Android – Layouts comuns• Linear Layout

• Relative Layout

• Web View

Android – Linear Layout• É um ViewGroup que alinha todos os filhos em uma direção única (vertical ou horizontal)

• Você pode especificar a direção usando o atributo android:orientation

Android – Linear Layout - weight• O LinearLayout suporta a atribuição de “peso” para determinado elemento filho (usando o atributo android:layout_weight)

• Um peso maior faz com que o elemento possa ser expandido para ocupar área livre na tela

• O peso padrão é zero

• Elemento sem peso terá como tamanho padrão o tamanho necessário para sua exibição

Android – Relative Layout• É um ViewGroup que alinha os filhos em posições relativas. A posição de cada view pode ser especificada em relação a elementos “irmãos” ou em relação à área de seu “pai”

Android – Relative Layout - Posicionamento• Com o layout relativo podemos alinhar dois elementos pela borda direita, colocar um abaixo do outro, centralizar na tela, etc

• Por padrão os elementos filhos são desenhados à partir da borda esquerda superior do layout

Android – Relative Layout - Posicionamento• Android:layout_alignParentTop Se true, faz com que a

borda superior desta view case com a borda superior do “pai”

• Android:layout_centerVertical Se true, faz com que o elemento se alinhe com o centro do seu “pai”

• Android:layout_below Posiciona a borda superior do elemento abaixo do elemento especificado (ID)

• Android:layout_toRightOf Posiciona a borda superior do elemento à direita do elemento especificado (ID)

• Para ver todas as possibilidades, clique aqui

Android – Controles de Entrada• São os componentes interativos dentro da interface com o usuário

• Para adicionar um controle à UI basta adiciona-lo ao arquivo XML de Layout

Android – Botão• Consiste em um texto ou ícone (ou ambos) que comunica qual ação ocorre quando o usuário o toca (tap)

Android – Botão – com texto<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_text" ... />

Android – Botão – imagem<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/button_icon" ... />

Android – Botão – imagem e texto<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_text" android:drawableLeft="@drawable/button_icon" ... />

Android – Botão – respondendo a cliques<?xml version="1.0" encoding="utf-8"?><Button xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" />

Android – Botão – dentro da activity

/** Chamado quando o usuário toca o botão*/public void sendMessage(View view) { // Do something in response to button click}

Android – Botão – ou.... Adiciona o listener

Button button = (Button) findViewById(R.id.button_send);button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Do something in response to button click }});

Android – Botão

A aparência do botão pode ser customizada..Pode ser sem borda....

<Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" style="?android:attr/borderlessButtonStyle" />

Android – Botão

• Pode ter background totalmente customizado• Para isto um XML contendo as referencias para as imagens padrão, pressionado e com foco deve ser criado em res/drawable (onde deve também constar as imagens)

Android – Botão

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/button_focused" android:state_focused="true" /> <item android:drawable="@drawable/button_default" /></selector>

Android – Botão

<Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" android:background="@drawable/btn_customizado" />

Android – Text Field

• Campo de texto editável. • Pode-se usar um widget AutoCompleteTextView para prover funcionalidade de auto completar

• Pode ser single line ou multi line• Tocar o Text Field faz o teclado virtual ser ativado

Android – Text Field – Tipo de teclado• O tipo de teclado pode ser especificado<EditText android:id="@+id/email_address" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/email_hint" android:inputType="textEmailAddress" />

Android – Text Field – Tipo de teclado• “text”: teclado normal de texto• textEmailAddress: teclado normal de texto + símbolo @

• textUri: teclado normal de texto + símbolo /• Number: teclado numérico básico• Phone: teclado padrão “Telefone”

Android – Text Field – outros comportamentos

• “textCapSentences”: teclado normal de texto que torna a primeira letra de cada frase em maiusculo

• “textCapWord”: teclado normal de texto que torna a primeira letra de cada palavraem maiusculo Phone: teclado padrão “Telefone”

• “textPassword”• “textMultiine”

Android – Text Field – outros comportamentos - combinados<EditText android:id="@+id/postal_address" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/postal_address_hint" android:inputType="textPostalAddress| textCapWords| textNoSuggestions" />

Android – Ações do teclado• Você pode especificar a ação a ser tomada quando o usuário terminar o preenchimento do campo (android:imeOptions)

<EditText android:id="@+id/search" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/search_hint" android:inputType="text" android:imeOptions="actionSend" />

Android – Respondendo açãoEditText editText = (EditText) findViewById(R.id.search);editText.setOnEditorActionListener(new OnEditorActionListener() { @Override public boolean onEditorAction(TextView v, int actionId, KeyEvent event) { boolean handled = false; if (actionId == EditorInfo.IME_ACTION_SEND) { sendMessage(); handled = true; } return handled; }});

Android – Sugestão de auto-completar• Deve-se usar uma subclasse da EditText chamada AutoCompleteTextView

• Deve-se especificar um “Adapter” de onde o texto sugerido será buscado (android.widget.Adapter)

• Sugestões podem vir de um BD ou de um vetor de valores, por exemplo

Android – Sugestão de auto-completar

<?xml version="1.0" encoding="utf-8"?><AutoCompleteTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/autocomplete_country" android:layout_width="fill_parent" android:layout_height="wrap_content" />

Android – res/values/strings.xml<?xml version="1.0" encoding="utf-8"?><resources> <string-array name="countries_array"> <item>Afghanistan</item> <item>Albania</item> <item>Algeria</item> <item>American Samoa</item> <item>Andorra</item> <item>Angola</item> <item>Anguilla</item> <item>Antarctica</item> ... </string-array></resources>

Android –Activty ou fragment...AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.autocomplete_country);// Busca as stringsString[] countries = getResources().getStringArray(R.array.countries_array);// Cria o adapter e liga ao AutoCompleteTextView ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, countries);textView.setAdapter(adapter);