Translate

domingo, 9 de junio de 2013

Entendiendo el proyecto Hola Mundo

Entendiendo el proyecto Hola Mundo.

Vamos a tratar de entender los elementos que se generaron en la publicacion pasada (http://progrmrmalasmanas.blogspot.mx/2013/06/android-studio-tutorial.html) donde se genera un proyecto HelloWorld usando AndroidStudio.


Si miramos en el proyecto generando veremos la clase Activity la que es la base para la interaccion visual y los componentes de la aplicacion. Se podria pensar que es similar a un formulario del desarrollo desktop.



La clase se encuentra en la carpeta src -> main -> java


package com.roque.rueda.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class HelloWorld extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.helloworld_activity);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.hello_world, menu);
        return true;
    }
    
}


En Android los componentes visuales son llamados Views, los cuales podrían compararse con los controles del desarrollo desktop. La plantilla que se genera con el proyecto sobre escribe el método onCreate el cual llama al método setContentView el cual asigna la interfaz. Esto inflando un recurso.



setContentView(R.layout.helloworld_activity);




Los recursos para el proyecto Android se almacenan en la carpeta res de la jerarquía de carpetas. Esta incluye varias carpetas layout (diseño de la interfaz de usuario), values (valores simples para la aplicación), drawable (archivos que se generan como imágenes .png, .9.png, .jpg, .gif) para una lista mas detallada vean aquí.





<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".HelloWorld">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>





Realizar la definición de la interfaz de usuario en un archivo xml y posteriormente “inflarla” es el método común para la creación de la interfaz de usuario. Para poder acceder a los elementos que se definieron en el archivo layout se agregan atributos a los Views en el archivo xml. Posteriormente se puede acceder a ellos utilizando el metodo findViewById el cual nos retorna una instancia de un View. A continuacion se muestra una modificacion para agregar un atributo al TextView donde se muestra el texto “HelloWorld”.


<TextView
        android:id="@+id/hello_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />


Básicamente se asigna un identificador a ese View. Y esto nos permite acceder a el de la siguiente manera desde la clase HelloWorld.java.



TextView helloWorld = (TextView) findViewById(R.id.hello_text);


Alternativamente (aunque usualmente no se utiliza por no ser considerado una buena practica), puedes generar el layout en código como se muestra en el siguiente fragmento de código.



protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

//        setContentView(R.layout.helloworld_activity);
//        TextView helloWorld = (TextView) findViewById(R.id.hello_text);

        // Params that are used to set up the main layout
        LinearLayout.LayoutParams params;
        params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);

        // Params to the text view.
        LinearLayout.LayoutParams textView;
        textView = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        
        // Layout that will contain all the views
        LinearLayout ll = new LinearLayout(this);
        ll.setOrientation(LinearLayout.VERTICAL);
        
        // Set the text of the textView
        TextView myTextView = new TextView(this);
        myTextView.setText(getString(R.string.hello_world));
        
        // Add the views into the linear layout
        ll.addView(myTextView, textView);
        // Add the layout into the activity
        this.addContentView(ll, params);

    }



Todas las propiedades disponibles en código también se encuentran disponibles en xml. Ademas de permitir separación de el diseño visual del código de la aplicación. Ya que Android se ejecuta en una gran variedad de dispositivos, definir el diseño de la interfaz en el archivo xml facilita incluir diversos diseños optimizados para los tamaños de cada pantalla.

Saludos dudas y comentarios abajo!!

No hay comentarios:

Publicar un comentario