ViewPagerIndicator Tabs: Ikony powyżej tekstu

Question

Używam ViewPagerIndicator i chciałbym zmienić styl zakładki, aby uzyskać ikony powyżej tekstu, zamiast domyślnego, co umieszcza ikonę po lewej stronie, a tytuł w prawo.

Answer 1

Efekt ten można uzyskać, modyfikując tylko 1 wiersz kodu źródłowego biblioteki ViewPageIndicator.

Linia być modyfikowana jest w liczbie 180 w klasie wewnątrz metody addTabTabPageIndicator (przynajmniej na dzisiejszej wersji kodu 28/05/2013)

Oryginalny plik jest

180  tabView.setCompoundDrawablesWithIntrinsicBounds(iconResId, 0, 0, 0); 

Powinieneś zmodyfikować go do następujących, jeśli chcesz, aby ikona była umieszczona na górze tekstu.

180  tabView.setCompoundDrawablesWithIntrinsicBounds(0, iconResId, 0, 0); 

Oto zrzut ekranu ze zmianą

Jak zapewne domyślacie już, można umieścić ikonę wszędzie wokół tekstu grając z iconResId w ramach różnych argumentów setCompoundDrawablesWithIntrinsicBounds metoda.

Answer 2

Powodem ikony zawsze pojawiają się po lewej stronie jest z powodu tego kawałka kodu:

if (iconResId != 0) { 
    tabView.setCompoundDrawablesWithIntrinsicBounds(iconResId, 0, 0, 0); 
} 

znaleźć w TabPageIndicator.java

Jest to część prywatnej metody (addTab()), a więc, nie można zmienić bez modyfikacji samej biblioteki.

Na szczęście nie jest to trudne. Upewnij się, że masz kod ViewPagerIndicator źródłowy pobrany, a następnie otworzyć TabPageIndicator.java

Jeśli chcesz zmienić lokalizację na stałe (jako stały, jak można dostać się ze zmianą kodu źródłowego), należy zmienić lokalizację iconResId w metodzie setCompoundDrawablesWithIntrinsicBounds() . Na przykład umieszczenie ikon u góry wymaga, aby drugi argument metody był iconResId.

tabView.setCompoundDrawablesWithIntrinsicBounds(0, iconResId, 0, 0); 

Jeśli potrzebujesz czegoś bardziej elastyczne, wymyśliłem tych zmian (nadal w TabPageIndicator.java), które powinno działać. Zmiany te zostały odzwierciedlone w on my GitHub, więc istnieje działający przykład.

zmienne użytkownika:

/** 
* Constants to improve readability - no magic numbers. 
*/ 
public final static int LOCATION_LEFT =0; 
public final static int LOCATION_UP = 1; 
public final static int LOCATION_RIGHT = 2; 
public final static int LOCATION_BOTTOM =3; 

/** 
* Stores the location of the tab icon 
*/ 
private int location = LOCATION_LEFT; 

/** 
* Used to store the icon. 
*/ 
private int [] drawables = new int [4]; 

/** 
* Holds the value used by setCompoundDrawablesWithIntrinsicBounds used to denote no icon. 
*/ 
private static int NO_ICON = 0; 

Dodaj tę metodę:

public void setTabIconLocation (int newLocation){ 
    if (location > LOCATION_BOTTOM || location < LOCATION_LEFT) 
     throw new IllegalArgumentException ("Invalid location"); 
    this.location = newLocation; 
    for (int x = 0; x < drawables.length;x++){ 
     drawables [x] = NO_ICON; 
    } 
} 

W addTab(), zmień

if (iconResId != 0) { 
    tabView.setCompoundDrawablesWithIntrinsicBounds(iconResId, 0, 0, 0); 
} 

do

if (iconResId != 0) { 
    drawables [location] = iconResId; 
    tabView.setCompoundDrawablesWithIntrinsicBounds(drawables[0], drawables[1], drawables[2], drawables[3]); 
} 

realizacja dla biblioteki (wzięte z przykładowego kodu przewidzianego)

TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator); 
indicator.setTabIconLocation (TabPageIndicator.LOCATION_UP); 
indicator.setViewPager(pager); 

Answer 3

Jest przejrzysty sposób to zrobić bez modyfikowania biblioteki. Po prostu skopiuj i wklej klasę TabPageIndicator do swojego projektu i zmodyfikuj linie wskazane w innych odpowiedziach. Następnie zmień nazwę klasy na cokolwiek chcesz i użyj jej tak, jakby była to TabPageIndicator.