將圖標添加到SlidingTabLayout而不是文本

Question

我在我的android應用程序中實現SlidingTabLayout。我的查詢是，我想要在我的滑動選項卡中實現圖標，而不是用於導航的文本。我在互聯網上大量搜索任何這樣的教程或樣本，但沒有發現。我也搜索了上一個問題在計算器上：Over Here - SlidingTabLayout with Icons。它有點內容豐富，但並沒有真正幫助我。

要清楚。我需要我的標籤由圖標組成。沒有文字。

由於我是這個整體設置的新手，我很感激你是否會發布正確的代碼和解釋。感謝您的時間和精力！

附：我還聽說有關Andreaz Stuetz的pagerslidingtabstrip並想知道如果這將是更適合的東西我要爲...

同樣類型：這裏是什麼，我想我的滑動標籤看起來像。看看這張圖片的頂部。

編輯：現在，LOLLIPOP（與材料設計）已經出來。我使用一個新的「唯一的圖標」SLIDING-TAB-LAYOUT下面看到他們的工具欄（ANDROID 5.0 ACTION-BAR），看到了很多應用程序。他們有什麼新的方式來實現這個？再次感謝！

Answer 1

從FragmentActivity擴展您的主要活動。還實現了從ActionBar.TabListener這個類，因爲我們添加標籤

//添加標籤

for (String tab_name : tabs) { 
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.drawable_id) 
.setTabListener(this)); 
} 

檢查here。

Answer 2

這裏的關鍵是要返回SpannableString，含在ImageSpan你的圖標，從PagerAdapter的getPageTitle（位置）方法：

private int[] imageResId = { 
     R.drawable.ic_tab_notifications, 
     R.drawable.ic_tab_weather, 
     R.drawable.ic_tab_calendar 
}; 

@Override 
public CharSequence getPageTitle(int position) { 
    Drawable image = getResources().getDrawable(imageResId[position]); 
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 
    SpannableString sb = new SpannableString(" "); 
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
    return sb; 
} 

通常這是就足夠了，但是默認的選項卡通過創建SlidingTabLayout使得以TextView#setAllCaps(true)呼叫有效地禁止所有ImageSpans，所以你必須使用，而不是一個自定義選項卡視圖：

RES /佈局/ custom_tab.xml

<?xml version="1.0" encoding="utf-8"?> 
<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textSize="12sp" 
    android:textStyle="bold" 
    android:background="?android:selectableItemBackground" 
    android:padding="16dp" 
    /> 

，並在任何你安裝/綁定到你的ViewPager：

SlidingTabLayout slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs); 
slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0); 
slidingTabLayout.setViewPager(viewPager); 

（確保setViewPager之前調用setCustomTabView）

Answer 3

好吧..有實現這種變化的許多方面。這是最快和最骯髒的一個，只是想法..

替代方法SlidingTabLayout.populateTabStrip（）爲此..

private void populateTabStrip() { 
    final OnClickListener tabClickListener = new TabClickListener(); 

    View tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_notif_icon_only, mTabStrip, false); 
    tabView.setOnClickListener(tabClickListener); 
    mTabStrip.addView(tabView); 

    tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_weather_icon_only, mTabStrip, false); 
    tabView.setOnClickListener(tabClickListener); 
    mTabStrip.addView(tabView); 

    tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_calendar_icon_only, mTabStrip, false); 
    tabView.setOnClickListener(tabClickListener); 
    mTabStrip.addView(tabView); 

創建每個佈局這樣的LinearLayout> ImageView的元素，SRC指向圖標..

Answer 4

最近我實現了這個庫調用ViewPagerAddons。它包括SlidingTabLayoutColors，這正是你所需要的。只需讓你的尋呼機適配器實現SlidingTabLayouColors.ImageProvider接口，重寫getPageImage方法並根據頁面位置返回圖像資源id。簡單。

這裏的鏈接庫（設置指令包括）：https://bitbucket.org/enthusiast94/viewpageraddons/src

Answer 5

我知道這個線程，如果比較老了，但我想還是分享我解決這個問題，因爲它可能是一些有用的。 它工作得非常好，即使對於不同的drawables，取決於所選狀態。

我首先做了定義兩個數組SlidingTabLayout類中（這很容易被外包到其他類）：

