Come posso assegnare uno stile 3D alle schede Android?

Question

Voglio creare una vista scheda Android per assomigliare a questa immagine:

Credo che ci sono molti modi per Roma, ma penso che non ho ancora trovato quello ideale. La mia idea era quella di ritagliare un divisore e un divisore attivo e posizionarli tra i pulsanti. Tuttavia, non so se questa sarebbe una buona soluzione perché avrei ancora bisogno di uno stile diverso per il primo e l'ultimo pulsante. Ho già una patch per il contenitore (grigio) circostante.

Ho anche pensato di creare una patch rossa 9 per la barra rossa e di impostare semplicemente il pulsante selezionato. Il problema con questa soluzione è che dovrei ancora posizionare le linee bianche diagonali superiori in base al numero di pulsanti.

Qualcuno ha una soluzione migliore per me?

Answer 1

Ecco un altro approccio: separare l'intestazione dalle schede. Un po 'complicato, sì, ma i vantaggi sono:

1. Permette di definire lo stile delle schede comuni;
2. Supporta qualsiasi numero di pulsanti.

Su questa immagine i pulsanti sono di diversa larghezza, quindi in realtà un ulteriore ImageView può essere necessario alla sinistra dell'intestazione.

Creiamo la nostra vista di intestazione come LinearLayout. Possiamo mettere i divisori superiori e gli spazi vuoti estensibili con lo stesso 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); 
    } 

} 

Dove R.drawable.header_bg è un 9patch:

E R.drawable.header_divider è un semplice (opzionalmente trasparente) bitmap:

Per me personalmente, rendendo sfondo diverso per il primo e l'ultimo pulsante è la soluzione meno difficile, ma è così dipende dal compito reale.