Docstoc

Desarrollo de Aplicaciones Móviles ANDROID 00000101-00010010 ..._2_

Document Sample
Desarrollo de Aplicaciones Móviles ANDROID 00000101-00010010 ..._2_ Powered By Docstoc
					User Interface
  Android


   PUJ - MIT
  LOGyCA-CLI
                       Agenda
•   Declaring Layout
•   Creating Menus
•   Creating Dialogs
•   Handind UI Events
•   Notifying the User
•   Applying Styles and Themes
•   Building Custom Components
•   Bindig to Data with AdapterView
•   Common Layout Objects
•   How Android Draws Views
                    User Interface
                    (Introducción)
• Actividades –User Interface
  – setContentView()
• User Interface se construye usando objetos:
  – View
     • Widgets: Text fields , Buttons, …
  – View Groups
     • Layouts: Linear, Tabular, …
• Android para cada objeto de visualización
  maneja:
  – Medidas, despliegue, manejo de ciclo de vida, manejo
    de la interacción, ..
               User Interface
               (Introducción)
• La UI de una actividad se define usando un
  jerarquía de nodos:
  – View (Widgets)
  – ViewGroup (Layouts)
                 Declaring Layout
                  (Introducción)
• Arquitectura para la UI en una Actividad.
• Se puede declara el Layout con dos opciones:
  – Declaración en XML
     • Tags XML que corresponden a widgets y layouts
  – Declaración en runtime
     • Código para crear los objetos
• La ventaja de declarar en XML:
  – Separa la presentación del código que controla el
    comportamiento.
  – Crear XML para diferentes lenguajes utilizando el ismo
    comportamiento.
                           Declaring Layout
                          Escribiendo el XML
• Contiene un tag raiz que debe ser un View o
  un ViewGroup.
• Una vez adicionado se puede incluir objetos
  Layout o Widgets.
  <?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>
 Declaring Layout
Escribiendo el XML
             Declaring Layout
         (Load the XML Resource)
• Se debe cargar el recurso Layout desde el
  código de la aplicación.
• Se llama el método setContentView() pasando
  como referencia el recurso de la forma
  R.layout.layout_file_name

      public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView.(R.layout.escribiendoelxml);
      }
                Declaring Layout
                  (Atributos)
• Cada objeto View y ViewGroup soportan su
  propia variedad de etiquetas.
  – ID: Identificador único del View
     • Android:id=“@+id/my_button”
        – <Button android:id="@+id/my_button"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/my_button_text"/>
        – Button myButton = (Button) findViewById(R.id.my_button);
               Declaring Layout
             (Layout Parameters)
• Layout_something: Define los parámetros
  para el View y los que pertenecen al
  ViewGroup.
  – Wrap_content: Tamaño adecuado a lo que muestra.
  – Fill_parent: El tamaño que permite el nodo superior
                Declaring Layout
                (Layout Position)
            (Size, Padding, Margins)
• La unidad de localización y dimensión es el pixel.
   – getLeft() y getTop()
      • getLeft()= pixels a la izquierda, X
      • getTop = pixels desde arriba ,Y
   – getRight() getBotton()
• El tamaño es expresado con width y height.
   – getMeasuredWidth() y getMeasuredHeight(): nodo
     superior.
   – getWidth() y getHeight()
   – setPadding(int, int, int, int): Area interna.
                  Creating Menus
                   (Introducción)
• Tres tipos de Menús:
  – Options Menu
     • Aparece cuando el usuario presiona en el dispositivo la tecla
       de MENU
     • Icon Menu (Máximo seis items)
     • Expanded Menu
  – Context Menu
     • Una lista flotante que aparece cuando el usuario presionado
       por un tiempo prolongado sobre el view en un item
  – Submenu
     • Una lista flotante que el usuario abre cuando se presiona un
       menu item en un Options Menu o en context menu.
                       Creating Menus
                          (Defining)
