如何在 android FragmentPagerAdapter 中添加页面标题和图标

Question

我想在 header 页面标题中显示带有相应图标的标题。如下图，但只能显示标题和缺少图标。

这是我的示例代码。

public class SectionsPagerAdapter extends FragmentPagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        // Return a DummySectionFragment (defined as a static inner class
        // below) with the page number as its lone argument.

        Log.e("POSITION", "position=" + position);
        Fragment fragment;
        switch (position) {
        case 0:
         //Fragment1
        case 1:
         //Fragment2
        case 2:
         //Fragment3
        case 3:
         //Fragment4
        case 4:
         //Fragment5

        }
        return null;

    }

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

    // using both these techniques but could not get icon in title
    /*
     * public int getIconResId(int index) { return ICONS[index % ICONS.length]; }
     */

    public int getPageIconResId(int position) {
        return ICONS[position];
    }

    @Override
    public CharSequence getPageTitle(int position) {
        Locale l = Locale.getDefault();
        switch (position) {
        case 0:
        return getString(R.string.title_section1).toUpperCase(l);
        case 1:
        return getString(R.string.title_section2).toUpperCase(l);
        case 2:
        return getString(R.string.title_section3).toUpperCase(l);
        case 3:
        return getString(R.string.title_section4).toUpperCase(l);
        case 4:
        return getString(R.string.title_section5).toUpperCase(l);
        }
        return null;
    }

    }

并在 onCreate 中：

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

    // Set up the ViewPager with the sections adapter.
    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mSectionsPagerAdapter);

使用此 xml 文件在片段中显示片段页面适配器；

<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/rlv2"
        android:layout_marginTop="-30dp" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pager_title_strip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"  
            android:textColor="@color/black"
            android:textStyle="bold" />
    </android.support.v4.view.ViewPager>

我需要的输出图像 app.Could 请知道如何显示带有图标和标题的分区页面适配器。

Answer 1

我从 Stever 得到了解决方案。

Drawable myDrawable;
String title;

@Override
public CharSequence getPageTitle(int position) {
   switch (position) {
    case 0:
       myDrawable = getResources().getDrawable(R.drawable.img_section1);
       title = getResources().getString(R.string.title_section1);
       break;
    case 1:
       myDrawable = getResources().getDrawable(R.drawable.img_section2);
       title = getResources().getString(R.string.title_section2);
       break;
    case 2:
       myDrawable = getResources().getDrawable(R.drawable.img_section3);
       title = getResources().getString(R.string.title_section3);
       break;
    case 3:
       myDrawable = getResources().getDrawable(R.drawable.img_section4);
       title = getResources().getString(R.string.title_section4);
       break;
    case 4:
       myDrawable = getResources().getDrawable(R.drawable.img_section5);
       title = getResources().getString(R.string.title_section5);
       break;
    default:
      //TODO: handle default selection
       break;
    }

    SpannableStringBuilder sb = new SpannableStringBuilder("   " + title); // space added before text for convenience
    try {
        myDrawable.setBounds(5, 5, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
        ImageSpan span = new ImageSpan(myDrawable, DynamicDrawableSpan.ALIGN_BASELINE);
        sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        return sb;
    } catch (Exception e) {
        // TODO: handle exception
    }

谢谢你。

Answer 2

如果您使用的是设计支持库TabLayout，您只需调用：

tabLayout.getTabAt(i).setIcon();

Answer 3

对我来说，它是这样工作的：

@Override
    public CharSequence getPageTitle(int position) {
        SpannableStringBuilder sb;
        ImageSpan span;
        switch (position) {
            case 0:
                myDrawable = getResources().getDrawable(R.drawable.heart_18);
                sb = new SpannableStringBuilder("  Page1"); // space added before text for convenience

                myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
                span = new ImageSpan(myDrawable, ImageSpan.ALIGN_BASELINE);
                sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

                return sb;
            case 1:
                myDrawable = getResources().getDrawable(R.drawable.star_grey_18);
                 sb = new SpannableStringBuilder("  Page2"); // space added before text for convenience

                myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
                span = new ImageSpan(myDrawable, ImageSpan.ALIGN_BASELINE);
                sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

                return sb;
            case 2:
                myDrawable = getResources().getDrawable(R.drawable.star_pink_18);
                sb = new SpannableStringBuilder("  Page3"); // space added before text for convenience

                myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
                span = new ImageSpan(myDrawable, ImageSpan.ALIGN_BASELINE);
                sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

                return sb;
        }
    }
}

Answer 4

在这里找到答案

像这样创建图标数组 private int[] tabIcons = { R.drawable.ic_tab_favourite, R.drawable.ic_tab_call, R.drawable.ic_tab_contacts};

并将图标设置为 tabLayout

tabLayout = (TabLayout) findViewById(R.id.tabs);

tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]); tabLayout.getTabAt(2).setIcon(tabIcons[2]);

更多

Link1 :https://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

Link 2 :http://www.androiddeft.com/tablayout-viewpager-android/

Answer 5

您可以使用：

myTabLayout.getTabAt(index).setIcon(R.drawable.myIcon);

如何在 android FragmentPagerAdapter 中添加页面标题和图标

How to add page title and icon in android FragmentPagerAdapter

android

fragmentpageradapter