SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
Aperfeiçoando  a  Interface  com  o  
Usuário
	
  
	
  
	
  
Prof.	
  Fellipe	
  Aleixo	
  (fellipe.Aleixo@ifrn.edu.br)	
  
Conteúdo	
  
• Desenvolvimento	
  de	
  uma	
  aplicação	
  para	
  
calcular	
  a	
  área	
  de	
  um	
  triângulo	
  
• UBlização	
  de	
  Componentes	
  de	
  Interface	
  
– TableLayout,	
  TableRow,	
  TextView,	
  EditText,	
  
BuOon	
  
• Manipulação	
  de	
  Componentes	
  no	
  Código	
  
• Tratamento	
  de	
  Eventos	
  
– Listeners	
  
Criação	
  do	
  Projeto	
  
• No	
  início	
  da	
  IDE,	
  
selecione	
  a	
  opção	
  
“Start	
  a	
  new	
  
Android	
  Studio	
  
project”	
  
• Nomeie	
  o	
  projeto	
  e	
  
configure	
  o	
  SDK	
  
Interface	
  acBvity_main.xml	
  
• A	
  interface	
  gerada	
  é	
  apresentada	
  abaixo:	
  
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
TableLayout	
  
• SubsBtua	
  o	
  RelaBveLayout	
  por	
  um	
  
TableLayout	
  que	
  organiza	
  os	
  componentes	
  em	
  
forma	
  de	
  tabela	
  
• Sete	
  a	
  propriedade	
  stretchColumns	
  do	
  
TableLayout	
  para	
  “*”,	
  expandindo	
  as	
  colunas	
  
de	
  cada	
  linha	
  em	
  toda	
  a	
  largura	
  da	
  tela	
  
• Remova	
  o	
  componente	
  TextView	
  
TableLayout	
  
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:stretchColumns="*" >
</TableLayout>
TableRows	
  
• A	
  parBr	
  da	
  
“paleOe”	
  de	
  
componentes,	
  
adicione	
  quatro	
  
TableRows	
  um	
  
abaixo	
  do	
  outro	
  
TableRows	
  
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:stretchColumns="*"
android:id="@+id/tableLayout”>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tableRow1">
</TableRow>
...
TextView,	
  EditText,	
  BuOon	
  
• Nas	
  linhas	
  0,	
  1	
  e	
  3,	
  insira	
  
– um	
  Plain	
  TextView	
  e	
  	
  
– um	
  Plain	
  Text	
  (EditText)	
  
• Na	
  linha	
  2,	
  insira	
  um	
  
componente	
  BuOon	
  
TextView,	
  EditText,	
  BuOon	
  
• O	
  XML	
  da	
  1ª	
  linha	
  (TableRow):	
  
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tableRow2”>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView2" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/editText2" />
</TableRow>
Expandindo	
  um	
  Componente	
  
• Um	
  componente	
  pode	
  alongar-­‐se	
  por	
  mais	
  de	
  
uma	
  coluna	
  da	
  linha,	
  uBlizando	
  a	
  propriedade	
  
layout_span	
  (=	
  2)	
  
• Altere	
  esta	
  propriedade	
  no	
  botão	
  
Expandindo	
  um	
  Componente	
  
<TableRow
android:layout_width="wrap_content”
android:layout_height="wrap_content”
android:id="@+id/tableRow3">
<Button
android:layout_width="wrap_content”
android:layout_height="wrap_content”
android:text="New Button”
android:id="@+id/button”
android:layout_span="2" />
</TableRow>
strings.xml	
  
• No	
  arquivo	
  strings.xml,	
  defina	
  as	
  Strings	
  a	
  
serem	
  uBlizadas	
  na	
  aplicação:	
  
<resources>
<string name="app_name">Aula02AreaTriangulo</string>
<string name="action_settings">Settings</string>
<string name="base">Base</string>
<string name="altura">Altura</string>
<string name="area">Área</string>
<string name="calcular">Calcular</string>
</resources>
Edição	
  de	
  Traduções	
  
• Fácil	
  de	
  “internacionalizar”	
  a	
  aplicação	
  
UBlizando	
  as	
  Strings	
  
• No	
  layout,	
  subsBtua	
  as	
  propriedades	
  text	
  dos	
  
TextViews	
  e	
  do	
  BuOon,	
  referenciando	
  as	
  
Strings	
  no	
  arquivo	
  strings.xml	
  
<TableRow
android:layout_width="wrap_content”
android:layout_height="wrap_content”
android:id="@+id/tableRow1">
<TextView
android:layout_width="wrap_content”
android:layout_height="wrap_content”
android:text="@string/base”
android:id="@+id/textView”
android:layout_column="0" />
Propriedades	
  do	
  EditText	
  
