Как я могу создать PagerSlidingTabStrip с изображениями в Android?

Question

Я использую PagerSlidingTabStrip в myapp. В этих заголовках настройки прекрасны, но изображения не задают вкладку. Я искал много в google, но не получил правильный результат. Но это очень важно для меня.

Пожалуйста, смотрите скриншот ниже

Advance благодаря всем.

Answer 1

Ну, это было не сложно с кодом SlidingTabLayout Я прокомментировал несколько строк кода. Я думаю, код очень понятен.

Ну, вы можете настроить его в соответствии с вашими потребностями.

import android.content.Context; 
import android.graphics.Typeface; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.util.AttributeSet; 
import android.util.SparseArray; 
import android.util.TypedValue; 
import android.view.Gravity; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.HorizontalScrollView; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.TextView; 

    public interface TabColorizer { 

     /** 
     * @return return the color of the indicator used when {@code position} is selected. 
     */ 
     int getIndicatorColor(int position); 

    } 

    private static final int TITLE_OFFSET_DIPS = 24; 
    private static final int TAB_VIEW_PADDING_DIPS = 16; 
    private static final int TAB_VIEW_TEXT_SIZE_SP = 12; 

    private int mTitleOffset; 

    private int mTabViewLayoutId; 
    private int mTabViewTextViewId; 
    private boolean mDistributeEvenly; 

    private ViewPager mViewPager; 
    private SparseArray<String> mContentDescriptions = new SparseArray<String>(); 
    private ViewPager.OnPageChangeListener mViewPagerPageChangeListener; 

    private final SlidingTabStrip mTabStrip; 
    int prepage; 
    int currpage; 

    public SlidingTabLayout(Context context) { 
     this(context, null); 
    } 

    public SlidingTabLayout(Context context, AttributeSet attrs) { 
     this(context, attrs, 0); 
    } 

    public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 

     // Disable the Scroll Bar 
     setHorizontalScrollBarEnabled(false); 
     // Make sure that the Tab Strips fills this View 
     setFillViewport(true); 

     mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density); 

     mTabStrip = new SlidingTabStrip(context); 
     addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 
    } 

    /** 
    * Set the custom {@link TabColorizer} to be used. 
    * 
    * If you only require simple custmisation then you can use 
    * {@link #setSelectedIndicatorColors(int...)} to achieve 
    * similar effects. 
    */ 
    public void setCustomTabColorizer(TabColorizer tabColorizer) { 
     mTabStrip.setCustomTabColorizer(tabColorizer); 
    } 

    public void setDistributeEvenly(boolean distributeEvenly) { 
     mDistributeEvenly = distributeEvenly; 
    } 

    /** 
    * Sets the colors to be used for indicating the selected tab. These colors are treated as a 
    * circular array. Providing one color will mean that all tabs are indicated with the same color. 
    */ 
    public void setSelectedIndicatorColors(int... colors) { 
     mTabStrip.setSelectedIndicatorColors(colors); 
    } 

    /** 
    * Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are 
    * required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so 
    * that the layout can update it's scroll position correctly. 
    * 
    * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener) 
    */ 
    public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) { 
     mViewPagerPageChangeListener = listener; 
    } 

    /** 
    * Set the custom layout to be inflated for the tab views. 
    * 
    * @param layoutResId Layout id to be inflated 
    * @param textViewId id of the {@link TextView} in the inflated view 
    */ 
    public void setCustomTabView(int layoutResId) { 
     mTabViewLayoutId = layoutResId; 
     // mTabViewTextViewId = textViewId; 
    } 

    /** 
    * Sets the associated view pager. Note that the assumption here is that the pager content 
    * (number of tabs and tab titles) does not change after this call has been made. 
    */ 
    public void setViewPager(ViewPager viewPager) { 
     mTabStrip.removeAllViews(); 

     mViewPager = viewPager; 
     if (viewPager != null) { 
      viewPager.setOnPageChangeListener(new InternalViewPagerListener()); 
      populateTabStrip(); 
     } 
    } 

    /** 
    * Create a default view to be used for tabs. This is called if a custom tab view is not set via 
    * {@link #setCustomTabView(int, int)}. 
    */ 
    protected TextView createDefaultTabView(Context context) { 
     TextView textView = new TextView(context); 
     textView.setGravity(Gravity.CENTER); 
     textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP); 
     textView.setTypeface(Typeface.DEFAULT_BOLD); 
     textView.setLayoutParams(new LinearLayout.LayoutParams(
       ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)); 

     TypedValue outValue = new TypedValue(); 
     getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, 
       outValue, true); 
     textView.setBackgroundResource(outValue.resourceId); 
     textView.setAllCaps(true); 

     int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density); 
     textView.setPadding(padding, padding, padding, padding); 

     return textView; 
    } 

    private void populateTabStrip() { 
     final PagerAdapter adapter = mViewPager.getAdapter(); 
     final View.OnClickListener tabClickListener = new TabClickListener(); 

     for (int i = 0; i < adapter.getCount(); i++) { 
      View tabView = null; 
      TextView tabTitleView = null; 

//   if (mTabViewLayoutId != 0) { 
       // If there is a custom tab view layout id set, try and inflate it 
       tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, 
         false); 
       ImageView iv = (ImageView) tabView.findViewById(R.id.imageView1); 
//    tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId); 
//   } 
// 
//   if (tabView == null) { 
//    tabView = createDefaultTabView(getContext()); 
//   } 
// 
//   if (tabTitleView == null && TextView.class.isInstance(tabView)) { 
//    tabTitleView = (TextView) tabView; 
//   } 

      if (mDistributeEvenly) { 
       LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams(); 
       lp.width = 0; 
       lp.weight = 1; 
      } 
      iv.setImageResource(R.drawable.ic_launcher); 
//   tabT itleView.setText(adapter.getPageTitle(i)); 
      tabView.setOnClickListener(tabClickListener); 
      String desc = mContentDescriptions.get(i, null); 
      if (desc != null) { 
       tabView.setContentDescription(desc); 
      } 

      mTabStrip.addView(tabView); 
      if (i == mViewPager.getCurrentItem()) { 
       tabView.setSelected(true); 
      } 
     } 
    } 

    public void setContentDescription(int i, String desc) { 
     mContentDescriptions.put(i, desc); 
    } 

    @Override 
    protected void onAttachedToWindow() { 
     super.onAttachedToWindow(); 

     if (mViewPager != null) { 
      scrollToTab(mViewPager.getCurrentItem(), 0); 
     } 
    } 

    private void scrollToTab(int tabIndex, int positionOffset) { 
     final int tabStripChildCount = mTabStrip.getChildCount(); 
     if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) { 
      return; 
     } 

     View selectedChild = mTabStrip.getChildAt(tabIndex); 
     if (selectedChild != null) { 
      int targetScrollX = selectedChild.getLeft() + positionOffset; 

      if (tabIndex > 0 || positionOffset > 0) { 
       // If we're not at the first child and are mid-scroll, make sure we obey the offset 
       targetScrollX -= mTitleOffset; 
      } 

      scrollTo(targetScrollX, 0); 
     } 
    } 

    private class InternalViewPagerListener implements ViewPager.OnPageChangeListener { 
     private int mScrollState; 

     @Override 
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
      int tabStripChildCount = mTabStrip.getChildCount(); 
      if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) { 
       return; 
      } 

      mTabStrip.onViewPagerPageChanged(position, positionOffset); 

      View selectedTitle = mTabStrip.getChildAt(position); 
      int extraOffset = (selectedTitle != null) 
        ? (int) (positionOffset * selectedTitle.getWidth()) 
        : 0; 
      scrollToTab(position, extraOffset); 

      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageScrolled(position, positionOffset, 
         positionOffsetPixels); 
      } 
     } 

     @Override 
     public void onPageScrollStateChanged(int state) { 
      mScrollState = state; 

      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageScrollStateChanged(state); 
      } 
     } 

     @Override 
     public void onPageSelected(int position) { 
      // TextView tab = (TextView) mTabStrip.getChildAt(position); 
      // tab.setTextColor(Color.BLACK); 
      if (mScrollState == ViewPager.SCROLL_STATE_IDLE) { 
       mTabStrip.onViewPagerPageChanged(position, 0f); 
       scrollToTab(position, 0); 
      } 
      for (int i = 0; i < mTabStrip.getChildCount(); i++) { 
       mTabStrip.getChildAt(i).setSelected(position == i); 
      } 
      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageSelected(position); 
      } 
     } 

    } 

    private class TabClickListener implements View.OnClickListener { 
     @Override 
     public void onClick(View v) { 
      for (int i = 0; i < mTabStrip.getChildCount(); i++) { 
       if (v == mTabStrip.getChildAt(i)) { 
        mViewPager.setCurrentItem(i); 
        return; 
       } 
      } 
     } 
    } 

} 