private int[] imageResId = { 
     R.drawable.multi_random, 
     R.drawable.single_random, 
     R.drawable.known_person, 
}; 

private int[] imageResSelected = { 
     R.drawable.multi_random_selected, 
     R.drawable.single_random_selected, 
     R.drawable.known_person_selected 
}; 

private int mOldPosition = 0; 

現在我們改變SlidingTabLayout內populateTabStrip()方法：

for (int i = 0; i < adapter.getCount(); i++) { 
      View tabView = null; 
      ImageView tabImageView = null; 

      if (mTabViewLayoutId != 0) { // HAS TO BE SET FOR THE MOMENT! 
       // If there is a custom tab view layout id set, try and inflate it 
       tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, 
         false); 
       tabImageView = (ImageView) tabView.findViewById(mTabViewTextViewId); 
      } 

      if (tabView == null) { 
       tabView = createDefaultTabView(getContext()); 
      } 

      if (tabImageView == null && ImageView.class.isInstance(tabView)) { 
       tabImageView = (ImageView) tabView; 
      } 

      int resourceId; 
      if (i == mViewPager.getCurrentItem()) { 
       resourceId = imageResSelected[i]; 
       mOldPosition = i; 
      } else { 
       resourceId = imageResId[i]; 
      } 
      tabImageView.setImageResource(resourceId); 
      tabView.setOnClickListener(tabClickListener); 

      mTabStrip.addView(tabView); 
     } 

要根據選擇哪個標籤更新圖像，我們在onPageSelected方法中添加一些行

// This Method is called once the transition is finished 
// Change the drawable of the old one.. 
ImageView view = (ImageView) mTabStrip.getChildAt(mOldPosition); 
view.setImageResource(imageResId[mOldPosition]); 

// And now change it of the current one 
view = (ImageView) mTabStrip.getChildAt(position); 
view.setImageResource(imageResSelected[position]); 

mOldPosition = position; 

最後，我們需要添加自定義選項卡瀏覽：

mSlidingTabLayout.setCustomTabView(R.layout.custom_tab, 0); 

贊一個

<?xml version="1.0" encoding="utf-8"?> 
<ImageView xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:padding="16dp" 
      android:layout_weight="1" 
      android:src="@drawable/multi_random" 
     /> 

該解決方案是遠遠不夠完善，但適合我的需要。也許我可以幫助這個人。

Answer 6

我解決了同樣的問題，但也改變了在選定的選項卡上繪製。

爲兩個狀態的選項卡創建繪圖。 first_tab_drawable.xml，second_tab_drawable.xml，third_tab_drawable.xml：

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/ic_selected" android:state_selected="true"/> 
    <item android:drawable="@drawable/ic_normal"/> 
</selector> 

創建自己的尋呼機適配器，從PagerAdapter擴展：

public class MyPagerAdapter extends PagerAdapter { 

    private int[] drawablesIds = { 
     R.drawable.first_tab_drawable, 
     R.drawable.second_tab_drawable, 
     R.drawable.third_tab_drawable 
    }; 

    //Constructor and other standard funcs... 

    public int getDrawableId(int position){ 
     //Here is only example for getting tab drawables 
     return drawablesIds[position]; 
    } 
    //... 
} 

SlidingTabLayout的更改代碼：

private void populateTabStrip() { 
    //Here is no more standard PagerAdapter! 
    final MyPagerAdapter adapter = (MyPagerAdapter) mViewPager.getAdapter(); 

    final View.OnClickListener tabClickListener = new TabClickListener(); 

    for (int i = 0; i < adapter.getCount(); i++) { 
     View tabView = null; 
     TextView tabTitleView = null; 

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

     if (tabView == null) { 
      tabView = createDefaultTabView(getContext()); 
     } 

     if (tabTitleView == null && TextView.class.isInstance(tabView)) { 
      tabTitleView = (TextView) tabView; 
     } 

     //Set icon, that can be changeable instead setting text. 
     //I think the text also can setting here from getPageTitle func. 
     //But we interesting only in icon 
     tabTitleView.setCompoundDrawablesWithIntrinsicBounds(adapter.getDrawableId(i), 0, 0, 0); 
     //Select tab if it is current 
     if (mViewPager.getCurrentItem() == i){ 
      tabView.setSelected(true); 
     } 
     tabView.setOnClickListener(tabClickListener); 

     mTabStrip.addView(tabView); 
    } 
} 

