miércoles, 29 de junio de 2016

Personalizar Android Spinner Programacion


Muchas personas no saben como personalizar un Spinner. bueno aqui tienen  su respuesta

 
Primero creamos el proyecto el cual pueden llamar como ustedes quieran yo lo llamare SpinnerPersonalizado


Ahora nos dirigimos a la sección de res -> layout y creamos un archivo xml que será la base grafica del nuevo spinner en este caso lo llamaremos “eslabón”

 





Le das en finalizar y listo ahora tendrán algo así.

 


En la parte derecha de la pantalla se encontraran con la orientación del layout cámbiela de vertical a horizontal para mayor organización, aunque cada uno es libre de crear su propio eslabón del spinner personalizado.


Ahora le agregamos un textview al cual llamare mensajetxt y un ImageView al cual llamaremos logoIM.


 

Nota: al seleccionar y arrastrar el ImageView le pedirá un icono por defecto si no han subido uno al proyecto escojan por defecto el logo de su aplicación como se utilizó en este ejemplo.


Le damos el tamaño al Linearlayout donde se encuentran insertados los componentes y listo terminamos la parte visual ahora vamos a la parte de código.

Primero generamos una clase a la cual llamaremos adaptadorSpinner y la extenderemos como base adapter además opcionalmente métanla en un paquete aparte el cual se va a nombrar adaptadores.





Implementamos los métodos no implementados como se ve en la pantalla.

Todos estos métodos son necesarios al momento en que Dalvik actualice o arme el Spinner.

Listo ahora tenemos el adaptador. Para mayor sencillez crearemos una clase la cual llamaremos fila esta clase tendrá internamente 1 numero entro al cual llamaremos opciónIcono y 1 String al cual llamaremos mensaje.

Para nuestras aplicaciones utilizaremos una clase personalizada y elementos personalizados así que continuemos.
Aquí les muestro el código del adaptador junto con una explicación abajo del código
Codigo

package adaptadores;
import java.util.ArrayList;
import com.example.spinnerpersonalizado.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class AdaptadorSpinner extends BaseAdapter {
    private LayoutInflater inflater = null;
    private ArrayList<Fila> Filas;
    
    
    public AdaptadorSpinner(Context c) {
        super();
        Filas=new ArrayList<Fila>();
        inflater = LayoutInflater.from(c);
    }
    
    public void addFilas(Fila objeto)
    {
         Filas.add(objeto);
         notifyDataSetChanged();
        
    }
    public void removeFilas(int index)
    {
        Filas.remove(index);
        notifyDataSetChanged();
        
    }
    
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return Filas.size();
    }
    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return Filas.get(position);
    }
    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }
    @SuppressLint(“InflateParams”)
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Componentes componentesAdaptador;
                
        //si no existe el index lo crea y si existe lo carga
        if(convertView==null)
        {
            //le asigna la interfax xml de al codigo
            convertView = inflater.inflate(R.layout.eslabon, null);
            
            componentesAdaptador=new Componentes();
            //asigna los componenetes del xml
            componentesAdaptador.LogoIM=(ImageView) convertView.findViewById(R.id.logoIM);
            componentesAdaptador.Mensajetxt=(TextView) convertView.findViewById(R.id.mensajetxt);
            convertView.setTag(componentesAdaptador);
        }
        else
        {
            componentesAdaptador = (Componentes) convertView.getTag();
        }
        
        //seccion de carga del contenido aqui es donde ustedes personalizan el Spinner
        
        // si es par coloca un logo si es impar coloca el otro logo
        if((Filas.get(position).getOpciónIcono())==0)
        {
            componentesAdaptador.LogoIM.setImageResource( R.drawable.ic_launcher);
        }
        else
        {
            componentesAdaptador.LogoIM.setImageResource( R.drawable.android_logo);
        }
        
        componentesAdaptador.Mensajetxt.setText(Filas.get(position).getMensaje());
        
        
        
        return convertView;
    }
    public ArrayList<Fila> getFilas() {
        return Filas;
    }
    public void setFilas(ArrayList<Fila> filas) {
        Filas = filas;
    }
    static class Componentes{
        ImageView  LogoIM;
        TextView Mensajetxt;
        
    }
}

Dentro de la clase AdaptadorSpinner  creamos un ArrayList de la clase Fila los cuales tendrán la información del Spinner.

En la sección de carga de contenido simplemente es pasar los valores del objeto fila al adaptador teniendo encuentra que la función brinda la posición del mismo al momento de armar el spinner.

 notifyDataSetChanged();  es una función que actualiza el spinner en este caso lo actualiza cada vez que ingresas un valor el spinner.

La clase componentes se hace con la intensión de organizar todos los componentes y no tener que crear más componentes o tenerlos desorganizados.

Ahora solo agregamos s el código de la actividad principal que es simple además de agregarle 4 valores al Spinner.

Código
package com.example.spinnerpersonalizado;
import adaptadores.AdaptadorSpinner;
import adaptadores.Fila;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Spinner;
public class MainActivity extends Activity {
    private AdaptadorSpinner adaptadorPersonalizado;
    private Spinner SpinnerPersonalizado;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //inicializar el Spinner
                SpinnerPersonalizado=(Spinner) findViewById(R.id.spinnerpersonalizado);
                
                //codigo de inicio del spinner
                
                
                adaptadorPersonalizado=new AdaptadorSpinner(this);
                
                
                //incluir el adaptador al spinner
                
