Aula 07 Construção de Telas (GUI) Dispositivos Moveis

Programação para Dispositivos Móveis

•

ESTÁCIO

0

Rinaldo Samurai

06/11/2017

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

CCT0080 – Programação para Dispositivos Móveis
Aula 07: Construção de Telas (GUI)
Componentes da Interface gráfica do usuário
A Classe View
Tipos de Viewgroups básicos
Componentes Widgets
Formas de implementação de telas
Ferramentas de Prototipação de Telas
Estrutura de Dados Homogênea
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
A Classe View
View
Widget x Viewgroup
Árvore de Componentes de leiaute
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
A classe View
Representa a um bloco básico para que o usuário coloque os componentes da interface;
Ocupa uma área retangular na tela e é responsável por desenhar e tratar os eventos;
A interface de uma aplicação Android é construída utilizando objetos View e ViewGroup
http://developer.android.com/reference/android/view/View.html
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
Widget x Viewgroup
O View é a classe base para os Widgets, que são responsáveis por criar Interfaces amigáveis e interativas para o usuário (botões, campo texto, etc);
O ViewGroup é uma subclasse para leiautes, que é um container invisível que recebe outras Views e define suas propriedades de leiaute 
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
A classe ViewGroups
Representa um contêiner de Views e também ViewGroups
É a classe base dos Leiautes
Permite construção de leiautes complexos ou aninhados, por poder ser composto por um ou mais ViewGroups
O método setContentView() define a referência do nó raiz da hierarquia.
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Arvore de Componentes Leiaute
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Tipos de Viewgroups básicos
LinearLayout
RelativeLayout
AbsoluteLayout
TableLayout
FrameLayout
GridLayout
ScrollView
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Os Leiaute
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
LinearLayout
Leiaute que arruma seus objetos em uma única linha ou uma única coluna
A direção da linha deve ser definida chamando setOrientation()
O alinhamento de todos os objetos filhos podem ser definidos pela chamada setGravity()
A orientação padrão é a horizontal
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" > 
<TextView android:id="@+id/txtvname" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text=" Name " 
android:textSize="20dip" /> 
<EditText 
android:id="@+id/edtvname" 
android:layout_width="120dip" 
android:layout_height="wrap_content" 
android:textSize="20dip" /> 
<Button 
android:id="@+id/btnsubmit" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text=" OK " /> 
</LinearLayout>
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
RelativeLayout
Um dos mais poderosos e versáteis leiautes disponíveis
Permite arrumar seus objetos um em relação ao outro
É possível posicionar uma imagem abaixo de um botão, que fica a esquerda de um textView.
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
RelativeLayout
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout mlns:android=
"http://schemas.android.com/apk/res/android" android:layout_width="match_parent" 
android:layout_height="match_parent" >
<TextView 
android:id="@+id/txtvnamerl“
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text=" Name " />
<EditText android:id="@+id/edtname“
android:layout_width="120dip" 
android:layout_height="wrap_content" 
android:layout_toRightOf="@+id/txtvnamerl”
android:textSize="20dip" /> 
<Button android:id="@+id/btnok" 
android:layout_width="wrap_content“
android:layout_height="wrap_content" 
android:layout_below="@+id/edtname“
android:layout_marginLeft="25dip“
android:text=" ok " /> </RelativeLayout>
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
AbsoluteLayout
Coloca seus objetos através de coordenadas
Define a exata posição (X, Y) de cada componente
É o menos flexível dos leiautes
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
AbsoluteLayout
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android=
http://schemas.android.com/apk/res/android
android:layout_width="match_parent" 
android:layout_height="match_parent" >
<TextView android:id="@+id/txtvnameab“
 android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="30dip" 
android:layout_y="30dip" 
android:text=" Name " />
<EditText android:id="@+id/edtnameab“
 android:layout_width="120dip“
 android:layout_height="wrap_content" 
android:layout_x="30dip" 
android:layout_y="60dip“
 android:textSize="20dip" /> 
<Button android:id="@+id/btnokab“
android:layout_width="wrap_content“
android:layout_height="wrap_content“
android:layout_x="30dip“
android:layout_y="110dip" 
android:text=" ok " /> </AbsoluteLayout>
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
TableLayout
Coloca seus objetos em linhas e colunas
Não coloca linhas definindo suas linhas ou colunas
Cada linha possui zero ou mais células
Cada célula pode colocar um objeto View
Células podem ser deixadas vazias
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
TableLayout
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
TableLayout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android=
http://schemas.android.com/apk/res/android
android:layout_width="match_parent“
android:layout_height="match_parent">
<TableRow android:layout_width="wrap_content“
 android:layout_height="wrap_content" >
 <TextView android:id="@+id/txtvnameab“
 android:layout_width="wrap_content“
 android:layout_height="wrap_content“
 android:text=" Name " />