•   Buena práctica definirla en un XML.
•   <menu>: Container para los items
•   <item>: Opción en un menú.
•   <group>: No visible, categoriza items de un menú.
    Usado para compartir propiedades.
    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
           <item android:id="@+id/new_game"
                   android:icon="@drawable/ic_new_game"
                   android:title="@string/new_game" />
         <item android:id="@+id/quit"
                   android:icon="@drawable/ic_quit"
                   android:title="@string/quit" />
    </menu>
               Creating Menus
        (Inflating a Menu Resource)
• Método onCreateOptionsMenu().
• Método geMenuInflater retorna una instancia de
  menú que se puede desplegar.
• Con la instancia de MenuInflater que se retorna con
  la invocación anterior se usa el método inflate.
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
      MenuInflater inflater = getMenuInflater();
      inflater.inflate(R.menu.menui, menu);
      return true;
    }
       Creating Menus
(Inflating a Menu Resource)
            Creating Menus
      (Creating an Options Menu)
• Cuando el usuario selecciona el botón
  de Menú, android invoca en la actividad
  el método onCreateOptionsMenu().
• Cuando se selecciona una opción del
  menú se invoca el método
  onOptionsItemSelected().
  – Identificar la opción seleccionada se
    puede usar el método getItemId()
        Creating Menus
  (Creating an Options Menu)
@Override
 public boolean onOptionsItemSelected(MenuItem item) {
 // Handle item selection
 switch (item.getItemId()) {
 case R.id.new_game:
 newGame();
 return true;
 case R.id.quit:
 quit();
 return true;
 default:
 return super.onOptionsItemSelected(item);
 }
 }

 public void newGame(){
 }

 public void quit(){
 }
          Creating Menus
 (Changing the menu when it opens)
     (Creating a Context Menu)
• El método onPrepareOptionsMenu()
  permite cambiar las opciones del menú.
• Un context menu se despliega cuando
  se mantiene presionado la pantalla en
  un item durante mucho tiempo.
           Creating Menus
      (Creating a Context Menu)
• Se recomienda usar los item en una ListView.
• Para registrar se usa el método
  registerForContextMenu().
• Para definir el menú de contexto que debe
  aparecer se usa el método
  onCreateContextMenu.
• Para definir el comportamiento del menú se usa
  el método onContextItemSelected().
                    Creating Menus
               (Creating a Context Menu)
private Button l2a;
private TextView tv1;
private Menu elm;


 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);

     tv1 = (TextView)findViewById(R.id.eltexto);
     l2a = (Button)findViewById(R.id.button1 );
     elm = (Menu)findViewById(R.id.group1 );

     registerForContextMenu(l2a);

     l2a.setOnClickListener(new View.OnClickListener(){
      public void onClick(View v) {
       Intent i = new Intent(getApplicationContext(), actividaddelista.class);
       startActivity(i);
      }
     });
 }
            Creating Menus
       (Creating a Context Menu)
@Override
public void onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo menuInfo) {
 super.onCreateContextMenu(menu, v, menuInfo);
 menu.setHeaderTitle("Context Menu");
   menu.add(0, v.getId(), 0, "Action 1");
   menu.add(0, v.getId(), 0, "Action 2");
}
@Override
public boolean onContextItemSelected(MenuItem item) {
   if(item.getTitle()=="Action 1"){
    tv1.setText("Se selecciono Action 1");
   }else if(item.getTitle()=="Action 2"){
    tv1.setText("Se selecciono Action 2");
   }else {
    return false;
   }
   return true;
}
           Creating Menus
        (Creating Submenus)
• Es un menú que el usuario puede abrir
  para seleccionar un item en otro menú.
• Se puede adicionar submenú a
  cualquier menú excepto a un submenú.
• Cuando el usuario selecciona un item
  desde un submenú, el pariente de nivel
  superior recibe el evento. Se usa el
  método onOptionsItemSelected().
                 Creating Menus
              (Creating Submenus)
