如何在 Android SlidingTab 加入 Icon 圖示

SlidingTab with icon

這篇文章從 [Android] SlidingTab 的使用 延伸而來，在原本的 Tab 中加入圖示(icon)。這裡稍為紀錄修改的內容，可能不是那麼完整。

步驟 1. 修改 TabFragment.java

SlidingTabLayout 有提供一個 setCustomTabView() 方法，可以使用它來自定 Tab view，將它加在 tabs.setViewPager(pager); 前面：

tabs.setCustomTabView(R.layout.tab_title, R.id.txtTabTitle, R.id.imgTabIcon);

修改 getFragments() 方法中的內容：

fragments.add(BookFragment.newInstance("Book", indicatorColor, dividerColor, android.R.drawable.ic_dialog_info));
fragments.add(CookFragment.newInstance("Cook", indicatorColor, dividerColor, android.R.drawable.ic_dialog_map));
fragments.add(FoodFragment.newInstance("Food", indicatorColor, dividerColor, android.R.drawable.ic_dialog_email));
fragments.add(GoodFragment.newInstance("Good", Color.BLUE, dividerColor, android.R.drawable.ic_lock_power_off));
fragments.add(LookFragment.newInstance("Look", Color.CYAN, dividerColor, android.R.drawable.ic_dialog_dialer));
fragments.add(WoodFragment.newInstance("Wood", Color.MAGENTA, dividerColor, android.R.drawable.ic_media_play));

主要是後面多了 icon 的值，這裡直接拿內建的圖示來用。

步驟 2. 新增 tab_title.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="8dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >

    <ImageView
        android:id="@+id/imgTabIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/txtTabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imgTabIcon"
        android:layout_centerHorizontal="true"
        android:text="Tab" />

</RelativeLayout>

可自行修改設計。

步驟 3. 修改 SlidingTabLayout.java

//加入 
private int mTabViewIconId;

//修改
public void setCustomTabView(int layoutResId, int textViewId, int iconViewId) {
        mTabViewLayoutId = layoutResId;
        mTabViewTextViewId = textViewId;
        mTabViewIconId = iconViewId;
    }

//最後在 populateTabStrip() 改成這樣
if (mTabViewLayoutId != 0) {
    // If there is a custom tab view layout id set, try and inflate it
    tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, false);
    tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
    tabIcon = (ImageView) tabView.findViewById(mTabViewIconId);
}
            
if (tabIcon != null) {
 tabIcon.setImageResource(adapter.getIconResId(i));
}

步驟 4. 修改 TabFragmentPagerAdapter.java

加入

public int getIconResId(int position) {
 return fragments.get(position).getIconResId();
}

步驟 5. 修改 BaseFragment.java

加入

private int iconResId = 0;

public int getIconResId() {
 return iconResId;
}
public void setIconResId(int iconResId) {
 this.iconResId = iconResId;
}

步驟 6. 修改每個頁面的 Fragment

這裡修改 BookFragment.java ，其他的都相同：

public static BookFragment newInstance(String title, int indicatorColor, int dividerColor, int iconResId) {
//略
f.setIconResId(iconResId);

程式碼已經 push 到 GitHub (SlidingTabDemo)，執行的結果如下：

本文網址：http://blog.tonycube.com/2015/08/android-slidingtab-with-icon.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