而且在InternalViewPagerListener的SlidingTabLayout中也可以真正選定TextView標題：

@Override 
    public void onPageSelected(int position) { 

     //Clear old selection and make new 
     for(int i = 0; i < mTabStrip.getChildCount(); i ++){ 
      mTabStrip.getChildAt(i).setSelected(false); 
     } 
     mTabStrip.getChildAt(position).setSelected(true); 

     if (mScrollState == ViewPager.SCROLL_STATE_IDLE) { 
      mTabStrip.onViewPagerPageChanged(position, 0f); 
      scrollToTab(position, 0); 
     } 

     if (mViewPagerPageChangeListener != null) { 
      mViewPagerPageChangeListener.onPageSelected(position); 
     } 
    } 

希望對某人有幫助。

Answer 7

要定製SlidingTabLayout你想要的方式，你只需要修改方法populateTabStrip（）：

public void populateTabStrip() { 
     final PagerAdapter adapter = mViewPager.getAdapter(); 
     final View.OnClickListener tabClickListener = new TabClickListener(); 

     for (int i = 0; i < adapter.getCount(); i++) { 
      View tabView = null; 

      tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_layout, mTabStrip, 
        false); 

      ImageView iconImageView = (ImageView) tabView.findViewById(R.id.tab_layout_icon); 
      iconImageView.setImageDrawable(getContext().getResources().getDrawable(getIconResourceArray()[i])); 

      tabView.setOnClickListener(tabClickListener); 

      mTabStrip.addView(tabView); 
     } 
    } 

您的佈局可能是類似的東西：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="75dp" 
    android:paddingTop="15dp" 
    android:layout_height="50dp" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@+id/tab_layout_icon" 
     android:layout_width="20dp" 
     android:layout_height="20dp" 
     android:layout_gravity="center" /> 
</LinearLayout> 

您實現方式getResourceArray（）方法取決於你。這裏是我做的事：

public class IconSlidingTabLayout extends HorizontalScrollView { 
    private Integer[] mIconResourceArray; 

    ... 

    public Integer[] getIconResourceArray() { 
     return mIconResourceArray; 
    } 

    public void setIconResourceArray(Integer[] mIconResourceArray) { 
     this.mIconResourceArray = mIconResourceArray; 
    } 
} 

在活動：

mSlidingTabLayout = (IconSlidingTabLayout) findViewById(R.id.icon_sliding_tab_layout); 
Integer[] iconResourceArray = { R.drawable.news_tab_icon, 
     R.drawable.challenges_tab_icon, R.drawable.trophies_tab_icon, 
     R.drawable.leaderboard_tab_icon }; 
mSlidingTabLayout.setIconResourceArray(iconResourceArray); 

注意的是，爲了能夠獲得R.layout.tab_layout *，你要代替進口的android yourpackage.R .R，因爲它在SlidingTabStrip中是默認的。

Answer 8

您的適配器應執行PagerSlidingTabStrip.IconTabProvider。

然後在getPageIconResId你可以返回圖像資源編號：

public class ViewPagerAdapter extends FragmentPagerAdapter implements 
PagerSlidingTabStrip.IconTabProvider { 

    private static final int[] icons = {R.drawable.image1, R.drawable.image2, R.drawable.image3}; 

    @Override 
    public int getPageIconResId(int i) { 
     return icons[i]; 
    } 
} 

請記住，只有圖像將顯示，文本不會。

Answer 9

我跟着傑里米的答案，它的工作很好。 AFAIK沒有這樣做的新方法。大多數應用程序現在完全刪除工具欄並添加由Google推薦的自定義滑動條。

如果您有任何具體問題，請告訴我。 iv讓我的應用看起來很像您發佈的屏幕截圖。我覺得這個材料設計更新更側重於啓用自定義動畫和效果。

Answer 10

剛從getPageTitle()方法返回null爲我做：

@Override 
public CharSequence getPageTitle(int position) { 
    return null; 
} 

Answer 11

檢查該解決方案鏈接androidhive about material design tabs /viewpager

一個很好的網站關於Android的解決方案。希望你會找到一個解決方案。