<EditText android:id="@+id/edtnameab“
 android:layout_width="120dip" 
android:layout_height="wrap_content" 
android:textSize="20dip" /> </TableRow> 
<TableRow android:layout_width="wrap_content“
 android:layout_height="wrap_content" >
 <Button android:id="@+id/btnokab" 
android:layout_width="wrap_content“
android:layout_height="wrap_content“
android:text=" ok " /> 
</TableRow> </TableLayout>
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
FrameLayout
É definido para bloquear uma área para um objeto
Geralmente deve ser usado para colocar um objeto que tenha dificuldade de organização
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
FrameLayout
<?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android=
"http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent“
 android:layout_height="match_parent“ >
 <TextView android:id="@+id/txtvnameab“
 android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="left"
android:gravity="center" 
android:layout_marginLeft="30dip" 
android:text=" Name " />
<EditText android:id="@+id/edtnameab“
 android:layout_width="120dip“
 android:layout_height="wrap_content“
 android:layout_gravity="right“
 android:layout_marginRight="100dip" 
android:gravity="center_vertical“
 android:textSize="20dip" /> 
<Button android:id="@+id/btnokab“
 android:layout_width="wrap_content“
 android:layout_height="wrap_content“
 android:layout_gravity="center“
 android:layout_marginBottom="150dip“
 android:gravity="center" 
android:text=“ ok " /> </FrameLayout>
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
GridLayout
É composto por uma infinidade de linhas finas que separam a área de visualização em células
Agrupamos células para colocar os componentes na tela
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
GridLayout
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
ScrollView
Para ser rolada pelo Usuário
Permite que a tela seja maior que a tela do dispositivo
É um FrameLayout, o que significa que você pode escolher que irá rolar
Os leiautes do Android não suportam por padrão a rolagem vertical da tela. Para ter esta funcionalidade é necessário utilizar um ScrollView e colocar o leiaute que precisa da rolagem como elemento filho.
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
ScrollView
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
A classe R
A classe R é gerada automaticamente pelo ADT, utilizando as ferramentas do SDK e serve para mapear os recursos existentes no aplicativo na forma de constante. Dessa forma, podemos referenciar facilmente arquivos de leiaute , widgets e outros tipos de recursos como Strings:: e arrays
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Observação
Utilizar muitos layouts aninhados pode trazer problemas de desempenho. Prefira desenvolver leiautes que possuam poucos níveis de aninhamento. Consulte o seguinte guia para obter dicas de como melhorar o desempenho nessas situações.
http://developer.android.com/training/improving-layouts/ index.html 
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Componentes Widgets
EditView
Button
Checkbox
Radiobutton
DateTime Picker
Spinner
TextView
ImageView
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
TextView
Apresenta texto para o usuário
É como uma etiqueta de texto
Opcionalmente pode ser editado pelo usuário
Só que esta funcionalidade deve ser utilizada pela sua classe filha EditText
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
EditText
Subclasse de TextView que é configurada como editavel
Permite entrada de dados pelo usuário
Usado para entrada de dados a partir de um tipo pré-definido: texto, endereço de e-mail, identificador uniforme de recurso (URI), número ou telefone.
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
Button
Representa um widget de botão de apertar.
Utilizado para seleção de ações por meio do pressionamento.
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
Checkbox
Caixa de seleção
Permite selecionar mais de uma opção
Usado para seleção de um item, o qual é identificado por uma marca de verificação. 
Este controle permite a seleção de múltiplos itens
O usuário ainda pode optar por não selecionar nenhum item. 
Caso o usuário tenha escolhido algum item disponível no controle, este receberá um símbolo de marcado (ou checado) 
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
CheckBox
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=
http://schemas.android.com/apk/res/android
android:orientation="vertical“
android:layout_width="fill_parent“
android:layout_height="fill_parent">
 <CheckBox android:id="@+id/checkbox_meat“
   android:layout_width="wrap_content“
   android:layout_height="wrap_content“
 android:text="@string/meat“
    android:onClick="onCheckboxClicked"/>
 <CheckBox android:id="@+id/checkbox_cheese“
android:layout_width="wrap_content“ 
        android:layout_height="wrap_content“
         android:text="@string/cheese“
       android:onClick="onCheckboxClicked"/>
