Reprint please indicate the source: www.weyye.me/detail/colo… This post is from: [Wey Ye’s blog]

preface

TabLayout is one of the new controls in the Android Support Design library. It can be used with ViewPager to achieve a good effect.

Demand for 1

Sometimes we encounter this need, such as the connotation of the joke (weak ask: do you have a joke friend?). .





As above, there are many tabs and the text content is not fixed. When using TabLayout, the following situation will occur





TabPaddingStart and tabPaddingEnd need to be set, but after the layout is filled in, it is not used.

Demand for 2

A kind of toutiao indicator that slides across the ViewPager page and gradually changes the color of the text. See TodayNews for details

ColorTrackTabLayout

Let’s take a look at the effect





The source code

Github.com/yewei02538/…

use

Because you inherit from TabLayout, the usage is identical to that of TabLayout

        / / hide Indicator
        mTab.setSelectedTabIndicatorHeight(0);
        // Set the left and right inner margins
        mTab.setTabPaddingLeftAndRight(10.10);
        mTab.setupWithViewPager(mViewPager);Copy the code

The principle of

ColorTrackLayout basically inherits TabLayout with some extensions. Slide color gradient core don’t understand you can see hongyang Daishen Android custom controls play font color to create cool ViewPager indicators.

ViewPager page listeners are added to TabLayout when we call setupWithViewPager.

    private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
            boolean implicitSetup) {...if(viewPager ! =null) {
            mViewPager = viewPager;

            // Add our custom OnPageChangeListener to the ViewPager
            if (mPageChangeListener == null) {
                // Add slider listener
                mPageChangeListener = new TabLayoutOnPageChangeListener(this);
            }
            mPageChangeListener.reset();
            viewPager.addOnPageChangeListener(mPageChangeListener);

            // Now we'll add a tab selected listener to set ViewPager's current item
            mCurrentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
            addOnTabSelectedListener(mCurrentVpSelectedListener);

            final PagerAdapter adapter = viewPager.getAdapter();
            if(adapter ! =null) {
                // Now we'll populate ourselves from the pager adapter, adding an observer if
                // autoRefresh is enabled
                setPagerAdapter(adapter, autoRefresh);
            }

            // Add a listener so that we're notified of any adapter changes
            if (mAdapterChangeListener == null) {
                mAdapterChangeListener = new AdapterChangeListener();
            }
            mAdapterChangeListener.setAutoRefresh(autoRefresh);
            viewPager.addOnAdapterChangeListener(mAdapterChangeListener);

            // Now update the scroll position to match the ViewPager's current item
            setScrollPosition(viewPager.getCurrentItem(), 0f.true);
        } else {
            // We've been given a null ViewPager so we need to clear out the internal state,
            // listeners and observers
            mViewPager = null;
            setPagerAdapter(null.false); }... }Copy the code

Created mPageChangeListener and add the listening mPageChangeListener = new TabLayoutOnPageChangeListener (this); So we’re going to have to rewrite setupWithViewPager to get rid of the listener and replace it with our own listener

    @Override
    public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) {
        super.setupWithViewPager(viewPager, autoRefresh);
        try {
            // Find the mPageChangeListener by reflection
            Field field = TabLayout.class.getDeclaredField("mPageChangeListener");
            field.setAccessible(true);
            TabLayoutOnPageChangeListener listener = (TabLayoutOnPageChangeListener) field.get(this);
            if(listener ! =null) {
                // Delete the built-in listener
                viewPager.removeOnPageChangeListener(listener);
                mPageChangeListenter = new ColorTrackTabLayoutOnPageChangeListener(this); mPageChangeListenter.reset(); viewPager.addOnPageChangeListener(mPageChangeListenter); }}catch(Exception e) { e.printStackTrace(); }}Copy the code

One more thing to do is to replace each Tab layout with ours. How do I replace that? Rewrite addTab and change it to our layout when we add it

    @Override
    public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
        ColorTrackView colorTrackView = new ColorTrackView(getContext());
        colorTrackView.setProgress(setSelected ? 1 : 0);
        colorTrackView.setText(tab.getText() + "");
        colorTrackView.setTextSize(mTabTextSize);
        colorTrackView.setTag(position);
        colorTrackView.setTextChangeColor(mTabSelectedTextColor);
        colorTrackView.setTextOriginColor(mTabTextColor);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        colorTrackView.setLayoutParams(layoutParams);
        tab.setCustomView(colorTrackView);

        super.addTab(tab, position, setSelected);
        if (position == 0) {
            // The first one is selected by default
            setSelectedView(position);
        }

        setTabWidth(position, colorTrackView);
    }Copy the code

The key is to set up our layout using the setCustomView method.

The last

If you like, please give a star

thanks

ColorTrackView