¿Cómo puedo diseñar las pestañas de Android para obtener un aspecto 3D?

Quiero crear una pestaña de pestañas de Android para que parezca esta imagen: Barra de pestañas 3d

Supongo que hay muchas maneras de Roma, pero creo que todavía no he encontrado el ideal. Mi idea era cortar un divisor y un divisor activo y colocarlos entre los botones. Sin embargo, no sé si esto sería una buena solución porque todavía necesitaría diferentes estilos para el primer y último botón. Ya tengo un parche 9 para el contenedor (gris) circundante.

También he pensado en hacer un parche rojo 9 para la barra roja, y que simplemente el estilo del botón seleccionado. El problema con esta solución es que todavía tendría que colocar las líneas diagonales blancas de acuerdo con el número de botones.

¿Alguien tiene una solución mejor para mí?

Aquí hay otro enfoque: separar el encabezado de las pestañas. Un poco complicado, sí, pero los beneficios son:

  1. Permite definir el estilo de pestañas común;
  2. Soporta cualquier número de botones.

Diseño

En esta imagen los botones son de diferente ancho, por lo que en realidad un ImageView adicional puede ser necesario a la izquierda del encabezado.

Vamos a crear nuestra vista de cabecera como LinearLayout. Podemos colocar los divisores superiores y las separaciones estirables con el mismo layout_weight .

 public class HeaderLayout extends LinearLayout { public HeaderLayout(Context context) { super(context); initView(); } public HeaderLayout(Context context, AttributeSet attrs) { super(context, attrs); initView(); } public void setNumberOfColumns(int number) { removeAllViews(); for (int i = 0; i < number; i++) { addView(getColumnView(), getColumnLayoutParams()); // We don't need a divider after the last item if (i < number - 1) { addView(getDividerView(), getDividerLayoutParams()); } } } private void initView() { setBackgroundResource(R.drawable.header_bg); } private View getColumnView() { return new View(getContext()); } private View getDividerView() { ImageView dividerView = new ImageView(getContext()); dividerView.setImageResource(R.drawable.header_divider); dividerView.setScaleType(ImageView.ScaleType.FIT_XY); return dividerView; } private LayoutParams getColumnLayoutParams() { return new LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f); } private LayoutParams getDividerLayoutParams() { return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT); } } 

Donde R.drawable.header_bg es un 9patch:

R.drawable.header_bg

Y R.drawable.header_divider es un mapa de bits simple (opcionalmente transparente):

R.drawable.header_divider

Para mí personalmente, hacer diferente fondo para el primero y el último botón es la solución menos difícil, pero depende de la tarea real.

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.