SlidingTabStrip.java

import android.R; 
import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.util.AttributeSet; 
import android.util.TypedValue; 
import android.view.View; 
import android.widget.LinearLayout; 

class SlidingTabStrip extends LinearLayout { 

    private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0; 
    private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26; 
    private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 3; 
    private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5; 

    private final int mBottomBorderThickness; 
    private final Paint mBottomBorderPaint; 

    private final int mSelectedIndicatorThickness; 
    private final Paint mSelectedIndicatorPaint; 

    private final int mDefaultBottomBorderColor; 

    private int mSelectedPosition; 
    private float mSelectionOffset; 

    private SlidingTabLayout.TabColorizer mCustomTabColorizer; 
    private final SimpleTabColorizer mDefaultTabColorizer; 

    SlidingTabStrip(Context context) { 
     this(context, null); 
    } 

    SlidingTabStrip(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     setWillNotDraw(false); 

     final float density = getResources().getDisplayMetrics().density; 

     TypedValue outValue = new TypedValue(); 
     context.getTheme().resolveAttribute(R.attr.colorForeground, outValue, true); 
     final int themeForegroundColor = outValue.data; 

     mDefaultBottomBorderColor = Color.YELLOW; 
     //setColorAlpha(themeForegroundColor, 
       // DEFAULT_BOTTOM_BORDER_COLOR_ALPHA); 

     mDefaultTabColorizer = new SimpleTabColorizer(); 
     mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR); 

     mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density); 
     mBottomBorderPaint = new Paint(); 
     mBottomBorderPaint.setColor(mDefaultBottomBorderColor); 

     mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density); 
     mSelectedIndicatorPaint = new Paint(); 
    } 

    void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) { 
     mCustomTabColorizer = customTabColorizer; 
     invalidate(); 
    } 

    void setSelectedIndicatorColors(int... colors) { 
     // Make sure that the custom colorizer is removed 
     mCustomTabColorizer = null; 
     mDefaultTabColorizer.setIndicatorColors(colors); 
     invalidate(); 
    } 

    void onViewPagerPageChanged(int position, float positionOffset) { 
     mSelectedPosition = position; 
     mSelectionOffset = positionOffset; 
     invalidate(); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     final int height = getHeight(); 
     final int childCount = getChildCount(); 
     final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null 
       ? mCustomTabColorizer 
       : mDefaultTabColorizer; 

     // Thick colored underline below the current selection 
     if (childCount > 0) { 
      View selectedTitle = getChildAt(mSelectedPosition); 
      int left = selectedTitle.getLeft(); 
      int right = selectedTitle.getRight(); 
      int color = tabColorizer.getIndicatorColor(mSelectedPosition); 

      if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) { 
       int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1); 
       if (color != nextColor) { 
        color = blendColors(nextColor, color, mSelectionOffset); 
       } 

       // Draw the selection partway between the tabs 
       View nextTitle = getChildAt(mSelectedPosition + 1); 
       left = (int) (mSelectionOffset * nextTitle.getLeft() + 
         (1.0f - mSelectionOffset) * left); 
       right = (int) (mSelectionOffset * nextTitle.getRight() + 
         (1.0f - mSelectionOffset) * right); 
      } 


      canvas.drawRect(left, height - mSelectedIndicatorThickness, right, 
        height, mSelectedIndicatorPaint); 
     } 

     // Thin underline along the entire bottom edge 
     canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint); 
    } 

    /** 
    * Set the alpha value of the {@code color} to be the given {@code alpha} value. 
    */ 
    private static int setColorAlpha(int color, byte alpha) { 
     return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color)); 
    } 

    /** 
    * Blend {@code color1} and {@code color2} using the given ratio. 
    * 
    * @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend, 
    *    0.0 will return {@code color2}. 
    */ 
    private static int blendColors(int color1, int color2, float ratio) { 
     final float inverseRation = 1f - ratio; 
     float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation); 
     float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation); 
     float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation); 
     return Color.rgb((int) r, (int) g, (int) b); 
    } 

    private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer { 
     private int[] mIndicatorColors; 



     @Override 
     public int getIndicatorColor(int position) { 
      return mIndicatorColors[position % mIndicatorColors.length]; 
     } 

     void setIndicatorColors(int... colors) { 
      mIndicatorColors = colors; 
     } 
    } 
} 

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.example.customslidingtablayout.MainActivity" > 

    <com.example.customslidingtablayout.SlidingTabLayout 

       android:layout_alignParentTop="true" 
       android:id="@+id/sliding_tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"        
       android:background="@color/red" /> 

    <android.support.v4.view.ViewPager 
        android:layout_below="@id/sliding_tabs" 
        android:id="@+id/viewpager" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:background="@android:color/white" /> 