• <?xml version="1.0" encoding="utf-8"?>
  <menu
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/file"
        android:icon="@drawable/file"
        android:title="@string/file" >
       <!-- "file" submenu -->
       <menu">
         <item android:id="@+id/new"
              android:title="@string/new" />
         <item android:id="@+id/open"
              android:title="@string/open" />
       </menu>
    </item>
  </menu>
                                         Creating Menus
@Override
                                      (Creating Submenus)
 public boolean onCreateOptionsMenu(Menu menu) {
      MenuInflater inflater = getMenuInflater();
      inflater.inflate(R.menu.unmenu, menu);
      elm = (Menu) menu;
      return true;
 }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
   // Handle item selection
   switch (item.getItemId()) {
   case R.id.mpopc1:
    tv1.setText("Se selecciono Opcion 1");
    return true;
   case R.id.mpopc2:
    tv1.setText("Se selecciono Opcion 2");
    return true;
   case R.id.mpopc3:
    tv1.setText("Se selecciono Opcion 3");
 return true;
   case R.id.item1:
    tv1.setText("Se selecciono Opcion 1 de la Opcion 1");
    elm.setGroupVisible(R.id.group1, false);
    return true;
   case R.id.item2:
    tv1.setText("Se selecciono Opcion 2 de la Opcion 1");
    return true;
   default:
    return super.onOptionsItemSelected(item);
   }
  }
             Creating Menus
             (Menu Groups)
• Es una colección de menu items que
  comparten algunas características.
• Características
  – Mostrar u ocultar: setGroupVisible().
  – Habilita o inhabilita: setGroupEnable().
  – Especifica cuando los items son chequeables:
    setGroupChekable().
                  Creating Menus
                  (Menu Groups)
<?xml version="1.0" encoding="utf-8"?>
   <menu
   xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:id="@+id/item1"
         android:icon="@drawable/item1"
         android:title="@string/item1" />
     <!-- menu group -->
     <group android:id="@+id/group1">
        <item android:id="@+id/groupItem1"
            android:title="@string/groupItem1" />
        <item android:id="@+id/groupItem2"
            android:title="@string/groupItem2" />
     </group>
   </menu>
                                    Creating Menus
                                    (Menu Groups)
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle item selection
    switch (item.getItemId()) {
    case R.id.mpopc1:
     tv1.setText("Se selecciono Opcion 1");
     return true;
    case R.id.mpopc2:
     tv1.setText("Se selecciono Opcion 2");
     return true;
    case R.id.mpopc3:
     tv1.setText("Se selecciono Opcion 3");
  return true;
    case R.id.item1:
     tv1.setText("Se selecciono Opcion 1 de la Opcion 1");
     elm.setGroupVisible(R.id.group1, false);
     return true;
    case R.id.item2:
     tv1.setText("Se selecciono Opcion 2 de la Opcion 1");
     return true;
    default:
     return super.onOptionsItemSelected(item);
    }
   }
}
           Creating Menus
       (Checkable menu items)
• Un Menú que puede tener una interfaz con
  opciones usando:
  – Checkbox
  – Radio Button
• El atributo android:checkableBehavior
  acepta:
  – Single: Radio Buttons
  – All: Checkboxes
  – None: Los items no son seleccionables
           Creating Menus
       (Checkable menu items)
<?xml version="1.0" encoding="utf-8"?>
  <menu
  xmlns:android="http://schemas.android.com/a
  pk/res/android">
    <group android:checkableBehavior="single">
      <item android:id="@+id/red"
          android:title="@string/red" />
      <item android:id="@+id/blue"
          android:title="@string/blue" />
    </group>
  </menu>
               Referencias
• [1] Plataforma android, página consultada el
  31/01/2011
http://developer.android.com/guide/basics/wha
  t-is-android.html
• [2] Plataforma Android, página consultada el
  31/01/2011
http://developer.android.com/sdk/index.html

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:8
posted:9/8/2011
language:German
pages:30