如何在选项卡中设置图标和文本而不是仅文本android

时间:2015-06-09 04:17:58

标签: android text tabs icons

我创建了一个标签,并尝试将图标和文字放在我的标签布局中,但它始终只显示文字。我也试过显示图标,但是我遇到了关于getResource()。getDrawable()的问题,并尝试将上下文放在getDrawable()中,但我仍然遇到问题。

这是我的ViewPagerAdapter的代码

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

CharSequence Titles[]; 
int NumbOfTabs;

Context mContext;

private int[] icons = {
        R.drawable.abouttab,
        R.drawable.programmetab,
        R.drawable.speakerstab,
        R.drawable.mapstab,
        R.drawable.twittertab
};

public ViewPagerAdapter(FragmentManager fm,CharSequence mTitles[], int mNumbOfTabsumb, Context context) {
    super(fm);

    this.Titles = mTitles;
    this.NumbOfTabs = mNumbOfTabsumb;
    this.mContext = context;

}

@Override
public Fragment getItem(int position) {

    if(position == 0)
    {
        Tab_About tab_about = new Tab_About();
        return tab_about;
    }
    else if(position == 1)        
    {
        Tab_one tab_one = new Tab_one();
        return tab_one;

    }else if(position == 2){
        Tab_two tab_two = new Tab_two();
        return tab_two;
    }else if(position == 3){
        Tab_three tab_three = new Tab_three();
        return tab_three;
    }else{
        Tab_four tab_four = new Tab_four();
        return tab_four;
    }

}

@Override
public CharSequence getPageTitle(int position) {
    return Titles[position];
}

// This method return the Number of tabs for the tabs Strip

@Override
public int getCount() {
    return NumbOfTabs;
}

}

对于getPageTitle()函数我也试过这段代码只显示图标,但就像我上面说的那样我遇到了getDrawable()的问题

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

在我的MainActivity中

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;
private ViewPager mPager;
private ViewPagerAdapter adapter;
private SlidingTabLayout mTabs;
private Context mContext;

CharSequence Titles[] = {"One", "Two", "Three", "Four", "Five"};
int Numboftabs = 5;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    toolbar = (Toolbar) findViewById(R.id.tool_bar); 
    setSupportActionBar(toolbar);
    getSupportActionBar().setElevation(0); 

    adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles, Numboftabs, mContext);

    // Assigning ViewPager View and setting the adapter
    mPager = (ViewPager) findViewById(R.id.pager);
    mPager.setAdapter(adapter);

    // Assigning the Sliding Tab Layout View
    mTabs = (SlidingTabLayout) findViewById(R.id.tabs);
    mTabs.setDistributeEvenly(true); // To make the Tabs Fixed set this true, This makes the tabs Space Evenly in Available width

    // Setting Custom Color for the Scroll bar indicator of the Tab View
    mTabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
        @Override
        public int getIndicatorColor(int position) {
            return getResources().getColor(R.color.tabsIndicator);
        }
    });

mTab​​s.setSelectedIndicatorColors(getResources()的getColor(R.color.tabsIndicator)。);         mTabs.setViewPager(mPager);     }

谁能帮助我吗?非常感谢你......

1 个答案:

答案 0 :(得分:1)

创建如下所示的自定义布局

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

<ImageView
    android:id="@+id/tabIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:paddingTop="2dp" />

<TextView
    android:id="@+id/tabText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:textColor="#FFFFFF" />

</LinearLayout>

将自定义布局设置为操作栏标签

Tab tab = actionBar.newTab().setCustomView(R.layout.yourView)