• Em	
  todos	
  os	
  EditTexts,	
  sete	
  a	
  
propriedade	
  InputType	
  para	
  
number,	
  uma	
  vez	
  que	
  apenas	
  
números	
  poderão	
  ser	
  entrados	
  
• No	
  EditText	
  do	
  resultado	
  (Área),	
  as	
  
propriedades	
  Focusable,	
  
LongClickable	
  e	
  Editable	
  devem	
  ser	
  
falsas	
  
• A	
  interface	
  está	
  concluída!	
  
Propriedades	
  do	
  EditText	
  
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="number"
android:id="@+id/editText3"
android:focusable="false"
android:longClickable="false"
android:editable="false" />	
  
Componentes	
  e	
  Eventos	
  
• Toda	
  a	
  programação	
  do	
  aplicaBvo	
  é	
  realizada	
  na	
  
classe	
  MainAcBvity.java	
  
• Para	
  referenciar	
  os	
  componentes,	
  importar	
  os	
  
pacotes	
  que	
  definem	
  as	
  classe	
  dos	
  componentes	
  
– import	
  android.widget.BuOon;	
  
– import	
  android.widget.EditText;	
  
• Os	
  eventos	
  são	
  manipulados	
  com	
  objetos	
  
Listeners	
  
• Para	
  programar	
  o	
  evento	
  do	
  botão,	
  importar	
  o	
  
pacote	
  que	
  define	
  a	
  classe	
  OnClickListener	
  
– import	
  android.view.View.OnClickListener;	
  
Referenciando	
  os	
  Componentes	
  
• Definir	
  variáveis	
  (atributos	
  de	
  MainAcBvity)	
  para	
  
referenciar	
  os	
  componentes	
  
– private	
  BuOon	
  buOon1;	
  	
  
– private	
  EditText	
  editText1;	
  
– private	
  EditText	
  editText2;	
  
– private	
  EditText	
  editText3;	
  
• Recuperar	
  as	
  referências	
  no	
  método	
  OnCreate,	
  
uBlizando	
  o	
  método	
  findViewById	
  
– buOon1	
  =	
  (BuOon)	
  findViewById(R.id.buOon1);	
  
– editText1	
  =	
  (EditText)	
  findViewById(R.id.editText1);	
  
– editText2	
  =	
  (EditText)	
  findViewById(R.id.editText1);	
  
– editText3	
  =	
  (EditText)	
  findViewById(R.id.editText1);	
  
Manipulação	
  de	
  Eventos	
  
• Evento	
  de	
  clique	
  em	
  um	
  botão	
  
– Instanciar	
  um	
  objeto	
  OnClickListener	
  e	
  definir	
  este	
  
objeto	
  como	
  listener	
  (setOnClickListener)	
  
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button1 = (Button) findViewById(R.id.button1);
editText1 = (EditText) findViewById(R.id.editText1);
editText2 = (EditText) findViewById(R.id.editText2);
editText3 = (EditText) findViewById(R.id.editText3);
// Declara o “ouvinte” para o botão ...
button1.setOnClickListener(button1Listener);
}
Objeto	
  Listener	
  do	
  Botão	
  
• O	
  objeto	
  OnClickListener	
  invoca	
  o	
  método	
  
onClick	
  quando	
  o	
  botão	
  é	
  clicado	
  e	
  as	
  
instrução	
  no	
  método	
  são	
  então	
  executadas	
  
• No	
  exemplo:	
  
– o	
  valor	
  da	
  base	
  e	
  altura	
  são	
  recuperados	
  dos	
  
editText1	
  e	
  editText2,	
  respecBvamente	
  
– a	
  área	
  é	
  calculada	
  e	
  apresentada	
  no	
  editText3	
  
Objeto	
  Listener	
  do	
  Botão	
  
// Declara o “ouvinte” para o botão ...
OnClickListener button1Listener = new OnClickListener()
{
@Override
public void onClick(View v) {
double base = Double.parseDouble(editText1.getText().toString());
double altura = Double.parseDouble(editText2.getText().toString());
double area = base * altura / 2;
editText3.setText(String.format("%f", area));
}
};
Execução	
  da	
  Aplicação	
  
• No	
  menu	
  Run,	
  
selecione	
  a	
  opção	
  	
  
Run	
  ‘app’	
  (ou	
  você	
  
pode	
  clicar	
  no	
  botão	
  
correspondente)	
  
Execução	
  da	
  Aplicação	
  
