Android SlidingTabLayout帶圖標

Question

我在我的視圖中使用的是Google的SlidingTabLayout，但我想將圖標添加到選項卡中。我正在使用http://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html 任何人都可以請幫忙嗎？

void setUpPager(View view){ 
    mViewPager = (ViewPager) view.findViewById(R.id.viewpager); 
    mViewPager.setAdapter(new TabsPagerAdapter(getActivity())); 
    mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs); 
    mSlidingTabLayout.setViewPager(mViewPager); 
    } 

這裏是我的xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical"> 

    <android.common.view.SlidingTabLayout 
     android:id="@+id/sliding_tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="0px" 
     android:layout_weight="1" 
     android:background="@android:color/white"/> 

</LinearLayout> 

Answer 1

使用mSlidingTabLayout.setCustomTabView(int layoutResId, int textViewId)膨脹的自定義佈局爲SlidingTabLayout標籤視圖。

當SlidingTabLayout試圖填充標籤條時，最初會查找任何指定的佈局資源進行膨脹。否則，它會使默認選項卡視圖膨脹。

Answer 2

只是想給出正確和被接受的答案的例子。 :)
首先，添加選項卡並在將適配器添加到viewpager時設置其自定義視圖。例如看到下面幾行：

mViewpager = (ViewPager) view.findViewById(R.id.pager); 

//Do something with your view before setting up adapter 

ViewPager.setAdapter(mSectionsPagerAdapter); 
mSlidingTabLayout = (SlidingTabLayout) View().findViewById(R.id.sliding_tabs); 
mSlidingTabLayout.setCustomTabView(R.layout.custom_tab_title, R.id.tabtext); 
mSlidingTabLayout.setViewPager(mViewPager); 

哪裏sliding_tabs是要添加的tabs_titles和xml文件中定義的viewpager，如：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <com.packagename.SlidingTabLayout 
     android:id="@+id/sliding_tabs" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     /> 

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:tools="http://schemas.android.com/tools" 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/sliding_tabs" 
     tools:context=".ActivityUser" 
     android:fitsSystemWindows="true" 
     android:textStyle="bold" 
     android:textSize="20dp"/> 

</RelativeLayout> 

，並在那裏custom_tab_title是一個獨立的xml文件在您layout例如：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:id="@+id/titletab"> 

    <ImageView 
    android:id="@+id/tabimage" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="top" 
    android:layout_marginLeft="2dp" 
    /> 

    <TextView 
    android:id="@+id/tabtext" 
    android:layout_width="match_parent" 
    android:layout_height="50dp" 
    android:gravity="bottom" 
    android:paddingBottom="15dp" 
    android:paddingLeft="4dp" 
    android:paddingRight="4dp"/> 

</LinearLayout> 

和你可以通過設置圖像爲特定標籤：

Drawable tab_image = getResources().getDrawable(getResources().getIdentifier("image_name_in_drawable", "drawable", "com.packagename")); 
tab_image.setBounds(0, 0, 40, 40); //Setting up the resolution for image 
ImageSpan imageSpanresource = new ImageSpan(tab_image); 
//Notice the additional space at the end of the String 
resourcesstring = "Tab1 "; 
//here we are setting up the position to display image.. 
SpannableString viewpager_tab_title = new SpannableString(resourcesstring); 
viewpager_tab_title.setSpan(imageSpanresource, resourcesstring.length()-1, resourcesstring.length(), 0); 

通知，我已經加入到viewpager_tab_title額外的空間和我的圖像設置到該位置，從而使實際的字符串被完全顯示。

Answer 3

要以您想要的方式自定義SlidingTabLayout，您只需修改populateTabStrip（）方法。採用這種方法，您不需要關心任何TextView。

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中是默認的。