Tabs don't fit to screen with tabmode=scrollable, Even with a Custom Tab Layout

问题

I have made a custom TabLayout with a ViewPager and am using the TabLayout in scrollable mode:

I need it to be scrollable as the number of dates can vary to as many as 15-20:

<com.example.project.recommendedapp.CustomScrollableTabLayout
    android:id="@+id/tab_layout_movie"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    app:tabGravity="fill"
    app:tabMode="scrollable"
    app:tabTextAppearance="?android:textAppearanceMedium"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

The custom class i used as per another similar question: TabLayout not filling width when tabMode set to 'scrollable'

The custom tablayout class is:

package com.example.project.recommendedapp;

import android.content.Context;
import android.graphics.Point;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Display;
import android.view.WindowManager;

import java.lang.reflect.Field;

public class CustomScrollableTabLayout extends TabLayout {
    private Context mContext;

    Point size;

    public CustomScrollableTabLayout(Context context) {
        super(context);
        mContext=context;
        size = new Point();
    }

    public CustomScrollableTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext=context;
        size = new Point();
    }

    public CustomScrollableTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext=context;
        size = new Point();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        try {
            if (getTabCount() == 0) {
                return;
            }else {
                Display display = ((WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
                display.getSize(size);
                int width = size.x;

                Field field = TabLayout.class.getDeclaredField("mScrollableTabMinWidth");
                field.setAccessible(true);
                field.set(this, (width / getTabCount()));

                Log.d("FragmentCreate",String.valueOf(width / getTabCount()));
            }
        } catch (Exception e) {
            Log.e("FragmentCreate","Error while setting width",e);
        }
    }
}

回答1:

I looked all over for an answer to this exact problem. In my case I was dynamically adding and removing tabs, so I wanted it to fill the screen when there were only a few tabs, but start scrolling when there were too many rather than shrinking them or putting the titles on two lines. Using the following custom tab layout finally got it working for me. It was key to set the minimum width before calling super.onMeasure().

public class CustomTabLayout extends TabLayout {

    public CustomTabLayout(Context context) {
        super(context);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        ViewGroup tabLayout = (ViewGroup)getChildAt(0);
        int childCount = tabLayout.getChildCount();

        if( childCount != 0 ) { 
            DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
            int tabMinWidth = displayMetrics.widthPixels/childCount;

            for(int i = 0; i < childCount; ++i){
                tabLayout.getChildAt(i).setMinimumWidth(tabMinWidth);
            }
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

Set the tab mode to scrollable in the xml.

    <com.package.name.CustomTabLayout
        android:id="@+id/my_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable">

回答2:

Here is my solution.

public class MyTabLayout extends TabLayout {    
    public MyTabLayout(Context context) {
        super(context);
    }

    public MyTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        ViewGroup tabLayout = (ViewGroup)getChildAt(0);

        int childCount = tabLayout.getChildCount();

        int widths[] = new int[childCount+1];

        for(int i = 0; i < childCount; i++){
            widths[i] = tabLayout.getChildAt(i).getMeasuredWidth();
            widths[childCount] += widths[i];
        }

        int measuredWidth = getMeasuredWidth();
        for(int i = 0; i < childCount; i++){
            tabLayout.getChildAt(i).setMinimumWidth(measuredWidth*widths[i]/widths[childCount]);
        }

    }

}

回答3:

My solution is slightly different, since I tried the one above and it didn't work on some devices. I've noticed that if all tabs are visible on the screen and if we set tabMode to fixed, TabLayout fills its given width. When we use scrollable, TabLayout acts like its tabGravity is set to center.

So, I calculate the sum of widths of all tabs in TabLayout and if it is lower than measured width I set its tabMode to MODE_FIXED, otherwise to MODE_SCROLLABLE:

public class CustomTabLayout extends TabLayout {

    private static final String TAG = CustomTabLayout.class.getSimpleName();

    public CustomTabLayout(Context context) {
        super(context);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (getTabCount() == 0)
            return;
        try {
            ViewGroup tabLayout = (ViewGroup)getChildAt(0);
            int widthOfAllTabs = 0;
            for (int i = 0; i < tabLayout.getChildCount(); i++) {
                widthOfAllTabs += tabLayout.getChildAt(i).getMeasuredWidth();
            }
            setTabMode(widthOfAllTabs <= getMeasuredWidth() ? MODE_FIXED : MODE_SCROLLABLE);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

来源：https://stackoverflow.com/questions/39002684/tabs-dont-fit-to-screen-with-tabmode-scrollable-even-with-a-custom-tab-layout