Parte 2 Layouts y controles gráficos

Layouts y controles gráficos

Interfaz de usuario

Activity

Pantalla que se muestra al usuario. Las actividades se componen de vistas

View

Controles o widgets de la interfaz de usuario. Elemento básico de la interfaz que permite la interacción con el usuario

ViewGroup

Composición de vistas. Los controles complejos y el Layout heredan de la clase base ViewGroup.

“Existen muchas vistas y layout’s predefinidos aunque puedes crear los tuyos propios”

View
Una vista es un área rectangular en la pantalla que gestiona el tamaño, el dibujado, el cambio de foco y los gestos del área que representan

La clase android.view.View sirve de clase Base para todos los “widgets

Vistas disponibles:

TextView, EditText, Button, RadioButton, Checkbox, DatePicker TimePicker, Spinner ImageView EditText TextView Button

Las vistas se organizan en estructuras de árbol cuya raíz es un ViewGroupsetContentView() permite añadir una vistas a una actividad.

La plataforma Android ofrece dos métodos para diseñar la interfaz:

procedural (código)

declarativa (XML)

    public
void setContentView(View v) {}

    public
void setConentView(View v, LayoutParams p) {}

    public
void setConentView(int layoutResID) {}

Diseñando interface de forma declarativa XML

El framework android permite diseñar la interfaz de manera declarativa en XML. Especificando que se quiere ver en la pantalla y no como se tiene que mostrar. (Similar al HTML)

Procedural                    Declarativo

Archivo Java
TextView
tv= new
TextView(this);

    tv.setWidth(100);

    tv.setHeight(60);

    tv.setText(“phone”);

    setContentView(tv);

    

Archivo XML
<TextView
android:id=“@+id/nameLabel”
android:text=“phone:”

    android:layout_width=“100”
android:layout_height=“60”
/>

Diseñando interface de forma declarativa XML

El método declarativo permite separar la presentación de la aplicación del código que contrala su comportamiento. El tenerlos separarlos permite modificar la interfaz de la aplicación sin modificar el código fuente. Así, se podría diseñar layouts para diferentes orientaciones de la pantalla, diferentes tamaños de pantalla o diferentes idiomas sin tocar el código fuente.

Existe un convenio de nombres entre los artributos del xml y los métodos de los objetos. <TextView
android:text=“phone:”/>

… TextView tv= new TextView(this) tv.setText(“Phone”);

Diseñando interface de forma declarativa XML

Las vistas heredan atributos sus clases base y definen sus propios atributos El atributo id identifica a la vista dentro del árbol y permite recuperarla desde desde la aplicación. <TextView
android:id=“@+id/nameLabel”

android:text=“phone:” android:layout_width=“100”

android:layout_height=“60”
/>

El símbolo (@) indica al parser del xml que lo que viene a continuación lo trate como un identificador de recurso. El símbolo (+) indica que el nombre que viene a continuación es un nombre nuevo y debe ser añadido a la clase de recursos R.java

Cuando se compila la aplicación se compila también cada archivo xml de presentación y queda accesible desde la clase RView Resource” generada por android.

<Button
android:id=“@+id/acceptButton”
android:text=“@string/acceptButton”android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
/>

findViewById. Permite acceder a la vista desde una actividad

Button btn = (Button) findViewById(R.id.acceptButton);

R.Java Clase generada por android que permite acceder a los recuros una vez compilados como atributos estáticos

Layout

Un Layout’s son contenedores invisibles que determinan la disposición de las vistas en la pantalla. Todos los layouts heredan de ViewGroup Android recomienda definir el layout en XML mediante archivos de layout que se encuentran en res/layout/main_layout.xml. Cuando se compila la aplicación se compila también cada archivo xml de layout y queda accesible desde la clase RView Resource” generada por android.

Infla una actividad desde un recurso de layout

public
void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

Tipos de layout:

  • LinearLayout: dispone los hijos horizontal o verticalmente
  • RelativeLayout: dispone unos elementos relativos a los otros
  • TableLayout: dispone los elementos en filas y columnas
  • AbsoluteLayout: dispone los elementos en coordenadas exactas
  • FrameLayout: permite cambiar dinámicamente los controles en el layout La clase Layout contiene una clase LayoutParams que es especializada por cada tipo de Layout. (LinearLayoutParams, RelativeLayoutParams,…)

Vistas

Android viene con un conjunto de vistas “controles” bastante completo para dibujar textos, botónes, obtener fechas, mostrar listas, mostrar imágenes, webs, mapas, etc.

  • Texto Android incluye distintos componentes para mostrar y permitir la entrada de texto por parte del usuario.

Vistas de Texto

  • TextView Muestra el texto. No permite editarlo (Label)
  • EditText Componente de edición de texto, acepta varias líneas
  • AutoCompleteTextView Ofrece sugerencias del texto escrito
  • MultiAutoCompleteTextView Ofrece sugerencias de cada palabra

XML

<TextView
android:id=“@+id/nameText”
android:layout_width=“wrap_content”

    android:layout_height=“wrap_content”
android:text=“name”
/>

JAVA

TextView tv = (TextView) findViewById(R.id.nameText); tv.setText(“name”);

Botones Existen todo tipo de botones, botones simples, con imágenes, check buttons, radio buttons, toogle buttons…

Botones

  • Button Botón estándar
  • ImageButton Botón con imagen
  • ToogleButton Botón de 2 estados On | Off
  • CheckBox Checkbox estándar
  • RadioButton RadioButton estándar. Selección simple

XML

<ImageButton
android:id=“@+id/imageButton”
android:src=“@drawable/imageButton”android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
/>


JAVA

ImageButton btn = (ImageButton) findViewById(R.id.image); btn.setImageResource(R.drawable.image);

