COMPUTAÇÃO MÓVEL Prof.: Jean Carlo Mendes

Apresentação em tema: "COMPUTAÇÃO MÓVEL Prof.: Jean Carlo Mendes"— Transcrição da apresentação:

1 COMPUTAÇÃO MÓVEL Prof.: Jean Carlo Mendes jean.mendes@gmail.com

2 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

3 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

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

5 Android – Views - Atributos
ID: Todo objeto View possui um atributo ID associado a ele O formato da atributo é 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)

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

7 Android – Layouts comuns
Linear Layout Relative Layout Web View

8 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

9 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

10

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

12 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

13 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

14

15 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

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

17 Android – Botão – com texto
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" ... />

18 Android – Botão – imagem
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" ... />

19 Android – Botão – imagem e texto
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" ... />

20 Android – Botão – respondendo a cliques
<?xml version="1.0" encoding="utf-8"?> <Button xmlns:android=" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="sendMessage" />

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

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

23 Android – Botão A aparência do botão pode ser customizada..
Pode ser sem borda.... <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="sendMessage" style="?android:attr/borderlessButtonStyle" />

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

25 Android – Botão <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=" <item android:state_pressed="true" /> <item android:state_focused="true" /> <item /> </selector>

26 Android – Botão <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="sendMessage" />

27 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

28 Android – Text Field – Tipo de teclado
O tipo de teclado pode ser especificado <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:inputType="text Address" />

29 Android – Text Field – Tipo de teclado
“text”: teclado normal de texto text Address: teclado normal de texto + textUri: teclado normal de texto + símbolo / Number: teclado numérico básico Phone: teclado padrão “Telefone”

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

31 Android – Text Field – outros comportamentos - combinados
<EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:inputType="textPostalAddress| textCapWords| textNoSuggestions" />

32 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:layout_width="fill_parent" android:layout_height="wrap_content" android:inputType="text" android:imeOptions="actionSend" />

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

34 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

35 Android – Sugestão de auto-completar
<?xml version="1.0" encoding="utf-8"?> <AutoCompleteTextView xmlns:android=" android:layout_width="fill_parent" android:layout_height="wrap_content" />

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

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