Question

我使用ViewPager制作了自定义TabLayout，并在可滚动模式下使用TabLayout：

我需要它可以滚动，因为日期的数量可以变化到多达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"/>

我根据另一个类似问题使用的自定义类： TabLayout not filling width when tabMode set to 'scrollable'

自定义tablayout类是：

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);
        }
    }
}

Answer 1

我全神贯注地寻找这个确切问题的答案。在我的情况下，我是动态添加和删除标签，所以我希望它只有几个标签填充屏幕，但是当有太多而不是缩小它们或将标题放在两行时开始滚动。使用以下自定义选项卡布局终于让它适合我。在调用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); } }

将标签模式设置为xml中的可滚动。

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

Answer 2

这是我的解决方案。

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]);
        }

    }

}

Answer 3

我的解决方案略有不同，因为我尝试了上面的解决方案，但它在某些设备上无效。我注意到，如果屏幕上显示所有标签，并且我们将tabMode设置为fixed，则TabLayout会填充其给定的宽度。当我们使用scrollable时，TabLayout的行为就像其tabGravity设置为center一样。

因此，我计算TabLayout中所有标签的宽度总和，如果它低于测量宽度，我将其tabMode设置为MODE_FIXED，否则设置为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();
        }
    }
}

Answer 4

对于那些像我一样从谷歌登陆这里的人来说，这是我的 2021 Kotlin 解决方案。它实现了我无法从其他答案中做到的以下内容：

如果标签不多，它们会展开以填满整个宽度。
如果有很多选项卡，它们是可滚动的，所以它们不会被压扁。
即使 tabLayout 不是屏幕的全宽也能正常工作。

为了实现这一点，我创建了一个 TabLayout 的子类来覆盖 onMeasure

class ScalableTabLayout : TabLayout {
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val tabLayout = getChildAt(0) as ViewGroup
        val childCount = tabLayout.childCount
        if (childCount != 0) {
            val widthPixels = MeasureSpec.getSize(widthMeasureSpec)
            val tabMinWidth = widthPixels / childCount
            var remainderPixels = widthPixels % childCount
            tabLayout.forEachChild {
                if (remainderPixels > 0) {
                    it.minimumWidth = tabMinWidth + 1
                    remainderPixels--
                } else {
                    it.minimumWidth = tabMinWidth
                }
            }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }
}

然后在我的布局文件中使用它：

<com.package.name.ScalableTabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMaxWidth="0dp"
    app:tabMode="scrollable" />

同时需要 tabMaxWidth="0dp" 和 tabMode="scrollable"

使用tabmode = scrollable，即使使用自定义选项卡布局，选项卡也不适合屏幕

4 个答案: