How to add page title and icon in android Fragment

问题:

I have to display title with respective icon in header page title. like this image. but only able to display title not icon.

Here is the my code that i have done.

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

    }

and in onCreate:

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

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

Using this xml file for display fragment page adapter in fragment;

<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>

In this picture, final out that i want to be. But only display in my application without icon.Could you please any idea how to display section page adapter with icon and title.

回答1:

If you are using the design support library TabLayout, you can simply call:

tabLayout.getTabAt(i).setIcon();

回答2:

I got solution from 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:
    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);
    } catch (Exception e) {
    // TODO: handle exception
    }

Thank you stever.

回答3:

for me it worked like this :

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