Referências	
  
• Android	
  para	
  Programadores	
  –	
  Uma	
  
abordagem	
  baseada	
  em	
  aplicaBvos.	
  Paul	
  
Deitel	
  ...	
  [et	
  al.].	
  Bookman,	
  2013	
  
• Google	
  Android	
  –	
  Aprenda	
  a	
  criar	
  aplicações	
  
para	
  disposiBvos	
  móveis	
  com	
  o	
  Android	
  SKD.	
  
Ricardo	
  R.	
  Lecheta.	
  Novatec,	
  2013	
  

Mais conteúdo relacionado

Semelhante a 03_aperfeicoando a interface.pdf

Windows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows AzureWindows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows Azure
Vitor Ciaramella
 
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdfAula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
nosbisantos
 
Android 02 - Recycler View Adapter
Android 02 - Recycler View AdapterAndroid 02 - Recycler View Adapter
Android 02 - Recycler View Adapter
Aline Borges
 

Semelhante a 03_aperfeicoando a interface.pdf (20)

Material Design - Melhorando a experiência de seu App
Material Design - Melhorando a experiência de seu AppMaterial Design - Melhorando a experiência de seu App
Material Design - Melhorando a experiência de seu App
 
Cafe com Tom - ExtJS 4
Cafe com Tom - ExtJS 4Cafe com Tom - ExtJS 4
Cafe com Tom - ExtJS 4
 
Windows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows AzureWindows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows Azure
 
Desvendando as ferramentas e serviços para o desenvolvedor Android
Desvendando as ferramentas e serviços para o desenvolvedor AndroidDesvendando as ferramentas e serviços para o desenvolvedor Android
Desvendando as ferramentas e serviços para o desenvolvedor Android
 
Data binding com Windows Phone
Data binding com Windows PhoneData binding com Windows Phone
Data binding com Windows Phone
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na prática
 
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdfAula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
Aula 15 e 16 - Navegação - Activities e Fragments.pptx.pdf
 
Android Wear: Expandindo as funcionalidades do seu Android
Android Wear: Expandindo as funcionalidades do seu AndroidAndroid Wear: Expandindo as funcionalidades do seu Android
Android Wear: Expandindo as funcionalidades do seu Android
 
Desenvolvimento de Aplicações para Dispositivos Móveis - Android Studio - Par...
Desenvolvimento de Aplicações para Dispositivos Móveis - Android Studio - Par...Desenvolvimento de Aplicações para Dispositivos Móveis - Android Studio - Par...
Desenvolvimento de Aplicações para Dispositivos Móveis - Android Studio - Par...
 
Android na Prática
Android na PráticaAndroid na Prática
Android na Prática
 
Comunidades Baseadas Em Subsites
Comunidades Baseadas Em SubsitesComunidades Baseadas Em Subsites
Comunidades Baseadas Em Subsites
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
Android DevConference - Data Binding: Código limpo, manutenção garantida
Android DevConference - Data Binding: Código limpo, manutenção garantidaAndroid DevConference - Data Binding: Código limpo, manutenção garantida
Android DevConference - Data Binding: Código limpo, manutenção garantida
 
Intervalo Técnico - QG Mobile
Intervalo Técnico - QG MobileIntervalo Técnico - QG Mobile
Intervalo Técnico - QG Mobile
 
Apostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfvApostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfv
 
Dê seus primeiros passos no desenvolvimento com Android
Dê seus primeiros passos no desenvolvimento com AndroidDê seus primeiros passos no desenvolvimento com Android
Dê seus primeiros passos no desenvolvimento com Android
 
Android 02 - Recycler View Adapter
Android 02 - Recycler View AdapterAndroid 02 - Recycler View Adapter
Android 02 - Recycler View Adapter
 
Introdução ao Android
Introdução ao AndroidIntrodução ao Android
Introdução ao Android
 
Android - Parte 7
Android - Parte 7Android - Parte 7
Android - Parte 7
 
Treze ferramentas/frameworks para desenvolvimento Android
Treze ferramentas/frameworks para desenvolvimento AndroidTreze ferramentas/frameworks para desenvolvimento Android
Treze ferramentas/frameworks para desenvolvimento Android
 

Último

Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
sh5kpmr7w7
 
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
azulassessoria9
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
azulassessoria9
 
Sistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturasSistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturas
rfmbrandao
 
Expansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XVExpansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XV
lenapinto
 

Último (20)

Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmico
 
