Your SlideShare is downloading. ×
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
curso android tema 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

curso android tema 3

2,281

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AndroidElementos de la interfaz gráfica Yésica Hernández Jorge Frank Cesar Aguirre
  • 2. Repaso ¬¬
  • 3. El primer proyecto en Android
  • 4. Comprobando el ciclo de vida de un Activity
  • 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. Elementos de la interfaz gráfica Un mundo de posibilidades para combinar y crear
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Elementos de la interfaz gráfica Todos heredan propiedades de ViewElementos visuales Recuerden que un Widget también es una Vista.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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(); } });

×