Síguenos en...
Síguenos en Twitter Síguenos en Facebook Sigue nuestro canal YouTube
Registrarse
Compartir
+ Responder tema
Página 2 de 3 PrimerPrimer 123 ÚltimoÚltimo
Resultados 11 al 20 de 30

Tema: Curso de programación Android

  1. #11
    Avatar de santatasan
    Fecha de ingreso
    22 abr, 10
    Edad
    28
    Mensajes
    39
    se ha quedado parado este tema???

    Temas Similares en HTCSpain:
  2. [VIDEO-TUTORIAL] Programación de Aplicaciones en Android + Descargas - [pebels]
  3. [VIDEO-TUTORIAL] Programación de Juegos en Android + Descargas - [pebels]

  4. #12

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    No esta parado pero si muy lento... A ver si hoy me dejan un ratillo y sigo posteando cosas.

    Perdonad pero solo puedo hacerlo desde el curro y últimamente no tengo ratos libres (lo primero es lo primero).
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  5. #13

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Controles de selección (II)

    En el artículo anterior ya comenzamos a hablar de los controles de selección en Android, empezando por explicar el concepto de adaptador y describiendo el control Spinner. En este nuevo artículo nos vamos a centrar en el control de selección más utilizado de todos, el ListView.
    Un control ListView muestra al usuario una lista de opciones seleccionables directamente sobre el propio control, sin listas emergentes como en el caso del control Spinner. En caso de existir más opciones de las que se pueden mostrar sobre el control se podrá por supuesto hacer scroll sobre la lista para acceder al resto de elementos.
    Para empezar, veamos como podemos añadir un control ListView a nuestra interfaz de usuario:

    Código:
    1.	<ListView android:id="@+id/LstOpciones"
    2.	android:layout_width="wrap_content"
    3.	android:layout_height="wrap_content" />

    Una vez más, podremos modificar el aspecto del control utilizando las propiedades de fuente y color ya comentadas en artículos anteriores. Por su parte, para enlazar los datos con el control podemos utlizar por ejemplo el mismo código que ya vimos para el control Spinner. Definiremos primero un array con nuestros datos de prueba, crearemos posteriormente el adaptador de tipo ArrayAdapter y lo asignaremos finalmente al control mediante el método setAdapter():

    Código:
    1.	final String[] datos =
    2.	new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"};
    3.	
    4.	ArrayAdapter<String> adaptador =
    5.	new ArrayAdapter<String>(this,
    6.	android.R.layout.simple_list_item_1, datos);
    7.	
    8.	ListView lstOpciones = (ListView)findViewById(R.id.LstOpciones);
    9.	
    10.	lstOpciones.setAdapter(adaptador);

    En este caso, para mostrar los datos de cada elemento hemos utilizado otro layout genérico de Android para los controles de tipo ListView (android.R.layout.simple_list_item_1), formado únicamente por un TextView con unas dimensiones determinadas. La lista creada quedaría como se muestra en la imagen siguiente:



    Como podéis comprobar el uso básico del control ListView es completamente análogo al ya comentado para el control Spinner.
    Si quisiéramos realizar cualquier acción al pulsarse sobre un elemento de la lista creada tendremos que implementar el evento onItemClick. Veamos cómo con un ejemplo:

    Código:
    1.	lstOpciones.setOnItemClickListener(new OnItemClickListener() {
    2.	@Override
    3.	public void onItemClick(AdapterView<?> a, View v, int position, long id) {
    4.	//Acciones necesarias al hacer click
    5.	}
    6.	});
    Hasta aquí todo sencillo. Pero, ¿y si necesitamos mostrar datos más complejos en la lista? ¿qué ocurre si necesitamos que cada elemento de la lista esté formado a su vez por varios elementos? Pues vamos a provechar este artículo dedicado a los ListView para ver cómo podríamos conseguirlo, aunque todo lo que comentaré es extensible a otros controles de selección.
    Para no complicar mucho el tema vamos a hacer que cada elemento de la lista muestre por ejemplo dos líneas de texto a modo de título y subtítulo con formatos diferentes (por supuesto se podrían añadir muchos más elementos, por ejemplo imágenes, checkboxes, etc).
    En primer lugar vamos a crear una nueva clase java para contener nuestros datos de prueba. Vamos a llamarla Titular y tan sólo va a contener dos atributos, título y subtítulo.

    Código:
    1.	package net.sgoliver;
    2.	
    3.	public class Titular
    4.	{
    5.	private String titulo;
    6.	private String subtitulo;
    7.	
    8.	public Titular(String tit, String sub){
    9.	titulo = tit;
    10.	subtitulo = sub;
    11.	}
    12.	
    13.	public String getTitulo(){
    14.	return titulo;
    15.	}
    16.	
    17.	public String getSubtitulo(){
    18.	return subtitulo;
    19.	}
    20.	}

    En cada elemento de la lista queremos mostrar ambos datos, por lo que el siguiente paso será crear un layout XML con la estructura que deseemos. En mi caso voy a mostrarlos en dos etiquetas de texto (TextView), la primera de ellas en negrita y con un tamaño de letra un poco mayor. Llamaremos a este layout “listitem_titular.xml“:

    Código:
    1.	<?xml version="1.0" encoding="utf-8"?>
    2.	
    3.	<LinearLayout
    4.	xmlns:android="http://schemas.android.com/apk/res/android"
    5.	android:layout_width="wrap_content"
    6.	android:layout_height="wrap_content"
    7.	android:orientation="vertical">
    8.	
    9.	<TextView android:id="@+id/LblTitulo"
    10.	android:layout_width="fill_parent"
    11.	android:layout_height="wrap_content"
    12.	android:textStyle="bold"
    13.	android:textSize="20px" />
    14.	
    15.	<TextView android:id="@+id/LblSubTitulo"
    16.	android:layout_width="fill_parent"
    17.	android:layout_height="wrap_content"
    18.	android:textStyle="normal"
    19.	android:textSize="12px" />
    20.	
    21.	</LinearLayout>
    Ahora que ya tenemos creados tanto el soporte para nuestros datos como el layout que necesitamos para visualizarlos, lo siguiente que debemos hacer será indicarle al adaptador cómo debe utilizar ambas cosas para generar nuestra interfaz de usuario final. Para ello vamos a crear nuestro propio adaptador extendiendo de la clase ArrayAdapter.

    Código:
    1.	class AdaptadorTitulares extends ArrayAdapter {
    2.	
    3.	Activity context;
    
    4.	AdaptadorTitulares(Activity context) {
    5.	super(context, R.layout.listitem_titular, datos);
    6.	this.context = context;
    7.	}
    8.	
    9.	public View getView(int position, View convertView, ViewGroup parent) {
    10.	LayoutInflater inflater = context.getLayoutInflater();
    11.	View item = inflater.inflate(R.layout.listitem_titular, null);
    12.	
    13.	TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
    14.	lblTitulo.setText(datos[position].getTitulo());
    15.	
    16.	TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
    17.	lblSubtitulo.setText(datos[position].getSubtitulo());
    18.	
    19.	return(item);
    20.	}
    21.	}
    Analicemos el código anterior. Lo primero que encontramos es el constructor para nuestro adaptador, al que sólo pasaremos el contexto (que será la actividad desde la que se crea el adaptador). En este constructor tan sólo guardaremos el contexto para nuestro uso posterior y llamaremos al constructor padre tal como ya vimos al principio de este artículo, pasándole el ID del layout que queremos utilizar (en nuestro caso el nuevo que hemos creado, “listitem_titular”) y el array que contiene los datos a mostrar.
    Posteriormente, redefinimos el método encargado de generar y rellenar con nuestros datos todos los controles necesarios de la interfaz gráfica de cada elemento de la lista. Este método es getView().
    El método getView() se llamará cada vez que haya que mostrar un elemento de la lista. Lo primero que debe hacer es “inflar” el layout XML que hemos creado. Esto consiste en consultar el XML de nuestro layout y crear e inicializar la estructura de objetos java equivalente. Para ello, crearemos un nuevo objeto LayoutInflatery generaremos la estructura de objetos mediante su método inflate(id_layout).
    Tras esto, tan sólo tendremos que obtener la referencia a cada una de nuestras etiquetas como siempre lo hemos hecho y asignar su texto correspondiente según los datos de nuestro array y la posición del elemento actual (parámetro position del método getView()).
    Una vez tenemos definido el comportamiento de nuestro adaptador la forma de proceder en la actividad principal será análoga a lo ya comentado, definiremos el array de datos de prueba, crearemos el adaptador y lo asignaremos al control mediante setAdapter():

    Código:
    1.	private Titular[] datos =
    2.	new Titular[]{
    3.	new Titular("Título 1", "Subtítulo largo 1"),
    4.	new Titular("Título 2", "Subtítulo largo 2"),
    5.	new Titular("Título 3", "Subtítulo largo 3"),
    6.	new Titular("Título 4", "Subtítulo largo 4"),
    7.	new Titular("Título 5", "Subtítulo largo 5")};
    8.	
    9.	//...
    10.	//...
    11.	
    12.	AdaptadorTitulares adaptador =
    13.	new AdaptadorTitulares(this);
    14.	
    15.	ListView lstOpciones = (ListView)findViewById(R.id.LstOpciones);
    16.	
    17.	lstOpciones.setAdapter(adaptador);

    Hecho esto, y si todo ha ido bien, nuestra nueva lista debería quedar como vemos en la imagen siguiente:



    Podéis descargar el código de este artículo desde este enlace.
    Aunque ya sabemos utilizar y personalizar las listas en Android, en el próximo artículo daremos algunas indicaciones para utilizar de una forma mucho más eficiente los controles de este tipo, algo que los usuarios de nuestra aplicación agradecerán enormemente al mejorarse la respuesta de la aplicación y reducirse el consumo de batería.
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  6. #14
    Avatar de santatasan
    Fecha de ingreso
    22 abr, 10
    Edad
    28
    Mensajes
    39
    Cita Iniciado por pebels Ver mensaje
    No esta parado pero si muy lento... A ver si hoy me dejan un ratillo y sigo posteando cosas.

    Perdonad pero solo puedo hacerlo desde el curro y últimamente no tengo ratos libres (lo primero es lo primero).
    No pasa nadaa!! Solo preguntaba si se seguiría jeje.

    Muchas gracias por sacar tiempo :D

  7. #15

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Controles de selección (III)

    En el artículo anterior ya vimos cómo utilizar los controles de tipo ListView en Android. Sin embargo, acabamos comentando que existía una forma más eficiente de hacer uso de dicho control, de forma que la respuesta de nuestra aplicación fuera más agil y se reduciese el consumo de batería, algo que en plataformas móviles siempre es importante.
    Como base para este artículo vamos a utilizar como código que ya escribimos en el artículo anterior, por lo que si has llegado hasta aquí directamente te recomiendo que leas primero el primer post dedicado al control ListView.
    Cuando comentamos cómo crear nuestro propio adaptador, extendiendo de ArrayAdapter, para personalizar la forma en que nuestros datos se iban a mostrar en la lista escribimos el siguiente código:

    Código:
    1.	class AdaptadorTitulares extends ArrayAdapter {
    2.	Activity context;
    3.	
    4.	AdaptadorTitulares(Activity context) {
    5.	super(context, R.layout.listitem_titular, datos);
    6.	this.context = context;
    7.	}
    8.	
    9.	public View getView(int position, View convertView, ViewGroup parent) {
    10.	LayoutInflater inflater = context.getLayoutInflater();
    11.	View item = inflater.inflate(R.layout.listitem_titular, null);
    12.	
    13.	TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
    14.	lblTitulo.setText(datos[position].getTitulo());
    15.	
    16.	TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
    17.	lblSubtitulo.setText(datos[position].getSubtitulo());
    18.	
    19.	return(item);
    20.	}
    21.	}

    Centrándonos en la definición del método getView() vimos que la forma normal de proceder consistía en primer lugar en “inflar” nuestro layout XML personalizado para crear todos los objetos correspondientes (con la estructura descrita en el XML) y posteriormente acceder a dichos objetos para modificar sus propiedades. Sin embargo, hay que tener en cuenta que esto se hace todas y cada una de las veces que se necesita mostrar un elemento de la lista en pantalla, se haya mostrado ya o no con anterioridad, ya que Android no “guarda” los elementos de la lista que desaparecen de pantalla (por ejemplo al hacer scroll sobre la lista). El efecto de esto es obvio, dependiendo del tamaño de la lista y sobre todo de la complejidad del layout que hayamos definido esto puede suponer la creación y destrucción de cantidades ingentes de objetos (que puede que ni siquiera nos sean necesarios), es decir, que la acción de inflar un layout XML puede ser bastante costosa, lo que podría aumentar mucho, y sin necesidad, el uso de CPU, de memoria, y de batería.
    Para aliviar este problema, Android nos propone un método que permite reutilizar algún layout que ya hayamos inflado con anterioridad y que ya no nos haga falta por algún motivo, por ejemplo porque el elemento correspondiente de la lista ha desaparecido de la pantalla al hacer scroll. De esta forma evitamos todo el trabajo de crear y estructurar todos los objetos asociados al layout, por lo que tan sólo nos quedaría obtener la referencia a ellos mediante findViewById() y modificar sus propiedades.
    ¿Pero cómo podemos reutilizar estos layouts “obsoletos”? Pues es bien sencillo, siempre que exista algún layout que pueda ser reutilizado éste se va a recibir a través del parámetro convertView del método getView(). De esta forma, en los casos en que éste no sea null podremos obviar el trabajo de inflar el layout. Veamos cómo quedaría el métod getView() tras esta optimización:

    Código:
    1.	public View getView(int position, View convertView, ViewGroup parent)
    2.	{
    3.	View item = convertView;
    4.	
    5.	if(item == null)
    6.	{
    7.	LayoutInflater inflater = context.getLayoutInflater();
    8.	item = inflater.inflate(R.layout.listitem_titular, null);
    9.	}
    10.	
    11.	TextView lblTitulo = (TextView)item.findViewById(R.id.LblTitulo);
    12.	lblTitulo.setText(datos[position].getTitulo());
    13.	
    14.	TextView lblSubtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
    15.	lblSubtitulo.setText(datos[position].getSubtitulo());
    16.	
    17.	return(item);
    18.	}

    Si añadimos más elementos a la lista y ejecutamos ahora la aplicación podemos comprobar que al hacer scroll sobre la lista todo sigue funcionando con normalidad, con la diferencia de que le estamos ahorrando gran cantidad de trabajo a la CPU.



    Pero vamos a ir un poco más allá. Con la optimización que acabamos de implementar conseguimos ahorrarnos el trabajo de inflar el layout definido cada vez que se muestra un nuevo elemento. Pero aún hay otras dos llamadas relativamente costosas que se siguen ejecutando en todas las llamadas. Me refiero a la obtención de la referencia a cada uno de los objetos a modificar mediante el método findViewById(). La búsqueda por ID de un control determinado dentro del árbol de objetos de un layout también puede ser una tarea costosa dependiendo de la complejidad del propio layout.¿Por qué no aprovechamos que estamos “guardando” un layout anterior para guardar también la referencia a los controles que lo forman de forma que no tengamos que volver a buscarlos? Pues eso es exactamente lo que vamos a hacer mediante lo que en los ejemplos de Android llaman un ViewHolder. La clase ViewHolder tan sólo va a contener una referencia a cada uno de los controles que tengamos que manipular de nuestro layout, en nuestro caso las dos etiquetas de texto. Definamos por tanto esta clase de la siguiente forma:

    Código:
    1.	static class ViewHolder {
    2.	TextView titulo;
    3.	TextView subtitulo;
    4.	}

    La idea será por tanto crear e inicializar el objeto ViewHolder la primera vez que inflemos un elemento de la lista y asociarlo a dicho elemento de forma que posteriormente podamos recuperarlo fácilmente. ¿Pero dónde lo guardamos? Fácil, en Android todos los controles tienen una propiedad llamada Tag (podemos asignarla y recuperarla mediante los métodos setTag() y getTag() respectivamente) que puede contener cualquier tipo de objeto, por lo que resulta ideal para guardar nuestro objeto ViewHolder. De esta forma, cuando el parámetro convertView llegue informado sabremos que también tendremos disponibles las referencias a sus controles hijos a través de la propiedad Tag. Veamos el código modificado de getView() para aprovechar esta nueva optimización:

    Código:
    1.	public View getView(int position, View convertView, ViewGroup parent)
    2.	{
    3.	View item = convertView;
    4.	ViewHolder holder;
    5.	
    6.	if(item == null)
    7.	{
    8.	LayoutInflater inflater = context.getLayoutInflater();
    9.	item = inflater.inflate(R.layout.listitem_titular, null);
    10.	
    11.	holder = new ViewHolder();
    12.	holder.titulo = (TextView)item.findViewById(R.id.LblTitulo);
    13.	holder.subtitulo = (TextView)item.findViewById(R.id.LblSubTitulo);
    14.	
    15.	item.setTag(holder);
    16.	}
    17.	else
    18.	{
    19.	holder = (ViewHolder)item.getTag();
    20.	}
    21.	
    22.	holder.titulo.setText(datos[position].getTitulo());
    23.	holder.subtitulo.setText(datos[position].getSubtitulo());
    24.	
    25.	return(item);
    26.	}

    Con estas dos optimizaciones hemos conseguido que la aplicación sea mucho más respetuosa con los recursos del dispositivo de nuestros usuarios, algo que sin duda nos agradecerán.
    Podéis descargar el código fuente de este artículo desde este enlace.
    Última edición por pebels; 13/12/2011 a las 09:40
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  8. #16

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Controles de selección (IV)

    Tras haber visto en artículos anteriores los dos controles de selección más comunes en cualquier interfaz gráfica, como son las listas desplegables (Spinner) y las listas “fijas” (ListView), tanto en su versión básica como optimizada, en este nuevo artículo vamos a terminar de comentar los controles de selección con otro menos común pero no por ello menos útil, el control GridView.
    El control GridView de Android presenta al usuario un conjunto de opciones seleccionables distribuidas de forma tabular, o dicho de otra forma, divididas en filas y columnas. Dada la naturaleza del control ya podéis imaginar sus propiedades más importantes, que paso a enumerar a continuación:

    • android:numColumns, indica el número de columnas de la tabla o “auto_fit” si queremos que sea calculado por el propio sistema operativo a partir de las siguientes propiedades.
    • android:columnWidth, indica el ancho de las columnas de la tabla.
    • android:horizontalSpacing, indica el espacio horizontal entre celdas.
    • android:verticalSpacing, indica el espacio vertical entre celdas.
    • android:stretchMode, indica qué hacer con el espacio horizontal sobrante. Si se establece al valor “columnWidth” este espacio será absorbido a partes iguales por las columnas de la tabla. Si por el contrario se establece a “spacingWidth” será absorbido a partes iguales por los espacios entre celdas.
    Veamos cómo definiríamos un GridView de ejemplo en nuestra aplicación:

    Código:
    1.	<GridView android:id="@+id/GridOpciones"
    2.	android:layout_width="fill_parent"
    3.	android:layout_height="fill_parent"
    4.	android:numColumns="auto_fit"
    5.	android:columnWidth="80px"
    6.	android:horizontalSpacing="5px"
    7.	android:verticalSpacing="10px"
    8.	android:stretchMode="columnWidth" />

    Una vez definida la interfaz de usuario, la forma de asignar los datos desde el código de la aplicación es completamente análoga a la ya comentada tanto para las listas desplegables como para las listas estáticas: creamos un array genérico que contenga nuestros datos de prueba, declaramos un adaptador de tipo ArrayAdapter pasándole en este caso un layout genérico (simple_list_item_1, compuesto por un simpleTextView) y asociamos el adaptador al control GridView mediante su método setAdapter():

    Código:
    1.	private String[] datos = new String[25];
    2.	//...
    3.	for(int i=1; i<=25; i++)
    4.	datos[i-1] = "Dato " + i;
    5.	
    6.	ArrayAdapter<String> adaptador =
    7.	new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, datos);
    8.	
    9.	final GridView grdOpciones = (GridView)findViewById(R.id.GridOpciones);
    10.	
    11.	grdOpciones.setAdapter(adaptador);

    Por defecto, los datos del array se añadirán al control GridView ordenados por filas, y por supuesto, si no caben todos en la pantalla se podrá hacer scroll sobre la tabla. Vemos en una imagen cómo queda nuestra aplicación de prueba:



    En cuanto a los eventos disponibles, el más interesante vuelve a ser el lanzado al seleccionarse una celda determinada de la tabla: onItemSelected. Este evento podemos capturarlo de la misma forma que hacíamos con los controles Spinner y ListView. Veamos un ejemplo de cómo hacerlo:

    Código:
    1.	grdOpciones.setOnItemSelectedListener(
    2.	new AdapterView.OnItemSelectedListener() {
    3.	public void onItemSelected(AdapterView<?> parent,
    4.	android.view.View v, int position, long id) {
    5.	lblMensaje.setText("Seleccionado: " + datos[position]);
    6.	}
    7.	
    8.	public void onNothingSelected(AdapterView<?> parent) {
    9.	lblMensaje.setText("");
    10.	}
    11.	});

    Todo lo comentado hasta el momento se refiere al uso básico del control GridView, pero por supuesto podríamos aplicar de forma prácticamente directa todo lo comentado para las listas en los dos artículos anteriores, es decir, la personalización de las celdas para presentar datos complejos creando nuestro propio adaptador, y las distintas optimizaciones para mejorar el rendimiento de la aplicación y el gasto de batería.
    Y con esto finalizamos todo lo que tenía previsto contar sobre los distintos controles disponibles “de serie” en Android para construir nuestras interfaces de usuario. Existen muchos más, y es posible que los comentemos más adelante en algún otro artículo, pero por el momento nos vamos a conformar con los ya vistos. En el próximo artículo, y para terminar con la serie dedicada a los controles Android, veremos las distintas formas de crear controles de usuario personalizados.
    Podéis descargar el código fuente de este artículo desde este enlace.
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  9. #17

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Controles personalizados (I)

    En artículos anteriores de la serie hemos conocido y aprendido a utilizar muchos de los controles que proporciona Android en su SDK. Con la ayuda de estos controles podemos diseñar interfaces gráficas de lo más variopinto pero en ocasiones, si queremos dar un toque especial y original a nuestra aplicación, o simplemente si necesitamos cierta funcionalidad no presente en los componentes estándar de Android, nos vemos en la necesidad de crear nuestros propios controles personalizados, diseñados a medida de nuestros requisitos.
    Android admite por supuesto crear controles personalizados, y permite hacerlo de diferentes formas:

    1. Extendiendo la funcionalidad de un control ya existente.
    2. Combinando varios controles para formar un otro más complejo.
    3. Diseñando desde cero un nuevo control.

    En este primer artículo sobre el tema vamos a hablar de la primera opción, es decir, vamos a ver cómo podemos crear un nuevo control partiendo de la base de un control ya existente. A modo de ejemplo, vamos a extender el control EditText (cuadro de texto) para que muestre en todo momento el número de caracteres que contiene a medida que se escribe en él. Intentaríamos emular algo así como el editor de mensajes SMS del propio sistema operativo, que nos avisa del número de caracteres que contiene el mensaje. En nuestro caso, como resultado obtendremos un control como el que se muestra en la siguiente imagen:



    Como vemos, en la esquina superior derecha del cuadro de texto vamos a mostrar el número de caracteres del mensaje de texto introducido, que ira actualizándose a medida que modificamos el texto.
    Para empezar, vamos a crear una nueva clase java que extienda del control que queremos utilizar como base, en este caso EditText.

    1. public class ExtendedEditText extends EditText
    2. {
    3. //...
    4. }

    Tras esto, sobreescribiremos siempre los tres constructores heredados, donde por el momento nos limitaremos a llamar al mismo constructor de la clase padre.

    1. public ExtendedEditText(Context context, AttributeSet attrs, int defStyle){
    2. super(context, attrs,defStyle);
    3. }
    4.
    5. public ExtendedEditText(Context context, AttributeSet attrs) {
    6. super(context, attrs);
    7. }
    8.
    9. public ExtendedEditText(Context context) {
    10. super(context);
    11. }

    Por último el paso más importante. Dado que queremos modificar el aspecto del control para añadir el contador de caracteres tendremos que sobreescribir el evento onDraw(), que es llamado por Android cada vez que hay que redibujar el control en pantalla. Este método recibe como parámetro un objeto Canvas, que no es más que el “lienzo” sobre el que podemos dibujar todos los elementos extra necesarios en el control. El objeto Canvas, proporciona una serie de métodos para dibujar cualquier tipo de elemento (lineas, rectángulos, elipses, texto, bitmaps, …) sobre el espacio ocupado por el control. En nuestro caso tan sólo vamos a necesitar dibujar sobre el control un rectángulo que sirva de fondo para el contador y el texto del contador con el número de caracteres actual del cuadro de texto. No vamos a entrar en muchos detalles sobre la forma de dibujar gráficos ya que ése será tema de otro artículo, pero vamos a ver al menos las acciones principales.
    En primer lugar definiremos los “pinceles” (objetos Paint) que utilizaremos para dibujar, uno de ellos (p1) de color negro y relleno sólido para el fondo del contador, y otro (p2) de color blanco para el texto.

    1. Paint p1 = new Paint(Paint.ANTI_ALIAS_FLAG);
    2. p1.setColor(Color.BLACK);
    3. p1.setStyle(Style.FILL);
    4.
    5. Paint p2 = new Paint(Paint.ANTI_ALIAS_FLAG);
    6. p2.setColor(Color.WHITE);

    Dado que estos elementos tan sólo hará falta crearlos la primera vez que se dibuje el control, para evitar trabajo innecesario no incluiremos su definición en el método onDraw(), sino que los definiremos como atributos de la clase y los inicializaremos en el constructor del control (en los tres).
    Una vez definidos los diferentes pinceles necesarios, dibujaremos el fondo y el texto del contador mediante los métodos drawRect() y drawText(), respectivamente, del objeto canvas recibido en el evento.

    1. @Override
    2. public void onDraw(Canvas canvas)
    3. {
    4. //Llamamos al método de la clase base (EditText)
    5. super.onDraw(canvas);
    6.
    7. //Dibujamos el fondo negro del contador
    8. canvas.drawRect(this.getWidth()-30, 5,
    9. this.getWidth()-5, 20, p1);
    10.
    11. //Dibujamos el número de caracteres sobre el contador
    12. canvas.drawText("" + this.getText().toString().length(),
    13. this.getWidth()-28, 17, p2);
    14. }

    Como puede comprobarse, a estos métodos se les pasará como parámetro las coordenadas del elemento a dibujar relativas al espacio ocupado por el control y el pincel a utilizar en cada caso.
    Hecho esto, ya tenemos finalizado nuestro cuadro de texto personalizado con contador de caracteres. Para añadirlo a la interfaz de nuestra aplicación lo incluiremos en el layout XML de la ventana tal como haríamos con cualquier otro control, teniendo en cuenta que deberemos hacer referencia a él con el nombre completo de la nueva clase creada (incluido el paquete java), que en mi caso particular seríanet.sgoliver.ExtendedEditText.

    1. <net.sgoliver.ExtendedEditText
    2. android:id="@+id/TxtPrueba"
    3. android:layout_width="fill_parent"
    4. android:layout_height="wrap_content" />

    En el siguiente artículo veremos cómo crear un control personalizado utilizando la segunda de las opciones expuestas, es decir, combinando varios controles ya existentes. Comentaremos además como añadir eventos y propiedades personalizadas a nuestro control y cómo hacer referencia a dichas propiedades desde su definición XML.
    Podéis descargar el código de este artículo desde este enlace.
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  10. #18
    Avatar de nharromc
    Fecha de ingreso
    23 oct, 11
    Ubicación
    Madrid
    Mensajes
    159
    brutal compañero, espero ansioso más contenido!! muchisimas gracias!

  11. #19
    Avatar de passwordgerez
    Fecha de ingreso
    06 oct, 10
    Ubicación
    BCN
    Edad
    33
    Mensajes
    62
    Muchas gracias!! Enorme!!

    Colgarás lo que queda??

    Saludos

  12. #20
    Avatar de malditamantis
    Fecha de ingreso
    19 abr, 10
    Edad
    42
    Mensajes
    3
    Me interesa el curso!

 

 
+ Responder tema
Página 2 de 3 PrimerPrimer 123 ÚltimoÚltimo

Nuestros visitantes llegarón a esta página buscando:

descargar android-HolaUsuario.zip

android-holausuario.zip

iniciar spinner con valor determinado android

codigo android holausuario zip

Codigoandroid-HolaUsuario.zip

SEO Blog

Etiquetas para este tema