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

时间:2015-07-07 05:27:43

标签: android fragmentpageradapter

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

这是我的示例代码,。

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>

输出我需要我的应用程序的图像。如果您想知道如何使用图标和标题显示部分页面适配器,请大家知道。

enter image description here

5 个答案:

答案 0 :(得分:16)

如果您使用的是设计支持库TabLayout,则只需致电:

        var names = _.pluck(results.publicIfaceList, 'name');
        var dropInterface = [];
        for(var i = 0; i < names.length; i++){
            dropInterface.push("-A FORWARD -i "+names[i]+" -j DROP");
        }

        fs.readFile(FirewallConstants.IPTABLES_RULES, 'utf8', function (err,data) {
            if (err) {
                cb(err);
                return;
            }

            var result = data.replace("${DROP_INTERFACE}", dropInterface.join('\n'));
            fs.writeFile(FirewallConstants.IPTABLES_RULES, result, 'utf8', function (err) {
                cb(err);
            });
        });

答案 1 :(得分:12)

我从 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);
    } catch (Exception e) {
        // TODO: handle exception
    }

谢谢你。

答案 2 :(得分:0)

对我而言,它的工作原理如下:

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

enter image description here

答案 3 :(得分:0)

在此处找到解决方法

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

并将setIcon设置为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]);

更多此处

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

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

答案 4 :(得分:0)

您可以使用:

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