                SpinnerPersonalizado.setAdapter(adaptadorPersonalizado);
                
                //agregandole informacion al spinner
                adaptadorPersonalizado.addFilas(new Fila(0, “opccion 1”));
                adaptadorPersonalizado.addFilas(new Fila(1, “opccion 2”));
                adaptadorPersonalizado.addFilas(new Fila(1, “opccion 3”));
                adaptadorPersonalizado.addFilas(new Fila(1, “opccion 4”));
    
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
        
        
    }
}

Aquí está el resultado.

 


Aqui esta el codigo servidor Mega


Hasta aqui los dejo cuidence.

lunes, 2 de marzo de 2015

Manejo de pantalla y LAYOUTS



Buenas disculpen mi falta de publicaciones durante casi dos meses estoy de vuelta a seguir publicando.
Manejo de layouts en android
Teoría antes de empezar.
Antes que nada tenemos que ver que en androide hay muchos tipos de pantalla la large, xlarge,xxlarge…etc. Y todos estos tipos de pantalla poseen dos modos Portrait y LandScape. Donde portrail  es la pantalla cuando tenemos el cel a manera vertical. Y Landscape de manera horizontal.

Portrait

Landscape.

Los layouts son grillas (una forma coloquial de decirles ) para que nuestra aplicación siga un patrón definido en la forma Portrait o LandScape es decir para que los componentes no se des alineen mientras se ejecuta la transición de pantallas. Android como un sistema operativo adaptado a los dispositivos mobiles. Tiene un ciclo de vida diferente a un sistema operativo convencional (Posee un ciclo de vida más complicado). Cada vez que se ejecute la transición de landscape a potrail y viceversa los elementos en pantalla y ciertas variables se destruirán y se volverán a crear, es decir que los elementos se reiniciaran cuando se ejecuten estas acciones. En otra entrada aclarare esto en esta entrada solo explicare como utilizar los layouts.
Ahora  si después de que leyeran la chachara anterior ahora lo explicare lo más sencillo posible. Los layouts son grillas que sigue el código xml para alinear los componentes. Estas grillas deben mezclarse para que nuestro componente se mantenga alineado donde lo queremos. Existen muchos tipos de grilla pero las principales son:
Gridlayout.
Esta es una grilla donde podremos colocar nuestros elementos separados en un orden (cuando ejecutemos la transición de pantallas este orden cambiara a menos de que lo comfiguremos. “mas adelante les explicare como configurar a landscape para cada pantalla por ahora solo centrémonos en Portrait”).
LinearLayout(vertical).
Esta grilla colocara los components uno abajo del otro organizandoles a manera de columna.
 LinearLayout(Horizontal).
Esta grilla colocara los components uno al lado del otro organizandoles a manera de fila.
Relative layout
Esta grilla colocara el component donde quramos (esta grilla aveces miente y coloca el component en otro lado asi el editor diga que es hay)
Frame layout
La framelayout es una capa de capas es decir que si instamos una framelayout y después otra tendremos un fondo con una capa encima de componentes, ideal para aplicaciones que desean trabajar con un fondo, además que es utilizada por otros componentes para hacer el efecto de “capas de componentes” como el TABHOST (más adelante hablaremos del).

MANEJO DE MÚLTIPLES PANTALLAS CON LOS LAYOUTS

Bueno para configurar nuestra aplicación entre portrail o landscape debemos saber que aquí también debemos configurar el tamaño de la pantalla creando una carpeta con el nombre de layout pero agregándole el tamaño y luego la condición portrail y landscape.
Layout-(Tamaño)-( portrail o landscape)
Despues copiamos el layout hecho y listo el compilador ahora entenderá que el layout que copiamos dentro de la carpeta será nuestra configuración escogida y si no nos gusta lo que vemos lo podemos organizar a nuestro antojo, aumentarle fuentes que solo se modificara este layout y no los demás es decir “no se modifican los otros layouts” haciendo que debamos hacer varias configuraciones para una aplicación.
Nota:
No hagas estas configuraciones hasta que termines de hacer una aplicación ya que si haces las configuraciones primero tendrás que hacerlas en cada layout independiente como por ejemplo si creas un Textview más debes hacerlo en los demás layouts creados.
Ya vimos los tipos básicos ahora manos en la mantequilla otra vez.
Vamos a crear un projecto básico. Y vamos a mezclar las grillas y a verlas en portrail y landscape
Primero ubicamos la carpeta de layout en nuestro eclipse.

Y creamos una nueva carpeta dentro de la carpeta res la cual vamos a llamar layout-xlarge-landscape debido a que portrail es la carpeta por defecto de layout. Y quedara de esta manera.
Ahora copiamos el archivo de arriba del layout dentro de la carpeta (ojo lo copiamos).

Apenas abramos en el eclipse notaremos que la pantalla esta acostada por defecto y además en una pantalla mas grande debido a la configuración de la carpeta (layout”obvio”-xlarge” el tamaño de la pantalla”-landscape ”acostado o en porton”).

 




Ahora pueden ordenar los elementos en cada uno de los layouts.
Las grillas recomiendo que experimenten debido a que así aprenderán más su funcionamiento y podrán observar cómo trabajan.



Si Tienen alguna duda escriban yo con mucho gusto les explicare lo que no entiendan gracias por su atención.