O desenvolvimento é um conceito mais amplo, pode ter um contexto biológico ou...
O desenvolvimento é um conceito mais amplo, pode ter um contexto biológico ou...O desenvolvimento é um conceito mais amplo, pode ter um contexto biológico ou...
O desenvolvimento é um conceito mais amplo, pode ter um contexto biológico ou...
 
AULÃO de Língua Portuguesa para o Saepe 2022
AULÃO de Língua Portuguesa para o Saepe 2022AULÃO de Língua Portuguesa para o Saepe 2022
AULÃO de Língua Portuguesa para o Saepe 2022
 
Falando de Física Quântica apresentação introd
Falando de Física Quântica apresentação introdFalando de Física Quântica apresentação introd
Falando de Física Quântica apresentação introd
 
Apresentação | Dia da Europa 2024 - Celebremos a União Europeia!
Apresentação | Dia da Europa 2024 - Celebremos a União Europeia!Apresentação | Dia da Europa 2024 - Celebremos a União Europeia!
Apresentação | Dia da Europa 2024 - Celebremos a União Europeia!
 
Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
 
aprendizagem significatica, teórico David Ausubel
aprendizagem significatica, teórico David Ausubelaprendizagem significatica, teórico David Ausubel
aprendizagem significatica, teórico David Ausubel
 
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
 
Sistema de Bibliotecas UCS - Cantos do fim do século
Sistema de Bibliotecas UCS  - Cantos do fim do séculoSistema de Bibliotecas UCS  - Cantos do fim do século
Sistema de Bibliotecas UCS - Cantos do fim do século
 
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
 
M0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptxM0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptx
 
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptxSlides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
 
Sistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturasSistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturas
 
Expansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XVExpansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XV
 
LENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretaçãoLENDA DA MANDIOCA - leitura e interpretação
LENDA DA MANDIOCA - leitura e interpretação
 
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
 
INTERTEXTUALIDADE atividade muito boa para
INTERTEXTUALIDADE   atividade muito boa paraINTERTEXTUALIDADE   atividade muito boa para
INTERTEXTUALIDADE atividade muito boa para
 
P P P 2024 - *CIEJA Santana / Tucuruvi*
P P P 2024  - *CIEJA Santana / Tucuruvi*P P P 2024  - *CIEJA Santana / Tucuruvi*
P P P 2024 - *CIEJA Santana / Tucuruvi*
 

