Wie kann ich Android-Tabs gestalten, um 3D-Look zu bekommen?

Question

Ich möchte ein Android-Tab-Ansicht erstellen, wie dieses Bild aussehen:

Ich denke, es gibt viele Wege nach Rom, aber ich glaube, ich habe immer noch nicht den idealen gefunden. Meine Idee war, einen Teiler und einen aktiven Teiler auszuschneiden und sie zwischen die Knöpfe zu legen. Ich weiß jedoch nicht, ob das eine so gute Lösung wäre, weil ich für die erste und letzte Taste noch ein anderes Styling benötigen würde. Ich habe bereits einen 9 Patch für den umgebenden (grauen) Container.

Ich habe auch darüber nachgedacht, einen roten 9 Patch für den roten Balken zu machen, und dann einfach die ausgewählte Taste stylen. Das Problem bei dieser Lösung ist, dass ich die oberen diagonalen weißen Linien immer noch nach der Anzahl der Schaltflächen platzieren muss.

Hat jemand eine bessere Lösung für mich?

Answer 1

Hier ist ein weiterer Ansatz: die Kopfzeile von den Registerkarten zu trennen. Ein bisschen kompliziert, ja, aber die Vorteile sind:

1. Es ermöglicht Ihnen, gemeinsame Registerkarten Stil zu definieren;
2. Unterstützt eine beliebige Anzahl von Tasten.

Auf diesem Bild der Tasten unterschiedlicher Breite sind, so in Wirklichkeit ein zusätzliches ImageView links von der Kopfzeile benötigt werden.

Lassen Sie uns unsere Header-Ansicht als LinearLayout erstellen. Wir können obere Teiler und dehnbare Lücken mit demselben layout_weight setzen.

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); 
    } 

} 

Wo R.drawable.header_bg ist ein 9patch:

Und R.drawable.header_divider ist ein einfacher (optional transparent) Bitmap:

Für mich persönlich unterschiedlichen Hintergrund macht für Der erste und der letzte Knopf ist die am wenigsten schwierige Lösung, aber es hängt von der eigentlichen Aufgabe ab.