¿Dónde aprendo sobre la vista de chips en Android?

ChipView

ChipView le permite crear fácilmente una lista de chips con un receptor de clics opcional en cada Chip .

ChipView es altamente personalizable hasta el punto de que puede controlar cada diseño de Chip y colores de fondo (normales y seleccionados) individualmente.

• ¿Debo comprar instalaciones de palabras clave para mi aplicación de Android?
• ¿Por qué nadie instaló mi aplicación de Android?
• ¿Vidmate es una aplicación india?
• ¿Cuáles son los mejores marcos para la construcción de juegos móviles educativos?
• Cómo hacer que mi teléfono o tableta Android sea más rápido

Cómo utilizar

Modo por defecto

Simplemente agregue ChipView a su diseño (o mediante programación):

<com.plumillonforge.android.chipview.ChipView
android: id = “@ + id / chipview”
android: layout_width = “match_parent”
android: layout_height = “wrap_content” />

Luego prepare sus datos, cada elemento en el ChipView debe implementar la interfaz Chip , solo para saber qué String mostrar (a través del método getText() ):

Tag de clase pública implementa Chip {
String mName privado;
private int mType = 0;

Etiqueta pública (nombre de cadena, tipo int) {
este nombre);
mType = type;
}

Etiqueta pública (nombre de cadena) {
mName = nombre;
}

@Anular
public String getText () {
devolver mName;
}

public int getType () {
return mType;
}
}

Ahora puedes ir agregando Chip a tu ChipView :

Lista chipList = new ArrayList ();
chipList.add (nueva etiqueta (“Lorem”));
chipList.add (nueva etiqueta (“Ipsum dolor”));
chipList.add (nueva etiqueta (“Sit amet”));
chipList.add (nueva etiqueta (“Consectetur”));
chipList.add (nueva etiqueta (“elit adipiscing”));
ChipView chipDefault = (ChipView) findViewById (R.id.chipview);
chipDefault.setChipList (chipList);

ChipView se mostrará con la configuración predeterminada:

Adaptador ChipView

La biblioteca ChipView usa un adaptador para mostrar sus datos, crea uno predeterminado si no especifica los suyos.

La clase ChipView también es un contenedor de su adaptador actual para simplificar la llamada a los métodos del adaptador.

Si desea proporcionar su propia implementación de adaptador, simplemente extienda ChipViewAdapter :

