Jak mogę ustawić stylowe karty Android, aby uzyskać wygląd 3D?

Question

Chcę utworzyć Android kartę Widok wyglądać tego zdjęcia:

myślę, istnieje wiele sposobów, do Rzymu, ale myślę, że nadal nie znalazłem idealnego jeden. Chciałem wyciąć dzielnik i aktywną przegrodę i umieścić je między przyciskami. Nie wiem jednak, czy byłoby to dobre rozwiązanie, ponieważ nadal potrzebowałbym innej stylizacji dla pierwszego i ostatniego przycisku. Mam już 9 łatek do otaczającego (szarego) pojemnika.

Myślałem również o zrobieniu czerwonej łatki 9 dla czerwonego paska, a nie tylko stylizacji wybranego przycisku. Problem z tym rozwiązaniem polega na tym, że nadal będę musiał umieścić górne białe linie po przekątnej zgodnie z liczbą przycisków.

Czy ktoś ma lepsze rozwiązanie dla mnie?

Answer 1

Oto inne podejście: oddzielić nagłówek od kart. Trochę skomplikowane, tak, ale korzyści są następujące:

1. Umożliwia zdefiniowanie wspólnych stylów kart;
2. Obsługuje dowolną liczbę przycisków.

Na tym obrazie przyciski są o różnej szerokości, więc w rzeczywistości dodatkowa ImageView mogą być potrzebne, aby po lewej stronie nagłówka.

Stwórzmy widok nagłówka jako LinearLayout. Możemy umieścić górne przegródki i rozciągalne szczeliny z tym samym 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); 
    } 

} 

Gdzie R.drawable.header_bg jest 9patch:

I R.drawable.header_divider jest proste (opcjonalnie przezroczysta) bitmapy:

Dla mnie osobiście, co innego tła dla pierwszy i ostatni przycisk to najmniej trudne rozwiązanie, ale to zależy od rzeczywistego zadania.