2015-07-07 2 views
2

Мне нужно отобразить заголовок с соответствующим значком в заголовке заголовка. как этот образ. но только для отображения названия без значка.Как добавить заголовок страницы и значок в 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

ответ

10

Я получил решение от 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 
    } 

Спасибо, постоялец.

+1

GetResources() получить можно назвать , –

+1

Также смотрите http://stackoverflow.com/a/32780701/630833, если он не работает из-за ограничений в тексте. – jayeffkay

+0

Как это сделать, я создал селектор с 2 изображениями на вкладку. когда я выбираю вкладку, мой цвет изображения будет белым с выбранным состоянием в селекторе, иначе изображение по умолчанию имеет черный цвет. Я попробовал это в myDrawable. но его не сработало. – Dhiren

9

Если вы используете для поддержки проектов библиотеки TabLayout, вы можете просто позвонить:

tabLayout.getTabAt(i).setIcon(); 
+0

Этот ответ хорошо справляется с задачей и экономит время. Благодарю. – Choxmi

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