clase pública MainChipViewAdapter extiende ChipViewAdapter {
public MainChipViewAdapter (contexto contextual) {
super (contexto);
}

@Anular
public int getLayoutRes (int position) {
Etiqueta etiqueta = (Etiqueta) getChip (posición);

switch (tag.getType ()) {
defecto:
caso 2:
caso 4:
devuelve 0;

caso 1:
caso 5:
return R.layout.chip_double_close;

caso 3:
return R.layout.chip_close;
}
}

@Anular
public int getBackgroundColor (int posición) {
Etiqueta etiqueta = (Etiqueta) getChip (posición);

switch (tag.getType ()) {
defecto:
devuelve 0;

caso 1:
caso 4:
return getColor (R.color.blue);

caso 2:
caso 5:
return getColor (R.color.purple);

caso 3:
return getColor (R.color.teal);
}
}

@Anular
public int getBackgroundColorSelected (int position) {
devuelve 0;
}

@Anular
public int getBackgroundRes (int position) {
devuelve 0;
}

@Anular
public void onLayout (Ver vista, posición int) {
Etiqueta etiqueta = (Etiqueta) getChip (posición);

if (tag.getType () == 2)
((TextView) view.findViewById (android.R.id.text1)). SetTextColor (getColor (R.color.blue));
}

Y configure el adaptador ChipView :

Adaptador ChipViewAdapter = nuevo MainChipViewAdapter (este);
chipView.setAdapter (adaptador)

Dado que ChipView está creando su propio adaptador predeterminado, no olvide configurar su adaptador antes que nada para evitar manipular el adaptador incorrecto

Click oyente

Si desea registrar un oyente cuando se hace clic en un Chip , implemente OnChipClickListener :

chipDefault.setOnChipClickListener (nuevo OnChipClickListener () {
@Anular
public void onChipClick (Chip chip) {
// ¡Acción aquí!
}
});

Más control de diseño

Si el diseño predeterminado y el color de fondo no coinciden con sus necesidades, puede anularlo de diferentes maneras.

Atributos XML (sin adaptador personalizado)

Aquí hay un ejemplo de todos los atributos XML posibles:

<com.plumillonforge.android.chipview.ChipView
android: id = “@ + id / text_chip_attrs”
android: layout_width = “match_parent”
android: layout_height = “wrap_content”
chip: chip_background = “@ color / deep_orange”
chip: chip_background_selected = “@ color / blue_grey”
chip: chip_corner_radius = “6dp”
chip: chip_line_spacing = “20dp”
chip: chip_padding = “10dp”
chip: chip_side_padding = “10dp”
chip: chip_spacing = “16dp”
chip: chip_background_res = “@ drawable / chip_selector” />

chip_background y chip_background_selected serán anulados por chip_background_res si se proporcionan

Cambiar los colores de fondo

Puede cambiar todo el fondo del Chip en una línea:

chipView.setBackgroundColor (getResources (). getColor (R.color.light_green));

Si tienes un escucha de clics y quieres otro color cuando haces clic:

chipView.setChipBackgroundColorSelected (getResources (). getColor (R.color.green));

O si prefiere controlar los comentarios de color de clic con su propio selector:

chipView.setChipBackgroundRes (R.drawable.chipview_selector);

O elimine el fondo completamente con setHasBackground

Cambio del espaciado de chip, espaciado de línea, relleno de chip y radio de esquina

• Puede controlar el espacio entre Chip con setChipSpacing (el valor predeterminado es 4dp)
• Puede controlar el espacio entre cada línea de Chip con setChipLineSpacing (el valor predeterminado es 4dp)
• Puede controlar el relleno de Chip superior e inferior con setChipPadding (el valor predeterminado es 2dp)
• Puede controlar el relleno de Chip izquierdo y derecho con setChipSidePadding (el valor predeterminado es 6dp)
• Puede controlar el radio de la esquina del fondo del Chip setChipCornerRadius (el valor predeterminado es 16dp)

Cambiar todo el diseño del chip

Si desea su propio diseño para todos los Chip , puede especificarlo en su adaptador (o mediante el método proxy ChipView ):

chipView.setChipLayoutRes (R.layout.chip_close);

Un TextView con android:id="@android:id/text1" es obligatorio en el diseño

El fondo se establece en la View raíz del diseño de forma predeterminada, si necesita colocar el fondo en una View específica en el diseño, proporcione un android:id="@android:id/content" .

Reglas de espaciado de chips y espaciado de líneas

• Si el diseño no tiene un margen derecho, volvemos al espaciado ChipView Chip
• Si el diseño no tiene un margen inferior, volvemos al ChipView entre líneas ChipView Chip

Control de diseño y colores de fondo individualmente

Si necesita personalizar su Chip individual, puede hacerlo anulando sus ChipViewAdapter getLayoutRes(int position) , getBackgroundColor(int position) y getBackgroundColorSelected(int position) .

Por ejemplo :

@Anular
public int getLayoutRes (int position) {
Etiqueta etiqueta = (Etiqueta) getChip (posición);

switch (tag.getType ()) {
defecto:
caso 2:
caso 4:
devuelve 0;

caso 1:
caso 5:
return R.layout.chip_double_close;

caso 3:
return R.layout.chip_close;
}
}

@Anular
public int getBackgroundColor (int posición) {
Etiqueta etiqueta = (Etiqueta) getChip (posición);

switch (tag.getType ()) {
defecto:
devuelve 0;

caso 1:
caso 4:
return getColor (R.color.blue);

caso 2:
caso 5:
return getColor (R.color.purple);

caso 3:
return getColor (R.color.teal);
}
}

El Chip vuelve al comportamiento general de ChipView si devuelve 0.

Última oportunidad para modificar su diseño

El adaptador tiene un método onLayout donde puede manipular cada View Chip , este es el último lugar donde podrá agregar lógica para cambiar la View sí:

@Anular
public void onLayout (Ver vista, posición int) {
Etiqueta etiqueta = (Etiqueta) getChip (posición);

if (tag.getType () == 2)
((TextView) view.findViewById (android.R.id.text1)). SetTextColor (getColor (R.color.blue));
}

Cómo utilizar

Gradle

Puede incluir ChipView en sus dependencias de Gradle a través de JitPack. Ejemplo para la versión 1.2.0:

repositorios {
maven {url “https://jitpack.io”}
}

dependencias {
compile ‘com.github.Plumillon: ChipView: 1.2.0’
}

Clonación

También puede optar por descargarlo o clonarlo en su proyecto y usarlo como biblioteca.

Por qué ?

ChipView es una necesidad personal de uno de mis proyectos, decidí desarrollarlo y distribuirlo porque no pude encontrar nada que coincidiera con lo que estaba buscando.

Como funciona esto

ChipView amplía ViewGroup y contendrá cada Chip como su vista secundaria.

Sus datos y vistas están controlados por su adaptador, que puede ser uno predeterminado si no se especifica.