ViewPagerIndicator Tabs: Các biểu tượng trên bản

Question

Tôi đang sử dụng ViewPagerIndicator và tôi muốn thay đổi phong cách tab vì vậy tôi có thể nhận được các biểu tượng trên văn bản, thay vì mặc định, và được xếp vào biểu tượng ở phía bên trái, và danh hiệu rẽ phải.

Answer 1

Bạn có thể đạt được hiệu ứng này bằng cách chỉ sửa đổi 1 dòng trong mã nguồn của thư viện ViewPageIndicator.

Dòng phải được sửa đổi là trong số 180 trong lớp TabPageIndicator bên trong phương pháp addTab (ít nhất là trên phiên bản hiện nay của mã 28/05/2013)

Các tập tin ban đầu là

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

Và bạn nên sửa đổi nó sau đây nếu bạn muốn biểu tượng để đi trên đầu trang của văn bản.

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

Dưới đây là một ảnh chụp màn hình của sự thay đổi

Như bạn có thể đoán của bây giờ, bạn có thể đặt biểu tượng ở bất cứ đâu xung quanh văn bản bằng cách chơi với iconResId trong lập luận khác nhau của setCompoundDrawablesWithIntrinsicBounds phương pháp.

Answer 2

Lý do tại sao các biểu tượng luôn xuất hiện bên trái là vì đoạn mã này:

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

tìm thấy trong TabPageIndicator.java

Đây là một phần của một phương pháp tư nhân (addTab()), và như vậy, không thể thay đổi mà không sửa đổi thư viện.

May mắn thay, điều này không quá khó để làm. Hãy chắc chắn rằng bạn có mã ViewPagerIndicator nguồn tải về, sau đó mở lên TabPageIndicator.java

Nếu bạn muốn thay đổi vị trí vĩnh viễn (như vĩnh viễn như bạn có thể nhận được với một sự thay đổi mã nguồn), thay đổi vị trí của iconResId trong phương pháp setCompoundDrawablesWithIntrinsicBounds() . Ví dụ: đặt các biểu tượng ở trên cùng cần iconResId làm đối số thứ hai cho phương thức.

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

Nếu bạn cần một chút linh hoạt hơn, tôi đã đưa ra những thay đổi này (vẫn còn trong TabPageIndicator.java) sẽ hoạt động. Những thay đổi này đã được nhân đôi on my GitHub, do đó, có một ví dụ làm việc.

biến thành viên:

/** 
* 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; 

Thêm phương pháp này:

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

Trong addTab(), thay đổi

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

để

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

Non-thư viện thực hiện (lấy từ mã mẫu được cung cấp)

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

Answer 3

Có một cách sạch hơn để làm điều đó mà không sửa đổi thư viện. Chỉ cần sao chép và dán lớp TabPageIndicator vào dự án của bạn và sửa đổi các dòng được chỉ ra trong các câu trả lời khác. Sau đó đổi tên lớp thành bất kỳ thứ gì bạn thích và sử dụng nó như thể nó là TabPageIndicator.