ListView Muestra una lista de items verticalmente. Se puede diseñar la apariencia de los elementos de la lista. Normalmente se usa con una ListActivity y un ListAdapter.

ListView

  1. Pasos para crear un ListView
  2. Diseñar la vista de los elementos de la lista en res/layout/listItem.xml
  3. Crear una actividad que herede de ListActivity
  4. Pasarle los datos al adaptador de la lista
  5. En onCreate asignarle el ListAdapter a la actividad
  6. Añadirle la vista a la actividad
1 <TextView
android:id=“@+id/listItem”
android:layout_width=“fill_parent”

    android:layout_height=“fill_parent”
/>
2public
class HelloListView extends
ListActivity {

        private String[] fruits = {“Orange”, “Apple”, “Pear”};

        private
ArrayAdapter[] adp = null;

        public
void onCreate(Bundle savedInstance) {
3adp = new
ArrayAdapter(this,R.id.listItem, fruits);
4setListAdapter(adp);5setContentView(R.layout.listView);

            }

        }

WebView Permite embeber un navegador en una actividad. El navegador incluye opciones para navegar hacia adelante y hacia atrás, zoom, etc.

WebView Pasos para crear un WebView

  1. Diseñar la vista en res/layout/main.xml
  2. Modificar el AndroidManifest.xml para añadir permisos y configurar a pantalla completa Crear una actividad
  3. En onCreate llamar al setContentView pasándole el id de la vista
1 <WebView
android:id=“@+id/webview”
android:layout_width=“wrap_content”

    android:layout_height=“wrap_content”
/>
2<uses-permission
android:name=“android.permission.INTERNET”
/>

<activity
android:name=“.webView”android:label=” @string/app_name”

android:theme=“@android:style/Theme.NoTitleBar”>3public
void onCreate(Bundle savedInstance) {

        super.onCreate(icicle);4setContentView(R.layout.main);

        webView = (WebView) findViewById(R.id.webview);

        webView.loadUrl(http://www.google.es&#8221;);

        }

Adaptadores

Un adaptador es un objeto que convierte la interfaz de una clase u otra que el cliente espera. En Android se usan los adaptadores para adaptar los datos a otro formato para que se puedan mostrar en una vista.

Existen diferentes tipos de adaptadores:

  • ListAdapter
  • ArrayAdapter
  • SpinnerAdapter
  • SimpleCursorAdapter

También se pueden definir adaptadores propios.

Ejemplo de uso de un adaptador

public
void onCreate(Bundle savedInstance) {

        adapter = new
SimpleCursorAdapter(

        this, R.layout.main_item_two_line_row,

        cursor, new String[] { TITLE, TEXT },

        new
int[] { R.id.text1, R.id.text2 });

        setListAdapter(adpater);

        }

Parámetros:

  • Context         context
  • int             layout id
  • Cursor             cursor
  • String[]         from
  • int[]             to

Normalmente la interacción del usuario con el sistema es modelada Con eventos. Si una aplicación quiere enterarse y responder a una interacción del usuario ha de añadir la lógica apropiada para detectar y procesar el evento. Un evento encapsula la información necesaria para que el manejador pueda tratar esa entrada.

Android trata los eventos mediante:

  • Event Handlers
  • Event Listeners
  • Event Handler: maneja los eventos de entrada sin importar dónde está el foco. No están necesariamente asociados a una vista. Ej: pulsar el Botón atrás, tocar la pantalla
  • Event Listener: escuchan eventos generados por una View o ViewGroup. Cada Event Listener tiene solo un método callback, que será llamado por el framework Android cuando el usuario interactúa con la vista. Ej onClick, onLongClick, onFocusChanged,…

Event Handler maneja el evento sin importar quien tiene el foco. Una actividad define los event Handlers más comunes. ListActivity y un Dialog tienen los suyos propios

Event Handler callbacks en una actividad

onKeyUp         Se libera una tecla

onKeyDown         Se pulsa una tecla

onTouchEvent         Se toca la pantalla

onTrackballEvent     Se apreta/mueve el trackball

onBackPressed     Se pulsa el botón atrás

Un EventListener escucha eventos generados por una vista. Previamente es necesario registrarlo mediante el método setOnXXXListener apropiado.

public
class EventActivity extends
Activity
implements
OnClickListener {

        private
View
view;

        public
void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.main);

            view = (View) findViewById(R.id.view);

            view.setOnClickListener(this);

            }

        }

Android recomienda que la actividad implemente la interfaz onXXXListener en lugar de usar clases anónimas

Estilos y temas

Se sigue la misma filosofía que la CSS en el diseño web. En Android el estilo se especifica en un archivo XML

<TextView
android:layout_width=“fill_parent”

    android:layout_height=“wrap_content”
android:textColor=“#FF00”

    android:typeface=“monospace”
android:text=“@string/hello”
/>

<TextView
style=“@style/CodeFont”
android:text=“@string/hello”
/>

  • El estilo es una apariencia que se aplica a una vista
  • El tema es un estilo que se aplica a una actividad o a una aplicación

Definiendo un estilo

Para crear un conjunto de estilos se crear un archivo xml en res/values cuya raiz sea el tag <resources>. Para cada estilo que se quiera crear se añade un tag <style>.

<resources>

    <style
name=“CodeFont”>

        <item
name=“android:layout_width”>fill_parent</item>

        <item
name=“android:layout_height”>wrap_content</item>

        <item
name=“android:textColor”>#00FF00</item>

    </style>

</resources>

Cada hijo de resources es convertido en un recurso de la aplicación al compilar y puede ser referenciado desde un XML como @style/CodeFont

Anuncios
Minientrada | Esta entrada fue publicada en Android. Guarda el enlace permanente.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s