</LinearLayout>
public void onCheckboxClicked(View view) {
    // Is the view now checked?
    boolean checked = ((CheckBox) view).isChecked();
    
   // Check which checkbox was clicked
    switch(view.getId()) {
        case R.id.checkbox_meat:
            if (checked)
                // Put some meat on the sandwich
            else
                // Remove the meat
            break;
        case R.id.checkbox_cheese:
            if (checked)
                // Cheese me
            else
                // I'm lactose intolerant
            break;
        // TODO: Veggie sandwich
    }
}
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
Radiobutton
Possibilita a seleção mutuamente exclusiva de um item, a partir de um conjunto. 
O usuário deve obrigatoriamente escolher um único item.
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
RadioButton
<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android=
http://schemas.android.com/apk/res/android
    android:layout_width="fill_parent“
    android:layout_height="wrap_content“
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_pirates“
        android:layout_width="wrap_content“
        android:layout_height="wrap_content“
        android:text="@string/pirates“
        android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/radio_ninjas“
        android:layout_width="wrap_content“
        android:layout_height="wrap_content“
        android:text="@string/ninjas“
        android:onClick="onRadioButtonClicked"/>
</RadioGroup>
public void onRadioButtonClicked(View view) {
    // Is the button now checked?
    boolean checked = 
((RadioButton) view).isChecked();
      // Check which radio button was clicked
    switch(view.getId()) {
        case R.id.radio_pirates:
            if (checked)
                // Pirates are the best
            break;
        case R.id.radio_ninjas:
            if (checked)
                // Ninjas rule
           break;
    }
}
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Pickers
DateTime Picker
Android fornece controles prontos para uso para pegar a hora ou data
Cada Picker fornece controles para pegar cada parte da hora (hora, minuto, AM/PM) ou data (dia , mês , ano)
É recomendado que se use DialogFragment para acomodar cada Picker de hora ou data.
é um widget projetado para a seleção de datas que pode ser utilizado tanto de maneira direta, incluindo-o diretamente no layout, como indireta, através de uma caixa de diálogo (DatePickerDialog) apresentada para o usuário. 
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Exemplo
public static class TimePickerFragment extends DialogFragment
      implements TimePickerDialog.OnTimeSetListener {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
int minute = c.get(Calendar.MINUTE);
        // Create a new instance of TimePickerDialog and return it
  return new TimePickerDialog(getActivity(), this, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }
    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
        // Do something with the time chosen by the user
    }
}
<Button 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content“
    android:text="@string/pick_time" 
    android:onClick="showTimePickerDialog" />
No Java:
public void showTimePickerDialog(View v) {
    DialogFragment newFragment = 
 new TimePickerFragment();
    newFragment.show(
 getSupportFragmentManager(), "timePicker");
}
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
Spinner
Permite a apresentação de um conjunto de elementos por meio de uma lista suspensa, na qual o usuário pode selecionar o elemento desejado.
Conhecido em outras plataformas como combo box ou drop-down, no Android este widget é denominado de spinner
É utilizado para a apresentação de um conjunto de elementos por meio de um menu suspenso. 
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Exemplo
<Spinner
    android:id="@+id/planets_spinner“
    android:layout_width="fill_parent“
    android:layout_height="wrap_content" />
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
</resources>
Spinner spinner = (Spinner) findViewById(R.id.spinner);
// Create an ArrayAdapter using the string array and a default spinner layout
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
        R.array.planets_array, android.R.layout.simple_spinner_item);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(
 android.R.layout.simple_spinner_dropdown_item);
// Apply the adapter to the spinner
spinner.setAdapter(adapter);
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Exemplo
public class SpinnerActivity extends Activity implements OnItemSelectedListener {
    ...
    
    public void onItemSelected(AdapterView<?> parent, View view, 
            int pos, long id) {
        // An item was selected. You can retrieve the selected item using
        // parent.getItemAtPosition(pos)
    }
    public void onNothingSelected(AdapterView<?> parent) {
        // Another interface callback
    }
}
....
Spinner spinner = (Spinner) findViewById(R.id.spinner);
spinner.setOnItemSelectedListener(this);
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Visão Geral
ImageView
é um componente que nos permite trabalhar com imagens.
É capaz de carregar imagens de várias fontes
Isso permite que a imagem possa ser gerenciada por qualquer tipo de leiaute
<ImageView
android:layout_with=“wrap_content”
android:layout_heigth=“wrap_content”
android:layout_gravity=“center”
android:layout_marginBottom=“50dp”
android:src=“@drawable/logo” />
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto
Formas de implementação de Telas
Declarativa
Programática
A tela é descrita através do uso de tags XML de componentes View do Android
A tela é descrita através da instanciação de classes de componentes do tipo View do Android
setContentView(suaView);
Programação para Dispositivos Móveis
AULA 07: Construção de Telas (GUI)
Prof. Eduardo Luiz Pareto