AndroidLayouts

Prévia do material em texto

Conceitos básicos
 Estrutura do Projeto 
 src
• Classes da aplicação 
 gen
• Classe R
• Gerada automaticamente
 res/drawable
• Imagens em 3 resoluções diferentes
 res/layout
 res/values
• Internacionalização de strings
• Descrição de cores, estilos, etc
 AndroidManifest.xml 
A classe R
 Atualizada automaticamente pelo ADT quando o 
conteúdo da pasta res é alterado
 Também existe a classe android.R com alguns recursos 
pré-definidos
 Contém constantes que representam cada recurso
 R.drawable.nome_imagem
 R.layout.nome_layout
 R.string.nome_string
 R.color.red
 R.dimen.espaco
 R.array.nome_array
 R.style.nome_estilo
2
AndroidManifest.xml
 XML com as configurações da aplicação
 Nome, pacote e ícone 
 Classes de tela (Activity's)
 Versão mínima do SDK necessária
 Permissões (acessar Internet, efetuar ligações, etc)
 ADT fornece interface de edição
3
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.notification"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon"
android:label="@string/app_name">
<activity android:name=".MyActivity1"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".MyActivity2" />
</application>
<uses-permission android:name="android.permission.VIBRATE" />
</manifest> 4
strings.xml
 /res/values/values-en/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelloActivity!</string>
<string name="app_name">Hello World in Android</string>
</resources>
 /res/values/values-pt/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Alô Mundo, HelloActivity!</string>
<string name="app_name">Alô Mundo no Android</string>
</resources>
5
LogCat
 Não existe System.out.println(), mas existe o LogCat
 LogCat permite escrever mensagens no Log do 
Android
 Níveis de severidade
 Para ver no Eclipse:
 Window > Show View > Other > Android > LogCat
Verbose Log.v(tag, message)
Debug Log.d(tag, message)
Info Log.i(tag, message)
Warning Log.w(tag, message)
Error Log.e(tag, message,exception)
6
Activity e Intent
 Aplicação
 Ao instalar é associada a um usuário único
 Roda em seu processo separado
 Classe View
 Classe base para elementos de interface gráfica
 Classe Activity
 Container de elemento gráficos
 Gerencia um ciclo de vida
 Task (tarefa)
 Pilha de Activity's
 Pode haver activity`s de diferentes aplicações
 Classe Intent
 Classe que descreve uma intenção em realizar uma ação
7
Ciclo de vida de uma Activity
8
Ciclo de vida
 Entire Lifetime
 Fase entre o início e o fim da activity
 Compreende métodos entre onCreate() e onDestroy()
 Visible Lifetime
 Activity iniciada e na pilha da tarefa interagindo com o 
usuário ou não.
 Compreende os métodos (callbacks):
• onStart(), onStop(), onRestart()
• onPause(), onResume()
 Foreground Lifetime
 Activity visível e em primeiro interagindo com o usuário
 Callbacks:
• onResume(), onPause()
9
Botões Home e Back
 Botão Home
 Coloca a tarefa da activity em background e retorna
para a tela inicial do Android
 Botão Back
 Remove Activity do topo da pilha da tarefa
 Caso a pilha fique vazia retorna para a tela inicial
 Exercício
 Crie uma aplicação chamada ActivityLifecycle que gere
uma mensagem em cada callback do ciclo de vida. Ao
rodar a aplicação use os botões Home e Back para ver
as mensagens.
 Melhor usar LogCat, mas também pode ser classe Toast
10
Interfaces gráficas - Widgets
 *View
 *TextView, EditText, AutoCompleteTextView
 *Button, ImageButton
 *CheckBox, ToggleButton
 *RadioButton e RadioGroup
 *Spinner (combo)
 *AnalogClock, DigitalClock, Chronometer
 *DatePicker, TimePicker
 *ProgressBar, RatingBar
 *Toast
 *Dialogs
 *ProgressDialog
 *Alertas
 *Menus e Submenus
 *LayoutInflater
 *TabActivity, TabWidget
 *ListView, ListActivity
 VideoView, MediaController ???
11
Interfaces gráficas - View
 Classe base para qualquer componente gráfico
 Atributos
 android:padding(Left, Right, Top, Bottom)="2px"
 android:background="@color/blue|#RRGGBB"
 android:id="@+id/identificador"
 android:visibility="visible | invisible | gone"
 android:layout_width="wrap_content | match_parent"
 android:layout_height="wrap_content | match_parent"
 Métodos
 invalidate() - invalida View para ser redesenhada
 onDraw(Canvas) - responsável por desenhar componente
 onKeyDown(...), onKeyUp() - chamados quando uma tecla e 
pressione ou solta.
 onTouchEvent(...) - quando há movimento por toque na tela
 onFocusChange(...) 12
Interface gráfica - TextView's
 TextView - apresenta texto na tela
 EditText - apresenta caixa de edição de texto
 AutoCompleteTextView - caixa de edição com auto-complete
 Atributos
 android:text="@string/..."
 android:textColor="@color/..."
 android:password="true | false"
 android:numeric="integer | signed | decimal"
 android:singleLine="true | false"
 android:lines - quantas linhas de texto de altura
 AutoCompleteTextView
 android:completionThreshold="3" - quantidade de caracteres 
digitados antes aparecer sugestões
 setAdapter(ArrayAdapter) - definir lista de opções 13
TextView's – Exercício
 Crie um projeto chamado TesteViews
 Crie /res/layout/texts.xml
 Crie TextView, EditText e
AutoCompleteTextView
 EditText - aceita um número indicando
quantos caracteres disparam as
sugestões
 AutoCompleteTextView com completionThreshold="1"
 Crie /res/values/arrays.xml
 Crie um array de nomes iniciando por letras parecidas
 Na activity carregue o layout e o array
 Configure AutoCompleteTextView para usar o array
 Dica: use ArrayAdapter
 Detecte quando EditText for alterado e chame 
AutoCompleteTextView.setThreashold(int) 14
Button e ImageButton
 Permitem criar botões clicáveis na tela
 Button - subclasse de TextView
 ImageButton - subclasse de ImageView
 Setando imagem via Java e XML
 imageButton.setImageResource(R.drawable.image_id)
 button.setCompoundDrawablesWithIntrinsicBounds(left,top,right,bottom)
 <ImageButton android:src="@drawable/..." ... />
 <Button android:drawableLeft="@drawable/..." 
android:drawableTop="..."
android:drawableRight="..." android:drawableBottom="..." ... />
 Detectando clique:
15
final Button button = (Button) findViewById(R.id.button_id);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Perform action on click
}
});
CheckBox e ToggleButton
 Botão de dois estados, que
permite marcar um item na tela
 CheckBox
 android:text="@string/..."
 ToggleButton
 android:textOn="@string/..."
 android:textOff="@string/..."
 Métodos
 boolean isChecked() - retorna estado
 void toggle() - alterna estado
 void setChecked(boolean) - define estado
 boolen performClick() - simula click chamando o método 
onClick(..) do OnClickListener associado
16
RadioButton e RadioGroup
 RadioButton
 Permite selecionar apenas um item dentro da lista de 
um RadioGroup
 Exemplo
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RadioGroupandroid:id="@+id/radioSex"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="@+id/radioMale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Masculino" 
android:checked="true" />
<RadioButton
android:id="@+id/radioFemale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Feminino" />
</RadioGroup>
17
RadioButton e RadioGroup
 Pegar id do RadioButton selecionado
 RadioGroup.getCheckedRadioButtonId()
 Ou usar o callback onCheckedChanged(...)
private RadioGroup radioSexGroup;
private RadioButton radioSexButton;
private Button btnDisplay;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
radioSexGroup = (RadioGroup) findViewById(R.id.radioSex);
btnDisplay = (Button) findViewById(R.id.btnDisplay);
btnDisplay.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// get selected radio button from radioGroup
int selectedId = radioSexGroup.getCheckedRadioButtonId();
// find the radiobutton by returned id
radioSexButton = (RadioButton) findViewById(selectedId);
Toast.makeText(MainActivity.this,
radioSexButton.getText(), Toast.LENGTH_SHORT).show(); }});}}
18
Spinner (combo)
 Exibe um componente com texto que ao ser clicado 
expande um lista de opções
 Exemplo /res/layout/spinner.xml
<?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">
<Spinner android:id="@+id/comboPlanetas"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:prompt="Planetas" />
<ImageView android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
19
Spinner (combo)
 Exemplo SpinnerActivity.java (trechos)
 Definir a lista de opções e seus layouts
 Capturar seleção do usuário
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
R.layout.spinner_textview,
getResources().getStringArray(R.array.planetNames));
adapter.setDropDownViewResource(R.layout.simple_textview);
Spinner spinner = (Spinner) findViewById(R.id.comboPlanetas);
spinner.setAdapter(adapter);
spinner.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View v,
int position, long id) {
// ação
}
@Override
public void onNothingSelected(AdapterView<?> arg0) { }
}); 20
Spinner (combo)
 Exemplo dos layouts adicionais
 /res/layout/spinner_textview.xml
 /res/layout/simple_textview.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:textColor="@color/vermelho"
android:padding="2px"
android:textSize="18sp" />
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/azul"
android:textColor="@color/branco"
android:padding="10px"
android:textSize="20sp" />
21
Spinner (combo)
• Exercício: pegar o exemplo, entender e alterar
22
Spinner (combo)
 Outros métodos
 Object getSelectedItem()
• retorna o item selecionado
 long getSelectedItemId()
• retorna o id do item selecionado
 int getSelectedItemPosition()
• retorna a posição do item selecionado no array fornecido para 
ArrayAdapter
 void setPrompt(String)
• determina o prompt da lista de opções
 void setPromptId(int resId)
• determina o prompt a partir de um R.string.id_string
 void setSelection(int position)
• determina o item atualmente selecionado 23
Clock e Chronometer
 AnalogClock e DigitalClock
 Exibem um relógio digital ou analógico com a hora atual
 Chronometer
 Exibe um contador de tempo
 setBase(long time)
• Define o instante de tempo que o cronometro marca zero
• Usar SystemClock.elapsedRealtime()
 start(), stop()
• Disparar ou interromper contagem
 setOnChronometerTickListener(Chronometer.OnChron
ometerTickListener)
• Chamado pelo cronômetro quando seu contador muda
24
Clock e Chronometer - Exemplo
 /res/layout/clock.xml
<?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" >
<AnalogClock android:id="@+id/analogClock1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" />
<DigitalClock android:id="@+id/digitalClock1"
android:layout_width="match_parent”
android:layout_height="wrap_content"
android:gravity="center_horizontal" />
<Chronometer android:id="@+id/chronometer1"
android:layout_width="match_parent“
android:layout_height="wrap_content“
android:gravity="center_horizontal" />
</LinearLayout> 25
Clock e Chronometer - Exemplo
 Em uma activity:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.clock);
Chronometer chrono = (Chronometer) 
findViewById(R.id.chronometer1);
chrono.setBase(SystemClock.elapsedRealtime());
chrono.setOnChronometerTickListener(
new OnChronometerTickListener() {
@Override
public void onChronometerTick(Chronometer chronometer) {
long elapsedTime = SystemClock.elapsedRealtime()
- chronometer.getBase();
Log.i(this.getClass().getName(), "" + elapsedTime);
if (elapsedTime > 10000) chronometer.stop();
}
});
chrono.start();
} 26
Escolha de data, horário
 TimePicker
 Selecionar horário do dia (24h ou AM/PM)
 Aceita horas e minutos, mas não segundos
 Integer getCurrentHour(), getCurrentMinute()
 setIs24HourView(boolean), boolean is24HourView()
 setCurrentHour(Integer), setCurrentMinute(Integer)
 setOnTimeChangedListener(OnTimeChangedListener)
 DatePicker
 Selecionar um data (dia, mês, ano)
 int getDayOfMonth(), getMonth(), getYear()
 init(ano, mês, dia, OnDateChangeListener)
 updateDate(ano, mês, dia)
27
Escolha de data, horário - Exemplo
<?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">
<DatePicker android:id="@+id/dtpicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TimePicker android:id="@+id/tmpicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
28
ProgressBar
 Exibe um indicador de progresso de uma operação
 Estilos como percentual ou indeterminado
 Estilos (atributo style no XML):
 Métodos
29
?android:progressBarStyle (padrão) Indeterminado circular de tamanho médio
?android:progressBarStyleSmall Indeterminado circular de tamanho pequeno
?android:progressBarStyleLarge Indeterminado circular de tamanho grande
?android:progressBarStyleHorizontal Barra horizontal indeterminado ou com percentual
setProgress(int) Determina o nível de progresso para uma barra percentual
setSecondaryProgress(int) Determina o nível secundário de progresso para uma barra 
percentual
boolean isIndeterminate() Retorna true se for indeterminado
ProgressBar - Exemplo
<ProgressBar style="?android:progressBarStyleSmall"android:layout_width="wrap_content“ android:layout_height="wrap_content" />
<ProgressBar style="?android:progressBarStyle"
android:layout_width="wrap_content“ android:layout_height="wrap_content" />
<ProgressBar style="?android:progressBarStyleLarge"
android:layout_width="wrap_content“ android:layout_height="wrap_content" />
<ProgressBar style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true" />
<ProgressBar style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:progress="45" />
<ProgressBar style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:progress="45" android:secondaryProgress="80" />
30
RatingBar
 Mostra uma barra de classificação com estrelas
 A barra pode ser interativa ou apenas um indicator
 Métodos
 Estilos
31
int getNumStars() Retorna quantidade de estrelas totais
float getRating() Retorna a classificação (nota)
float getStepSize() Retorna o tamanho de cada salto das notas
boolean isIndicator() Retorna true se for indicadora ou false se for interativa
void setRating(float rating) Determina a classificação
?android:ratingBarStyle (default) Exibe estrelas grandes e permite alteração da 
classificação. Pode-se usar isIndicator=“true” para ser 
apenas um indicador.
?android:ratingBarStyleSmall Exibe estrelas pequenas. Apenas indicador.
?android:ratingBarStyleIndicator Exibe estrelas médias. Apenas indicador.
RatingBar
<RatingBar style="?android:ratingBarStyle"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:numStars="5" android:stepSize=".5" android:rating="2.5" />
<RatingBar style="?android:ratingBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5" android:stepSize=".5"
android:rating="2.5" android:isIndicator="true" />
<RatingBar style="?android:ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="10" android:stepSize=".5"
android:rating="2.5" />
<RatingBar style="?android:ratingBarStyleIndicator"
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:numStars="6" android:stepSize=".5" android:rating="2.5" />
32
Toast
 Exibição de alertas por tempo determinado
 Sem interação com usuário
 View personalizada
Toast toast = new Toast(this);
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(view);
toast.show();
 Apenas mensagem de texto
Toast.makeText(this, “Mensagem”, Toast.LENGTH_SHORT).show();
33
Dialogs
 Usado para abrir janelas na tela
 Recomendado usar os métodos a seguir para que a 
Activity gerencie o ciclo de vida do Dialog.
34
boolean showDialog(int id, Bundle) Tenta mostrar o Dialog para o id chamando 
onCreateDialog() se necessário, e em seguida 
onPrepareDialog(). Retorna true em caso de sucesso.
void dismissDialog(int id) Fecha o Dialog criado por showDialog() com o id 
especificado. Se nenhum Dialog com o id tiver sido 
mostrado lança IllegalArgumentException.
void removeDialog(int id) Remove qualquer referência para o Dialog especificado. 
Caso esteja sendo exibido, ele é fechado antes.
Dialog onCreateDialog (id, Bundle) Callback chamado quando um Dialog deve ser criado 
para o id especificado. Implementado pelo desenvolver.
void onPrepareDialog(id, Dialog, 
Bundle)
Callback que permite que o Dialog seja preparado antes 
de ser apresentado. Por exemplo, configurar alguma 
varíavel.
DatePickerDialog – Exercício 13
 Criar um projeto chamado DialogTeste
 Adicionar TextView e Button no layout com os texto 
“dd/mm/aaaa” e “Alterar”, respectivamente
 Ao clicar no botão deve aparecer um
DatePickerDialog para escolha do usuário
 Quando a data for escolhida deverá
aparecer no TextView.
 Dicas:
 Chame showDialog(id)
 Implemente o método onCreateDialog()
 Crie um listener OnDateSetListener para
ser notificado quando o usuário terminar a escolha
35
ProgressDialog
 Janela para mostrar o progresso de uma operação
 Como usar sem os métodos anteriores
 Mostrar o Dialog
• dialog = ProgressDialog.show(contexto, titulo, msg, bool indet);
• indet = se é indeterminado ou não (percentual)
 Feche o Dialog, quando concluir
• dialog.dismiss();
 Alterar o progresso (se indet = true)
• dialog.setProgress(int v)
• v entre 0 e 10000
36
AlertDialog
 Exibe um alerta ao usuário
 Conteúdo e botões de escolha personalizados
 Classe AlertDialog.Builder para construir alertas
37
setIcon(int resId) Determina o ícone a ser mostrado
setTitle(String) Determina o título do alerta
setMessage(String) Mensagem a ser mostrada no interior do alerta
setPositiveButton(String, listener) Texto do botão positivo (Sim, Yes, Ok, etc)
setNegativeButton(String, listener) Texto do botão negativo (Não, No, etc)
setItems(String [], listener) Items a serem mostrados para usuário selecionar
setSingleChoiceItems(String [], int 
checkedItem, listener)
Determina lista de RadioButtons a serem mostrados ao 
usuário
setCancelable(boolean) Alerta cancelável ou não. Cancelável significa que usuário 
não pode fechar com botão voltar.
show() Exibe o alerta para o usuário
cancel() Cancela o alerta
Nota: listener é uma instância de DialogInterface.OnClickListener
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("Are you sure you want to exit?");
builder.setCancelable(false);
builder.setPositiveButton("Yes", ...);
builder.setNegativeButton("No“, ...);
AlertDialog alert = builder.create();
AlertDialog - Exemplos
38
CharSequence[] items = {"Red", "Green", "Blue"};
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Pick a color");
builder.setItems(items,
new DialogInterface.OnClickListener() { ... } );
builder.show();
Interfaces gráficas - Layouts
 FrameLayout
 Componentes são organizados em pilha
 O último componente adicionado aparece na frente
 Atributos
39
Exercício - FrameLayout
 Crie um projeto chamado LayoutSamples
 Substitua o conteúdo de main.xml por:
 Modifique o layout acima usando outros atributos
 Adicione mais um ImageView.
 Dica: é possível usar "bottom|right" em layout_gravity
<?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="wrap_content”
android:background="#8b8b83">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/smile" />
</FrameLayout>
40
Interfaces gráficas - Layouts
 LinearLayout
 Componentes são organizados lado a lado
 Orientação horizontal (padrão) ou vertical
 Atributos
41
Exercício - LinearLayout
 Adicione o arquivo linearlayout.xml a seguir
 Não esqueça de fazer setContentView(R.layout.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:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Nome do programa" android:layout_gravity="right" />
<EditText android:layout_width="fill_parent" android:layout_height="wrap_content" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Descriçãocurta"
android:layout_gravity="right" />
<EditText android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2" android:gravity="top"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Detalhes"
android:layout_gravity="right" />
<EditText android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3" android:gravity="top"/>
</LinearLayout> 42
Interfaces gráficas - Layouts
 TableLayout
 Organiza componentes em linhas e colunas
 Cada linha é um TableRow (subclase de LinearLayout)
 Atributos
43
Exercício - TableLayout
 Adicione outro XML de layout ao projeto 
(tablelayout.xml)
(continua...)
<?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"
android:background="#505050">
<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content“
android:stretchColumns="1" >
<TableRow>
<TextView android:text="Produto A" />
<TextView android:text="R$ 100,00" android:gravity="right"
android:background="#808080" />
</TableRow>
<TableRow>
<TextView android:text="Produto B" android:background="#808080"/>
<TextView android:text="R$ 100,00" android:gravity="right" />
</TableRow>
</TableLayout>
44
Exercício 7 - TableLayout
<View android:layout_width="wrap_content"
android:layout_height="2px"
android:background="#000000" />
<TableLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1" >
<TableRow>
<TextView android:text="Produto A" />
<TextView android:text="Descrição curta" />
</TableRow>
<TableRow>
<TextView android:text="Produto B" />
<TextView android:text="Este produto possui uma descrição muito grande 
e não caberia na tela normalmente" android:background="#808080"/>
</TableRow>
</TableLayout>
</LinearLayout>
 Observe que layouts podem ser aninhados (colocados 
dentro de outro)
45
Interfaces gráficas - Layouts
 RelativeLayout
 Posiciona componentes relativamente a outros
 Componentes precisam ser identificados:
• android:id="@+id/id_componente"
 Atributos
46
Interfaces gráficas - Layouts
 AbsoluteLayout
 Permite controlar posição exata dos componentes
 Pode gerar péssimos resultados em diferentes telas
 Atributos
47
Dimensões
48
Outras subclasses de ViewGroup
 ListView
 Permite rolar conteúdo verticalmente usando ListAdapter
 GridView
 apresenta o conteúdo na forma de grade
 WebView
 exibe páginas Web
 Gallery e ImageSwitcher
 Organiza componentes lado a lado na horizontal
 Usado com ImageSwitcher para exibir galeria de imagens
 ScrollView
 permite rolar conteúdo maior que tela verticalmente
 TabHost exibe tela com abas
 E outros…
49
ListView
 Permite rolar conteúdo verticalmente e selecionar
 Interface ListAdapter
 Faz a ligação entre ListView e seus elementos
 Implementado pela classe ArrayAdapter <T>
• new ArrayAdapter<String>(contexto, itemResId, items);
• itemResId pode ser android.R.layout.simple_list_item_1
• items = array de T’s, neste caso Strings
 Atributos
50
ListView
 Maneira simplificada de uso:
 Coloque um elemento <ListView> com id no XML de layout
 Crie um array de elementos de um tipo T
 Obtenha o objeto ListView usando Activity.findViewById(id)
 Crie um ArrayAdapter passando o array de T’s
 Adicione o ArrayAdapter ao ListView usando ListView.setAdapter(..)
 Implemente o método onItemClick(...) de OnItemClickListener
 Passe a instância da classe que implementa onItemClick para 
ListView.setOnItemClickListener(...)
 Parâmetros de OnItemClickListener.onItemClick(...)
 AdapterView <?> parent - referência para o ListView
 View view - a View dentro de parent que foi clicada
 int position - a posição da View no ArrayAdapter, i.e., o índice do 
array
 int id - o id do elemento, neste caso será igual a position
51
Exercício - ListView
 No mesmo projeto LayoutSamples
 Renomeie main.xml para framelayout.xml
 Crie um arquivo /res/layout/main.xml com um ListView
 Crie uma Activity com nome LayoutSamples
 Crie dois arrays:
• String[] items = { "FrameLayout", "LinearLayout", "TableLayout" };
• int[] layouts = { R.layout.framelayout, R.layout.linearlayout, 
R.layout.tablelayout };
 Altere a antiga Activity para pegar o id do layout via 
parâmetro
 Adicione o método onItemClick(...) a LayoutSamples
• Ele deve passar o id do layout escolhido para a nova Activity 
criada
 A aplicação agora abrirá uma lista que ao ter um item 
selecionado apresenta a activity com o respectivo layout 52
GridView
 Exibe Views na forma de grade
 Todas as colunas têm a mesma largura
 Faz scrolling do conteúdo
 Atributos
 Exercício
 http://developer.android.com/resources/tutorials/views/hello-gridview.html
53
Interfaces gráficas - Recursos
 Na pasta values é possível adicionar XML de vários 
recursos
 Strings
 Cores
 Dimensões
 Array
• listas de inteiros, strings, ou recursos
 Estilos
• definir atributos de cada View uma única vez
 Temas
• aplicação de estilos a toda activity ou aplicação
54
Interfaces gráficas - Recursos
 Strings
 Declaração XML: <string name=“appname">Nome Aplicação</string>
 Atributos XML: @strings/appname
 Identificador: R.string.appname
 Texto: getResources().getString(R.string.appname)
 Cores
 Declaração XML: <color name="red">#FF0000</color>
 Atributos XML: @color/red
 Identificador: R.color.red
 Cor: getResources().getColor(R.color.red)
 Dimensões
 Declaração XML: <dimen name="spacing">2px</dimen>
 Atributos XML: @dimen/spacing
 Identificador: R.dimen.spacing
55
Interfaces gráficas - Recursos
 Array no XML
 No código Java
<integer-array name="iArray">
<item>10</item>
<item>20</item>
<item>30</item>
</integer-array>
<array name="planets">
<item>@drawable/mercurio</item>
<item>@drawable/venus</item>
...
<item>@drawable/plutao</item>
</array>
<string-array name="sArray">
<item>texto1</item>
<item>texto2</item>
...
</string-array>
56
Resources res = getResources();
String [] sa = res.getStringArray(R.array.sArray);
int [] ia = res.getIntArray(R.array.iArray);
int id =
TypedArray da =
Drawable dw0 =
Drawable dw1 =
Resources res = getResources();
String [] sa = res.getStringArray(R.array.sArray);
int [] ia = res.getIntArray(R.array.iArray);
int id = R.array.planets;
TypedArray da = res.obtainTypedArray(id);
Drawable dw0 = array.getDrawable(0);
Drawable dw1 = array.getDrawable(1);
Interfaces gráficas - Recursos
 Estilos
 Temas
<style name="nome_estilo">
<item name="android:textSize">14sp</item>
<item name="android:background">@color/branco</item>
...
</style> <TextView
android:layout_width="wrap_content"
...
style="@style/nome_estilo" />
<style name="nome_estilo" 
parent="android:style/Theme.Black">
<item name="android:textSize">14sp</item>
<item name="android:background">@color/branco</item>
...
</style>
57
<application 
... android:theme="@android:style/Theme.Back">
<activity ... android:theme="@android:style/Theme.Back">
<application ... android:theme="@style/nome_estilo">
<activity ... android:theme="@style/nome_estilo">
Interfaces gráficas - Exemplo recursos
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="planets">
<item>@drawable/mercurio</item>
<item>@drawable/venus</item>
...
<item>@drawable/plutao</item>
</array>
<string-array name="sarray"><item>texto1</item>
...
</string-array>
<color name="branco">#FFFFFF</color>
<style name="nome_estilo" parent="android:style/Theme.Black">
<item name="android:textSize">14sp</item>
<item name="android:background">@color/branco</item>
...
</style>
<dimen name="spacing">80dip</dimen>
<drawable name="gray">#888888</drawable>
</resources>
/res/values/recurso.xml
58