COMPUTAÇÃO MÓVEL Prof.: Jean Carlo Mendes jean.mendes@gmail.com mobile@mendesnet.com.br http://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ção EditText 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 strings String[] 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);