SlidingTabLayout+ViewPagerAdapter

效果图：

首先介绍一下使用源码在后面：

找一个Activity或者Fragment

@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,                         Bundle savedInstanceState) {    // Inflate the layout for this fragment    View inflate = inflater.inflate(R.layout.fragment_system_maintainace, container, false);    pager = (ViewPager) inflate.findViewById(R.id.viewpager);    slidingTabLayout = (SlidingTabLayout) inflate.findViewById(R.id.sliding_tabs);    String titles[] = new String[]{getResources().getString(R.string.setupsysparameter),            getResources().getString(R.string.setuphardwareparameter), getResources().getString(R.string.setupalgorithmparameter)};    pager.setAdapter(new ViewPagerAdapter(getFragmentManager(), titles));    slidingTabLayout.setViewPager(pager);    slidingTabLayout.setSelectedIndicatorColors(Color.RED);    slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {        @Override        public int getIndicatorColor(int position) {            return Color.BLACK;        }    });    pager.setCurrentItem(position, true);    return inflate;}public void ChangePageViewByPosition(int position){    pager.setCurrentItem(position,true);}

ViewPageAdapter:

public class ViewPagerAdapter extends FragmentPagerAdapter {    final int PAGE_COUNT =3;    private String titles[] ;    private SetupSysParameterFragment setupSysParameterFragment;    private SetupHardwareParameterFragment setupHardwareParameterFragment;    private SetupAlgorithmparameterFragment setupAlgorithmparameterFragment;    public ViewPagerAdapter(FragmentManager fm, String[] titles2) {        super(fm);        titles=titles2;    }    @Override    public Fragment getItem(int position) {        switch (position) {            // Open FragmentTab1.java            case 0:                if(null==setupSysParameterFragment)                    setupSysParameterFragment=new SetupSysParameterFragment();                return setupSysParameterFragment;            case 1:                if(null==setupHardwareParameterFragment)                    setupHardwareParameterFragment = new SetupHardwareParameterFragment();                return setupHardwareParameterFragment;            case 2:                if(null==setupAlgorithmparameterFragment)                    setupAlgorithmparameterFragment=new SetupAlgorithmparameterFragment();                return setupAlgorithmparameterFragment;        }        return null;    }    public CharSequence getPageTitle(int position) {        return titles[position];    }    @Override    public int getCount() {        return PAGE_COUNT;    }}

SlidingTabLayout

public class SlidingTabLayout extends HorizontalScrollView {    /**     * Allows complete control over the colors drawn in the tab layout. Set with     * {@link #setCustomTabColorizer(com.tekinarslan.material.sample.SlidingTabLayout.TabColorizer)}.     */    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 = 18;    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;    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 com.tekinarslan.material.sample.SlidingTabLayout.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 com.tekinarslan.material.sample.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, int textViewId) {        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 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);                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;            }            tabTitleView.setText(adapter.getPageTitle(i));            tabTitleView.setTextColor(Color.BLACK);//--------------------黑字------            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) {            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 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

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 = 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);            }            mSelectedIndicatorPaint.setColor(color);            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 final int getIndicatorColor(int position) {            return mIndicatorColors[position % mIndicatorColors.length];        }        void setIndicatorColors(int... colors) {            mIndicatorColors = colors;        }    }}