03_aperfeicoando a interface.pdf

  • 1. Aperfeiçoando  a  Interface  com  o   Usuário       Prof.  Fellipe  Aleixo  (fellipe.Aleixo@ifrn.edu.br)  
  • 2. Conteúdo   • Desenvolvimento  de  uma  aplicação  para   calcular  a  área  de  um  triângulo   • UBlização  de  Componentes  de  Interface   – TableLayout,  TableRow,  TextView,  EditText,   BuOon   • Manipulação  de  Componentes  no  Código   • Tratamento  de  Eventos   – Listeners  
  • 3. Criação  do  Projeto   • No  início  da  IDE,   selecione  a  opção   “Start  a  new   Android  Studio   project”   • Nomeie  o  projeto  e   configure  o  SDK  
  • 4. Interface  acBvity_main.xml   • A  interface  gerada  é  apresentada  abaixo:   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
  • 5. TableLayout   • SubsBtua  o  RelaBveLayout  por  um   TableLayout  que  organiza  os  componentes  em   forma  de  tabela   • Sete  a  propriedade  stretchColumns  do   TableLayout  para  “*”,  expandindo  as  colunas   de  cada  linha  em  toda  a  largura  da  tela   • Remova  o  componente  TextView  
  • 7. TableRows   • A  parBr  da   “paleOe”  de   componentes,   adicione  quatro   TableRows  um   abaixo  do  outro  
  • 9. TextView,  EditText,  BuOon   • Nas  linhas  0,  1  e  3,  insira   – um  Plain  TextView  e     – um  Plain  Text  (EditText)   • Na  linha  2,  insira  um   componente  BuOon  
  • 10. TextView,  EditText,  BuOon   • O  XML  da  1ª  linha  (TableRow):   <TableRow android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tableRow2”> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Text" android:id="@+id/textView2" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/editText2" /> </TableRow>
  • 11. Expandindo  um  Componente   • Um  componente  pode  alongar-­‐se  por  mais  de   uma  coluna  da  linha,  uBlizando  a  propriedade   layout_span  (=  2)   • Altere  esta  propriedade  no  botão  
  • 12. Expandindo  um  Componente   <TableRow android:layout_width="wrap_content” android:layout_height="wrap_content” android:id="@+id/tableRow3"> <Button android:layout_width="wrap_content” android:layout_height="wrap_content” android:text="New Button” android:id="@+id/button” android:layout_span="2" /> </TableRow>
  • 13. strings.xml   • No  arquivo  strings.xml,  defina  as  Strings  a   serem  uBlizadas  na  aplicação:   <resources> <string name="app_name">Aula02AreaTriangulo</string> <string name="action_settings">Settings</string> <string name="base">Base</string> <string name="altura">Altura</string> <string name="area">Área</string> <string name="calcular">Calcular</string> </resources>
  • 14. Edição  de  Traduções   • Fácil  de  “internacionalizar”  a  aplicação  
  • 15. UBlizando  as  Strings   • No  layout,  subsBtua  as  propriedades  text  dos   TextViews  e  do  BuOon,  referenciando  as   Strings  no  arquivo  strings.xml   <TableRow android:layout_width="wrap_content” android:layout_height="wrap_content” android:id="@+id/tableRow1"> <TextView android:layout_width="wrap_content” android:layout_height="wrap_content” android:text="@string/base” android:id="@+id/textView” android:layout_column="0" />
  • 16. Propriedades  do  EditText   • Em  todos  os  EditTexts,  sete  a   propriedade  InputType  para   number,  uma  vez  que  apenas   números  poderão  ser  entrados   • No  EditText  do  resultado  (Área),  as   propriedades  Focusable,   LongClickable  e  Editable  devem  ser   falsas   • A  interface  está  concluída!  
  • 17. Propriedades  do  EditText   <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="number" android:id="@+id/editText3" android:focusable="false" android:longClickable="false" android:editable="false" />  
  • 18. Componentes  e  Eventos   • Toda  a  programação  do  aplicaBvo  é  realizada  na   classe  MainAcBvity.java   • Para  referenciar  os  componentes,  importar  os   pacotes  que  definem  as  classe  dos  componentes   – import  android.widget.BuOon;   – import  android.widget.EditText;   • Os  eventos  são  manipulados  com  objetos   Listeners   • Para  programar  o  evento  do  botão,  importar  o   pacote  que  define  a  classe  OnClickListener   – import  android.view.View.OnClickListener;  
  • 19. Referenciando  os  Componentes   • Definir  variáveis  (atributos  de  MainAcBvity)  para   referenciar  os  componentes   – private  BuOon  buOon1;     – private  EditText  editText1;   – private  EditText  editText2;   – private  EditText  editText3;   • Recuperar  as  referências  no  método  OnCreate,   uBlizando  o  método  findViewById   – buOon1  =  (BuOon)  findViewById(R.id.buOon1);   – editText1  =  (EditText)  findViewById(R.id.editText1);   – editText2  =  (EditText)  findViewById(R.id.editText1);   – editText3  =  (EditText)  findViewById(R.id.editText1);  
  • 20. Manipulação  de  Eventos   • Evento  de  clique  em  um  botão   – Instanciar  um  objeto  OnClickListener  e  definir  este   objeto  como  listener  (setOnClickListener)   protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button1 = (Button) findViewById(R.id.button1); editText1 = (EditText) findViewById(R.id.editText1); editText2 = (EditText) findViewById(R.id.editText2); editText3 = (EditText) findViewById(R.id.editText3); // Declara o “ouvinte” para o botão ... button1.setOnClickListener(button1Listener); }
  • 21. Objeto  Listener  do  Botão   • O  objeto  OnClickListener  invoca  o  método   onClick  quando  o  botão  é  clicado  e  as   instrução  no  método  são  então  executadas   • No  exemplo:   – o  valor  da  base  e  altura  são  recuperados  dos   editText1  e  editText2,  respecBvamente   – a  área  é  calculada  e  apresentada  no  editText3  
  • 22. Objeto  Listener  do  Botão   // Declara o “ouvinte” para o botão ... OnClickListener button1Listener = new OnClickListener() { @Override public void onClick(View v) { double base = Double.parseDouble(editText1.getText().toString()); double altura = Double.parseDouble(editText2.getText().toString()); double area = base * altura / 2; editText3.setText(String.format("%f", area)); } };
  • 23. Execução  da  Aplicação   • No  menu  Run,   selecione  a  opção     Run  ‘app’  (ou  você   pode  clicar  no  botão   correspondente)  
  • 25. Referências   • Android  para  Programadores  –  Uma   abordagem  baseada  em  aplicaBvos.  Paul   Deitel  ...  [et  al.].  Bookman,  2013   • Google  Android  –  Aprenda  a  criar  aplicações   para  disposiBvos  móveis  com  o  Android  SKD.   Ricardo  R.  Lecheta.  Novatec,  2013