</RelativeLayout> 

tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 

    <ImageView 
     android:id="@+id/imageView1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:layout_centerVertical="true" 
     android:src="@drawable/abc_btn_switch_to_on_mtrl_00012" /> 

</RelativeLayout> 

В деятельности

ViewPager mViewPager; 
FragmentAdapter mAdapter; 
SlidingTabLayout mSlidingTabLayout; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    mViewPager = (ViewPager) findViewById(R.id.viewpager); 
    mAdapter = new FragmentAdapter(getFragmentManager()); 
    mViewPager.setAdapter(mAdapter); 

    mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs); 

    mSlidingTabLayout.setCustomTabView(R.layout.tab_indicator); 
    mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.black)); 
    mSlidingTabLayout.setDistributeEvenly(true); 
    mSlidingTabLayout.setViewPager(mViewPager); 

} 

Answer 2

Я также был заинтересован делать так же, как ваш, наконец, я сделал это для вас.

Импортируйте демоверсию «SlidingTabsBasic» из файла android-sdk или загрузите его из образцов Google Android с Here.

1.Create custom_tab.xml только с TextView 2.In 'SlidingTabsBasicFragment.class' сделать ниже изменения:

-add этот код в onViewCreated()

mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs); 
mSlidingTabLayout.setCustomTabView(R.layout.custom_tab, 0); 
mSlidingTabLayout.setViewPager(mViewPager); 

-в классе SamplePagerAdapter замените этот код функции

public CharSequence getPageTitle(int position) 
{ 
    //return "Item " + (position + 1); 
    Drawable image = getActivity().getResources().getDrawable(imageResId[position]); 
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 
    SpannableString sb = new SpannableString(" "); 
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
    return sb; 
} 

Если вы сделали это правильно, вы получите что-то вроде этого:

Надеюсь, это поможет!

Answer 3

Я когда-либо просил проект по этой теме. Вот мой project, взгляните, может быть, вы будете вдохновлены.