¿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:
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.
- ¿Cómo puedo obtener un Android TableLayout para llenar la pantalla?
- Gráfico de barras usando achartengine
- ¿Por qué Tab host no muestra el icono en android?
- Tabla de soporte de diseño de Android Contenido solapado de superposición
- Android - Navegación con pestañas en orientación horizontal
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í?
- Divisores entre TabWidgets
- Gráfico de barras con eje x textual - achartengine
- Android: agregar botones a un diseño existente mediante programación
- Bibliotecas de gráficos Android
- ¿Cómo puedo crear un diseño con pestañas completamente en XML?
Aquí hay otro enfoque: separar el encabezado de las pestañas. Un poco complicado, sí, pero los beneficios son:
- Permite definir el estilo de pestañas común;
- Soporta cualquier número de botones.
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:
Y R.drawable.header_divider
es un mapa de bits simple (opcionalmente transparente):
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.