Scribd Logo
Upload

Welcome to Scribd!

  • 05 Presentación

    Uploaded by

    Tomasrique
    7 views15 pages
    Layouts

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Layouts

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views15 pages

    05 Presentación

    Uploaded by

    Tomasrique
    Layouts

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    Android Bolivia - Comunidad La Paz

    05/04/2013

    Comunidad Android Bolivia

    Desarrollo de Aplicaciones Android

    Layouts
    Sesin 5
    Gustavo Lizrraga
    http://about.me/lizgux

    Layout
    Es la estructura visual de una UI, existen dos
    formas de crear estructuras o layouts:
    XML (Diseo predefinido): Se declaran los
    elementos con un sencillo cdigo en XML.
    Java (En tiempo de ejecucin): Se pueden
    crear directamente ViewGroups y
    manipularlos.
    Es recomendable realizar la estructura en un
    archivo XML ya que facilitar la lectura del
    cdigo y buscar posibles errores en el mismo.

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    Layouts anidados
    LinearLayout (Orientacin Horizontal)
    View

    View

    View

    LinearLayout (Orientacin Vertical)


    View

    RelativeLayout
    View

    View
    En un diseo pueden
    utilizarse la cantidad
    de layouts que se
    desee.

    View

    Cargar el diseo XML


    Para asignar el diseo XML con los respectivos
    Layouts, se lo obtiene de la siguiente manera:
    R.layout.milayout
    Si el nombre de nuestro diseo es
    principal_layout.xml nuestro mtodo
    onCreate() quedar de la siguiente manera:
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.principal_layout);
    }

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    Agenda
    Layouts comunes

    Layouts avanzados

    LinearLayout
    RelativeLayout
    WebView

    Adaptadores
    ListView
    GridView

    Layouts comunes

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    LinearLayout
    Layout que ordenar los View o controles en
    forma lineal y pueden existir dos formas: Vertical
    u Horizontal.

    Vertical

    Horizontal

    Si el tamao de la Activity sobrepasa el tamao de la pantalla, se puede crear


    un scroll para los Views.

    LinearLayout
    Orientacin
    android:orientation="vertical"
    Define la orientacin, puede ser vertical u horizontal.
    Mrgenes
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    Define los mrgenes que tomar el layout.

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    LinearLayout
    Peso
    android:layout_weight="1"
    Define un peso a un View mientras el peso sea mayor
    tendr prioridad para ocupar espacios vacos.

    RelativeLayout
    Layout que ordenar los View o controles en
    forma relativa a otro.

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    RelativeLayout
    Alineacin superior
    android:layout_alignParentTop="true"
    Si colocamos el valor de true , hace que este View se
    alinee en la parte superior de ViewGroup padre.

    Alineacin centreada
    android:layout_centerVertical="true"
    Si colocamos el valor de true , centra este View de
    acuerdo al ViewGroup padre.

    RelativeLayout
    Posicionamiento inferior
    android:layout_below="@id/nombre_view"
    Posiciona el borde superior de este View por debajo del
    View especificado con un identificador de recurso.

    Posicionamiento lateral
    android:layout_toRightOf="@id/nombre_view"
    Coloca el borde izquierdo de la vista a la derecha de la
    vista especificada con un identificador de recurso.

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    WebView
    Es un View que nos permite visualizar pginas
    web.
    <html>
    <head>
    </head>
    <body>
    .
    <! pag web-->
    .
    </body>
    </html>

    WebView
    Adicin de un WebView
    <WebView
    android:id="@+id/miWebView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    WebView
    Cargar una pgina web
    WebView miWebView = (WebView)findViewById(R.id.miWebView);
    miWebView.loadUrl("http://www.androidbolivia.org");

    Requiere el permiso:
    <uses-permission android:name="android.permission.INTERNET"/>

    Cargar cdigo HTML


    WebView miWebView = (WebView)findViewById(R.id.miWebView);
    miWebView.loadData("<h1>Hola</h1>", "text/html", "utf-8");

    Crear una
    calculadora
    Ejercicio 1
    Crear una calculadora
    como se muestra en la
    imagen con las
    operaciones bsicas.

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    Layouts avanzados

    Listas
    Las mas comunes para mostrar conjunto de
    datos.

    Desarrollo de Aplicaciones Android

    Android Bolivia - Comunidad La Paz

    05/04/2013

    Adaptador de datos

    introducir

    datos

    colocar

    adaptador

    ListView

    ListView
    Muestra contenido en forma de lista

    Desarrollo de Aplicaciones Android

    10

    Android Bolivia - Comunidad La Paz

    05/04/2013

    ListView
    Implementacin
    <ListView
    android:id="@+id/miLista"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    </ListView>

    Datos
    String elementos[] = {"Item1", "Item2", "Item3", "Item4"};

    ListView
    Adaptador de datos
    ArrayAdapter<String> adaptador=new ArrayAdapter<String>(this,
    android.R.layout.simple_list_item_1, elementos);

    Asignacin del adaptador


    miLista.setAdapter(adaptador);

    Desarrollo de Aplicaciones Android

    11

    Android Bolivia - Comunidad La Paz

    05/04/2013

    ListView
    Para asignarle un evento click a cada tem del
    ListView la sintaxis es:
    miLista.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    public void onItemClick(AdapterView<?> padre, View
    itemClickeado, int posicion, long id) {
    //Ac el cdigo para cada item
    }
    });

    GridView
    Mostrar contenido en cuadrcula

    Desarrollo de Aplicaciones Android

    12

    Android Bolivia - Comunidad La Paz

    05/04/2013

    GridView
    Implementacin
    <GridView
    android:id="@+id/miGridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="50dp"
    android:gravity="center"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth">
    </GridView>

    GridView
    Datos
    String letras [] = new String[] { "A", "B",
    "C", "D", "E", "F", "G", "H", "I", "J", "K",
    "L", "M", "N", "O", "P", "Q", "R", "S", "T",
    "U", "V", "W", "X", "Y", "Z"};

    Adaptador de datos
    ArrayAdapter<String> adaptador = new
    ArrayAdapter<String>(this,
    android.R.layout.simple_list_item_1, letras);

    Desarrollo de Aplicaciones Android

    13

    Android Bolivia - Comunidad La Paz

    05/04/2013

    Diseo de un
    ListView con un
    adaptador
    Ejercicio 2
    Crear un nuevo diseo
    con ListView en el cul
    se listen varios items.

    Preguntas y respuestas

    Desarrollo de Aplicaciones Android

    14

    Android Bolivia - Comunidad La Paz

    05/04/2013

    Android Bolivia
    Comunidad La Paz

    Gustavo Lizrraga
    http://about.me/lizgux

    Desarrollo de Aplicaciones Android

    15

    You might also like