PDF de programación - Citas célebres

Taller
 de
 programación
 en
 Android
 

NIVEL
 BÁSICO
 


 


 

 

Citas
 Célebres
 

 

Android
 Party
 2014
 


 

Asun
 Vicente
 
@asun_vicente
 

1
 

Proyecto:
 Citas
 Célebres
 

•  Descripción
 de
 nuestra
 aplicación:
 

 


 


 
 

2
 

Proyecto:
 Citas
 Célebres
 

•  Fases
 de
 desarrollo
 
–  Fase
 1:
 Diseño
 de
 la
 interfaz
 
–  Fase
 2:
 Ac=var
 los
 botones
 
–  Fase
 3:
 Mejoras
 


 


 


 
 

3
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 1:
 Diseño
 de
 la
 interfaz
 

 


 


 
 

4
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 1:
 Diseño
 de
 la
 interfaz
 (con
 XML)
 
1)  Colocar
 los
 elementos
 LinearLayout,
 Bu4on
 y
 TextView
 en
 

main.xml
 

2)  Tamaño
 y
 centrado
 de
 los
 elementos
 
3) 

 

Insertar
 fondo
 y
 elegir
 los
 colores
 de
 los
 elementos
 


 


 
 

5
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 1:
 Diseño
 de
 la
 interfaz
 (con
 XML)
 

 
4)  Añadir
 el
 texto
 de
 los
 Bu$ons
 y
 el
 texto
 inicial
 de
 TextView
 

uQlizando
 strings.xml.
 


 

 


 


 
 

6
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 1:
 Diseño
 de
 la
 interfaz
 (con
 XML)
 

 
5)  Poner
 nuestro
 icono
 de
 la
 aplicación
 

 

 


 


 
 

7
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 2:
 Ac=var
 los
 botones
 

 


 


 
 

8
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 2:
 Ac=var
 los
 botones
 

 
Para
 dar
 “acción”
 a
 los
 botones
 debemos
 u:lizar
 un
 escuchador
 
de
 eventos
 o
 EventListener
 

 private Button b1,
b1 = (Button) findViewById(R.id.button1);
b1.setOnClickListener(new Button.OnClickListener() {

/// EN NUESTRO CASO: CAMBIAR LA CITA DENTRO DEL TEXTVIEW

public void onClick(View view) {
///LA ACCION A REALIZAR

}
});

9
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 2:
 Ac=var
 los
 botones
 

 
6)
 Definir
 las
 siguientes
 variables
 

 

10
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 2:
 Ac=var
 los
 botones
 

 
7)
 Asociar
 las
 variables
 con
 su
 representación
 XML
 

 

11
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 2:
 Ac=var
 los
 botones
 

 
8)
 Crear
 el
 escuchador
 de
 eventos
 onClick()
 para
 cada
 uno
 de
 
los
 botones
 y
 realizar
 la
 acción
 texto_cita.setText():
 

 

.
 
.
 
.
 

12
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 2:
 Ac=var
 los
 botones
 

 
Y
 tras
 acabar
 la
 fase
 2,
 nuestra
 primera
 aplicación
 ya
 funciona.
 
Al
 pulsar
 un
 botón
 aparecerá
 la
 cita
 del
 autor
 correspondiente:
 

 

13
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 3:
 Mejoras
 

 


 


 
 

14
 

Proyecto:
 Citas
 Célebres
 

•  Fase
 3:
 Mejoras
 

 
•  Al
 cambiar
 la
 orientación
 del
 disposiQvo,
 el
 aspecto
 

de
 la
 aplicación
 cambia
 à
 Mejora
 1
 

•  Ver
  la
  biogra_a
  de
  los
  autores
  de
  las
  citas
  en
  la
 

wikipedia
 à
 Mejora
 2
 

•  Añadir
  más
  citas
  y
  autores,
  y
  uQlizar
  ScrollView
 

como
 layout
 à
 Mejora
 3
 

15
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 1
 
•  Al
 cambiar
 la
 orientación
 del
 disposi=vo,
 el
 aspecto
 de
 la
 

aplicación
 cambia
 

•  SOLUCIÓN
 A:
 fijar
 la
 orientación
 de
 la
 pantalla
 

Simplemente
 hay
 que
 añadir
 al
 AndroidManifest.xml:
 


 android:screenOrientation="portrait“

16
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 1
 
•  Al
 cambiar
 la
 orientación
 del
 disposi=vo,
 el
 aspecto
 de
 la
 

aplicación
 cambia
 

•  SOLUCIÓN
 B:
 poner
 otro
 layout
 en
 la
 orientación
 horizontal
 

–  Crea
 la
 carpeta
 res/layout-­‐land
 
–  Copia
 en
 ella
 el
 fichero
 main.xml
 
–  Crea
 una
 vista
 similar
 a
 la
 de
 la
 figura:
 formada
 por
 un
 LinearLayout
 

que
 conQene
 2
 TextView
 y
 un
 TableLayout
 con
 2
 Bu4on
 por
 
columna.
 


 

17
 

Proyecto:
 Citas
 Célebres
 


 

 
Para
  conQnuar
  con
  el
  proyecto,
  uQlizad
  la
  solución
  A
  de
  la
 
mejora
  1,
  es
  decir,
  fijar
  la
  orientación
  de
  la
  pantalla
  a
  modo
 
“portrait”
 en
 el
 AndroidManifest.xml:
 

18
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 2
 
•  Ver
 la
 biograWa
 de
 los
 autores
 de
 las
 citas
 en
 la
 wikipedia:
 


 

19
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 2
 
•  Ver
 la
 biograWa
 de
 los
 autores
 de
 las
 citas
 en
 la
 wikipedia
 

 
1)  Añadir
 1
 botón
 al
 layout
 main.xml
 

2)  Ampliar
 el
 código
 de
 la
 acQvidad
 

20
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 2
 
•  Ver
 la
 biograWa
 de
 los
 autores
 de
 las
 citas
 en
 la
 wikipedia
 
2)  Ampliar
 el
 código
 de
 la
 acQvidad
 

21
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 2
 
•  Ver
 la
 biograWa
 de
 los
 autores
 de
 las
 citas
 en
 la
 wikipedia
 

 
2)  Ampliar
 el
 código
 de
 la
 acQvidad
 

22
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 2
 
•  Ver
 la
 biograWa
 de
 los
 autores
 de
 las
 citas
 en
 la
 wikipedia
 
2)  Ampliar
 el
 código
 de
 la
 acQvidad
 

23
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 2
 
•  Ver
 la
 biograWa
 de
 los
 autores
 de
 las
 citas
 en
 la
 wikipedia
 
2)  Ampliar
 el
 código
 de
 la
 acQvidad
 

24
 

Proyecto:
 Citas
 Célebres
 

•  Mejora
 3
 
•  Añadir
 más
 citas
 y
 autores,
 y
 u=lizar
 ScrollView
 como
 layout
 

•  Modificar
 el
 main.xml
 para
 añadir
 los
 nuevos
 botones
 e
 incluir
 el
 Qpo
 de
 

layout
 ScrollView.
 

•  Modificar
 
 el
 archivo
 .java
 para
 dar
 acción
 a
 los
 nuevos
 botones.
 

25
 

Proyecto:
 Citas
 Célebres
 

•  Si
 todo
 ha
 salido
 bien,
 este
 será
 el
 resultado:
 

 


 


 
 

26