web-dev-qa-db-ja.com

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

androidfragmentpageradapter
11
Dharma Kshetri

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
    }

スティーブありがとうございます。

17
Dharma Kshetri

設計サポートライブラリ TabLayout を使用している場合は、次を呼び出すだけです。

tabLayout.getTabAt(i).setIcon();
21
clocksmith

私にとっては次のように機能しました：

@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

1
Nima

あなたが使うことができます：

myTabLayout.getTabAt(index).setIcon(R.drawable.myIcon);
0
Amara Miloudi

ここで解決策を見つける

このようなアイコン配列を作成します_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]);

もっとここに

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

リンク2： http://www.androiddeft.com/tablayout-viewpager-Android/

0
Franklin CI