AndroidElementos de la interfaz gráfica           Yésica Hernández                Jorge Frank              Cesar Aguirre
Repaso    ¬¬
El primer proyecto en Android
Comprobando el ciclo de vida      de un Activity
Elementos de la interfaz gráfica EscritorioExisten diferentes elementos que permiten alusuario interactuar con nuestras ap...
Elementos de la interfaz gráfica    Un mundo de    posibilidades   para combinar y        crear
Elementos de la interfaz gráfica EscritorioExisten diferentes elementos que permiten alusuario interactuar con nuestras ap...
Elementos de la interfaz gráfica Pantalla HomeEn todos los dispositivos existe unapantalla de home donde la mayoría dela v...
Botones físicos de la UI y su        interacción  Back Button  Por defecto regresa a la actividad  anterior  Se pueden pro...
Elementos de la interfaz gráfica  Get Menu Button  Muestra el menú que esté programado  en esa Activity, si no existe no h...
Elementos de la interfaz gráfica   Home Button   Este permite salir de la Activity en la que   se encuentra y mostrar la p...
Elementos de la interfaz gráfica       Pantalla Home    Existen diferentes tipos:            Live Wallpaper – Fondo de pa...
Elementos de la interfaz gráfica Elementos básicos Views Una Vista es un elemento básico de la interfaz del usuario, estas...
Elementos de la interfaz gráfica Elementos básicos Widgets Un widget es un elemento de interfaz de usuario más avanzado, l...
Elementos de la interfaz gráfica  Creando interfaces de usuario    Es vital crear interfaces intuitivas y    atractivas pa...
Elementos de la interfaz gráfica  Creando interfaces de usuario      A través de la combinación de Views      vamos hacer ...
Elementos de la interfaz gráfica      Todos                                        heredan                                ...
Elementos de la interfaz gráfica  Layout managers (layouts)  Son una extensión de la clase ViewGroup usada para  posiciona...
Elementos de la interfaz gráfica  Layout  El nombre de un elemento de XML es respectivo al  nombre de la clase Java que re...
Elementos de la interfaz gráfica   Ejemplo      Layout      <?xml version="1.0" encoding="utf-8"?>      <LinearLayout     ...
Elementos de la interfaz gráfica   ¿Por qué layouts en xml y no en código?    Usar un layout a través de recursos separa l...
Elementos de la interfaz gráfica     Optimizando Layouts     •   Evitar anidado inecesario:No poner un layout         dent...
Elementos de la interfaz gráfica  Usando layoutsDefiniendo lo que se mostrará en el ActivityLas Activities son la ventana ...
Elementos de la interfaz gráfica    Usando layouts         @Override         public void onCreate(Bundle         savedInst...
Elementos de la interfaz gráfica  Usando layouts         @Override         public void onCreate(Bundle         savedInstan...
Elementos de la interfaz gráfica  Widgets    Android Widget Toolbox    Android provee de un conjunto de Views para    ayud...
Elementos de la interfaz gráfica           View Group    View Group es una vista especial que puede    contener otras vist...
Elementos de la interfaz gráfica     Menús    Un menú contiene un conjunto de comandos    que están normalmente escondidos...
Elementos de la interfaz gráfica   Menús   Se destina un archivo para cada uno   guardado en la carpeta de res/menu      ...
Elementos de la interfaz gráfica         Dialogs         Son una pequeña ventana que aparece enfrente         de la Activi...
Elementos de la interfaz gráfica      Creando interfaces de usuario          Notifications          Algunas notificaciones...
Elementos de la interfaz gráfica    Creando interfaces de usuarioManipular elementos por códigoPara hacer la manipulación ...
Elementos de la interfaz gráfica      Programando en Android                                    Elementos visuales        ...
Elementos de la interfaz gráfica   Listeners   En Android existen varias maneras de   interceptar eventos para alguna inte...
Elementos de la interfaz gráfica      Listeners      La clase View contiene una interfaz que contiene      los métodos de ...
Elementos de la interfaz gráfica        Creando interfaces de usuario          Listeners          final Button button = (B...
Upcoming SlideShare
Loading in...5
×

curso android tema 3

2,309

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,309
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
98
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

curso android tema 3

  1. 1. AndroidElementos de la interfaz gráfica Yésica Hernández Jorge Frank Cesar Aguirre
  2. 2. Repaso ¬¬
  3. 3. El primer proyecto en Android
  4. 4. Comprobando el ciclo de vida de un Activity
  5. 5. Elementos de la interfaz gráfica EscritorioExisten diferentes elementos que permiten alusuario interactuar con nuestras aplicaciones ysuministrar servicios adicionales, además algunasde estos permiten mejorar el aspecto de nuestrasaplicaciones enriqueciéndolas.
  6. 6. Elementos de la interfaz gráfica Un mundo de posibilidades para combinar y crear
  7. 7. Elementos de la interfaz gráfica EscritorioExisten diferentes elementos que permiten alusuario interactuar con nuestras aplicaciones ysuministrar servicios adicionales, además algunasde estos permiten mejorar el aspecto de nuestrasaplicaciones enriqueciéndolas.
  8. 8. Elementos de la interfaz gráfica Pantalla HomeEn todos los dispositivos existe unapantalla de home donde la mayoría dela veces es personalizable estos ehace a través de componentesdinámicos de aplicaciones, estosproveen una ventana a nuestrasaplicaciones u ofrecen informacióndirectamente en la pantalla Home.
  9. 9. Botones físicos de la UI y su interacción Back Button Por defecto regresa a la actividad anterior Se pueden programar eventos en caso que se presione y que tenga un comportamiento diferente.
  10. 10. Elementos de la interfaz gráfica Get Menu Button Muestra el menú que esté programado en esa Activity, si no existe no hace nada.
  11. 11. Elementos de la interfaz gráfica Home Button Este permite salir de la Activity en la que se encuentra y mostrar la pantalla de home del dispositivo.
  12. 12. Elementos de la interfaz gráfica Pantalla Home Existen diferentes tipos:  Live Wallpaper – Fondo de pantalla animado e interactivo.  App widget – Es un componente de una aplicación el cual permite mostrar información en pantalla o echar un vistazo a la aplicación e interactuar con esta.El uso de los app Soy unwidgets varia en Soy un appcada dispositivo live widget wallpaper
  13. 13. Elementos de la interfaz gráfica Elementos básicos Views Una Vista es un elemento básico de la interfaz del usuario, estas son áreas rectangulares responsables del dibujado y manejo de eventos. Podrían verse como los controles básicos. por ejemplo :  ContextMenu  Menu  View  SurfaceView
  14. 14. Elementos de la interfaz gráfica Elementos básicos Widgets Un widget es un elemento de interfaz de usuario más avanzado, los podemos ver como los controles con los que el usuario interactúa. Por ejemplo:  Button  CheckBox  DatePicker  RelativeLayout La lista completa está en la documentación.
  15. 15. Elementos de la interfaz gráfica Creando interfaces de usuario Es vital crear interfaces intuitivas y atractivas para nuestras aplicaciones. Asegurándonos que es fácil de usar conforme se usa (esto debe ser prioritario en el diseño).
  16. 16. Elementos de la interfaz gráfica Creando interfaces de usuario A través de la combinación de Views vamos hacer la creación de las interfaces de usuario.
  17. 17. Elementos de la interfaz gráfica Todos heredan propiedades de ViewElementos visuales Recuerden que un Widget también es una Vista.
  18. 18. Elementos de la interfaz gráfica Layout managers (layouts) Son una extensión de la clase ViewGroup usada para posicionar los controles hijo de nuestra UI. Estas pueden ser anidadas para crear interfaces complejas y arbitrarias La manera más común de definir tus diseños y expresar la jerarquia de la vista es con un archivo de diseño XML. Los archivos XML ofrecen un estructura que es fácil de leer por el humano (muy parecida a HTML). Cada elemento en un XMl es un View o un objeto ViewGroup (o un descendiente). Los objetos Views son hojas de árbol y los objetos ViewGroup son ramas.
  19. 19. Elementos de la interfaz gráfica Layout El nombre de un elemento de XML es respectivo al nombre de la clase Java que representa. Entonces un elemento<TextView> crea un TextView en tu UI, y un elemento <LinearLayout> crea un LinearLayout view group. Cuando ustedes cargan un un recurso de layout, el sistema Android inicializa estos objetos correspondientes en los elementos del layout.
  20. 20. Elementos de la interfaz gráfica Ejemplo Layout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout>
  21. 21. Elementos de la interfaz gráfica ¿Por qué layouts en xml y no en código? Usar un layout a través de recursos separa la lógica de la capa de aplicación de la capa de presentación dando la flexibilidad de cambiar la presentación. Esto da la posibilidad de en caso de cambiar la capa presentación no se toque el código (Optimización para diferentes configuraciones de hardware).
  22. 22. Elementos de la interfaz gráfica Optimizando Layouts • Evitar anidado inecesario:No poner un layout dentro de otra a no ser que sea enecesario, estas requieren tiempo para ‘’inflarse’’ • Evitar usar demasiadas vistas: Cada vista en un layout quita tiempo y recursos (más de 80 vistas el tiempo se vuelve significativo). • Evitar anidado profundo: Es buena práctica de programación anidar a menos de 10 niveles
  23. 23. Elementos de la interfaz gráfica Usando layoutsDefiniendo lo que se mostrará en el ActivityLas Activities son la ventana donde serán mostradas nuestrasinterfaces de usuario. Para asignar la interface a desplegarusamos setContentView.setContentView Acepta directamente el id de un recurso o lainstancia de una vista.
  24. 24. Elementos de la interfaz gráfica Usando layouts @Override public void onCreate(Bundle savedInstanceState) { /*Se carga en donde el activity había sido dejada*/ super.onCreate(savedInstanceState); //Definimos la vista a desplegar setContentView(R.layout.main); }
  25. 25. Elementos de la interfaz gráfica Usando layouts @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView myTextView = new TextView(this); setContentView(myTextView); //Definimos atributos de la vista myTextView.setText("Hello, Android"); }
  26. 26. Elementos de la interfaz gráfica Widgets Android Widget Toolbox Android provee de un conjunto de Views para ayudarnos a crear interfaces simples (y modificarlos o extenderlos como sea necesario). Puede que en alguna situación ninguno de los widgets provistos por Android cumpla nuestras necesidades pero nuevas vistas pueden ser creadas por nosotros. Ejemplos de muchas vistas ¡YAY! http://developer.android.com/guide/tutorials/views/index .html
  27. 27. Elementos de la interfaz gráfica View Group View Group es una vista especial que puede contener otras vistas (hijo). El View Group es la clase base para layouts y views containers. Vean los View Groups más utilizados! http://developer.android.com/guide/topics/ui/layout- objects.html
  28. 28. Elementos de la interfaz gráfica Menús Un menú contiene un conjunto de comandos que están normalmente escondidos. Los comandos de un menú proveen medios para realizar operaciones, navegación, etc.
  29. 29. Elementos de la interfaz gráfica Menús Se destina un archivo para cada uno guardado en la carpeta de res/menu  Context Menú  Options menu
  30. 30. Elementos de la interfaz gráfica Dialogs Son una pequeña ventana que aparece enfrente de la Activity actual. La Activity que está debaja pierde el foco y el dialogo acepta toda la interacción del usuario. Estos son usados para interrumpir al usuario o hacer algunas tareas simples como un login prompt o una progress bar,
  31. 31. Elementos de la interfaz gráfica Creando interfaces de usuario Notifications Algunas notificaciones requieren respuesta del usuario otras no. • Toast Notification Para breves mensajes que vienen de algo en segundo plano. • Status Bar Notification Recordatorios persistentes que vienen del segundo plano y requieren la atención del usuario. • Dialog Notification Para notificaciones relacionadas con la Activity actual
  32. 32. Elementos de la interfaz gráfica Creando interfaces de usuarioManipular elementos por códigoPara hacer la manipulación de vistas en Android,necesitamos crear una instancia del objeto que vamos amodificar, para hacer referencia a esta usamos el id delelemento. Elemento miElementoX = (Elemento)findViewById(R.id.X);
  33. 33. Elementos de la interfaz gráfica Programando en Android Elementos visuales <LinearLayout Estructura xml xmlns:android="http://schemas.android.com/apk/res/an que define id droid" android:id="@+id/root"Referencia en android:orientation="vertical"el código del id android:background="@drawable/lt_gray" android:layout_width="fill_parent" android:layout_height="wrap_content"> package curso.ejemplo.ids; ... otros elementos.... import android.app.Activity; </LinearLayout> import android.os.Bundle; public class AndroidDemo extends Activity { private LinearLayout root; @Override public void onCreate(Bundle state) { super.onCreate(state); setContentView(R.layout.main); root = (LinearLayout) findViewById(R.id.root); } }
  34. 34. Elementos de la interfaz gráfica Listeners En Android existen varias maneras de interceptar eventos para alguna interacción con el usuario. Cuando consideramos eventos en la interfaz de usuario el acercamiento es capturar el evento desde el View object con el que el usuario interactúe.
  35. 35. Elementos de la interfaz gráfica Listeners La clase View contiene una interfaz que contiene los métodos de listening los cuales serán llamados por el framework de Android cuando algún listener haya sido lanzado. onClick() onLongClick() onFocusChange onKey() onTouch() onCreateContextMenu()
  36. 36. Elementos de la interfaz gráfica Creando interfaces de usuario Listeners final Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new OnClickListener() { public void onClick(View v) { // Perform action on clicks NombActivity, "Beep Bop", Toast.LENGTH_SHORT).show(); } });
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×