Tab在平板设备上不采用全宽度[使用android.support.design.widget.TabLayout]

我设置选项卡为更新29/05/2015 这 post。在我的Nexus 4手机上，标签是全宽的，但在Nexus 7平板电脑上，它位于中间，没有覆盖全屏宽度。

Nexus 7截图 Nexus7 Nexus 4截图 Nexus 4

103146 次浏览
小开

我有同样的问题，我检查了TabLayout风格，我发现它的默认风格是Widget.Design.TabLayout，它有不同的实现(正常，横向和sw600dp)。

我们需要的是一个平板电脑(sw600dp)，它有以下实现:

<style name="Widget.Design.TabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabGravity">center</item>
<item name="tabMode">fixed</item>
</style>

在这个样式中，我们将使用"fill"值来使用"tabGravity"(可能的值是"center"或"fill")。

但我们需要更深入，然后我们看到这个扩展自Base.Widget.Design.TabLayout，它的实现是:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
因此，在这个样式中，我们需要重写“tabMaxWidth”。 在我的例子中，我将它设置为0dp，因此它没有限制

我的风格是这样的:

<style name="MyTabLayout" parent="Widget.Design.TabLayout">
<item name="tabGravity">fill</item>
<item name="tabMaxWidth">0dp</item>
</style>

然后标签栏会从一边到另一边填满整个屏幕。

小开

要强制制表符占用全宽度(分割为相等大小)，将以下命令应用到TabLayout视图:

TabLayout tabLayout = (TabLayout) findViewById(R.id.your_tab_layout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
小开
最佳答案

一个“更简单”的答案借自Kaizie只是在你的TabLayout xml中添加app:tabMaxWidth="0dp":

<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
小开

对我来说，下面的代码可以工作并且足够了。

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"/>
小开 
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />

为我工作。这也有xmlns:app="http://schemas.android.com/apk/res-auto"

小开

解决方案为可滚动:(TabLayout.MODE_SCROLLABLE)，这是当你需要超过2个标签(动态标签)

步骤1:style.xml

<style name="tabCustomStyle" parent="Widget.Design.TabLayout">
<item name="tabGravity">fill</item>
<item name="tabMaxWidth">0dp</item>
<item name="tabIndicatorColor">#FFFEEFC4</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
<item name="tabSelectedTextColor">#FFFEEFC4</item>
</style>


<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">@dimen/tab_text_size</item>
<item name="android:textAppearance">@style/TextAppearance.roboto_medium</item>
<item name="textAllCaps">true</item>
</style>
<style name="TextAppearance.roboto_medium" parent="android:TextAppearance">
<item name="android:fontFamily">sans-serif-medium</item>
</style>

步骤2:xml布局

<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
style="@style/tabCustomStyle"
android:layout_width="match_parent"
android:layout_height="@dimen/tab_strip_height"
android:background="@color/your_color"
app:tabMode="scrollable"
app:tabTextColor="@color/your_color" />

步骤3:在你的活动/片段中，只要你有标签。

/**
* To allow equal width for each tab, while (TabLayout.MODE_SCROLLABLE)
*/
private void allotEachTabWithEqualWidth() {


ViewGroup slidingTabStrip = (ViewGroup) mTabLayout.getChildAt(0);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
View tab = slidingTabStrip.getChildAt(i);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tab.getLayoutParams();
layoutParams.weight = 1;
tab.setLayoutParams(layoutParams);
}


}
小开

这是有帮助的，你一定要试试

 <android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/orange" />
小开
为什么这么忙乱的工作? 只要把app:tabMode="scrollable"放在你的XML TabLayout中。 那它。< / p >

enter image description here

小开

在我的这个问题的变体中，我有3个中等大小的标签，它们没有占据平板电脑的全部宽度。我不需要在平板电脑上滚动标签，因为平板电脑足够大，可以在不滚动的情况下显示所有标签。但我确实需要这些标签可以在手机上滚动，因为手机太小了，无法同时显示所有的标签。

在我的情况下，最好的解决方案是添加一个res/layout-sw600dp/main_activity.xml文件，其中相关的TabLayout可以有app:tabGravity="fill"和app:tabMode="fixed"。但是在常规的res/layout/main_activity.xml中，我省略了app:tabGravity="fill"和app:tabMode="fixed"，而使用了app:tabMode="scrollable"。

小开

检查下面的解决方案代码。

下面是布局代码:

<com.yourpackage.CustomTabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/off_white"
app:tabIndicatorColor="@color/primaryColor"
app:tabIndicatorHeight="3dp"
app:tabMode="scrollable"
app:tabPaddingEnd="0dp"
app:tabPaddingStart="0dp" />

注意，对于动态标签计数，不要忘记调用setTabNumbers(tabcount)。

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.util.
import java.lang.reflect.Field;


public class CustomTabLayout extends TabLayout
{
private static final int WIDTH_INDEX = 0;
private int DIVIDER_FACTOR = 3;
private static final String SCROLLABLE_TAB_MIN_WIDTH = "mScrollableTabMinWidth";


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


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


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


public void setTabNumbers(int num)
{
this.DIVIDER_FACTOR = num;
initTabMinWidth();
}


private void initTabMinWidth()
{
int[] wh = getScreenSize(getContext());
int tabMinWidth = wh[WIDTH_INDEX] / DIVIDER_FACTOR;


Log.v("CUSTOM TAB LAYOUT", "SCREEN WIDTH = " + wh[WIDTH_INDEX] + " && tabTotalWidth = " + (tabMinWidth*DIVIDER_FACTOR) + " && TotalTabs = " + DIVIDER_FACTOR);


Field field;
try {
field = TabLayout.class.getDeclaredField(SCROLLABLE_TAB_MIN_WIDTH);
field.setAccessible(true);
field.set(this, tabMinWidth);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}


private static final int WIDTH_INDEX = 0;
private static final int HEIGHT_INDEX = 1;


public static int[] getScreenSize(Context context) {
int[] widthHeight = new int[2];
widthHeight[WIDTH_INDEX] = 0;
widthHeight[HEIGHT_INDEX] = 0;


try {
WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
Display display = windowManager.getDefaultDisplay();


Point size = new Point();
display.getSize(size);
widthHeight[WIDTH_INDEX] = size.x;
widthHeight[HEIGHT_INDEX] = size.y;


if (!isScreenSizeRetrieved(widthHeight))
{
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);
widthHeight[0] = metrics.widthPixels;
widthHeight[1] = metrics.heightPixels;
}


// Last defense. Use deprecated API that was introduced in lower than API 13
if (!isScreenSizeRetrieved(widthHeight)) {
widthHeight[0] = display.getWidth(); // deprecated
widthHeight[1] = display.getHeight(); // deprecated
}
} catch (Exception e) {
e.printStackTrace();
}


return widthHeight;
}


private static boolean isScreenSizeRetrieved(int[] widthHeight) {
return widthHeight[WIDTH_INDEX] != 0 && widthHeight[HEIGHT_INDEX] != 0;
}
}

引用自https://medium.com/@elsenovraditya/set-tab-minimum-width-of-scrollable-tablayout-programmatically-8146d6101efe

小开

可滚动解决方案(Kotlin)

<强劲> xml: < / >强

     <com.google.android.material.tabs.TabLayout
android:id="@+id/home_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabMode="scrollable"
android:fillViewport="true"
app:tabGravity="fill" />

在芬兰湾的科特林<强>:< / >强

在我的情况下，如果少于3个制表符，我分配相等的空间。

注:如有条件，请按您的要求

        if(list.size <= 3){
allotEachTabWithEqualWidth(your_tab_layout)
}


fun allotEachTabWithEqualWidth(tabLayout: TabLayout) {
tabLayout.tabMode=  TabLayout.MODE_SCROLLABLE
val slidingTabStrip = tabLayout.getChildAt(0) as ViewGroup
for (i in 0 until tabLayout.getTabCount()) {
val tab = slidingTabStrip.getChildAt(i)
val layoutParams = tab.layoutParams as LinearLayout.LayoutParams
layoutParams.weight = 1f
tab.layoutParams = layoutParams
}


}
小开

请注意，您还需要设置

  app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"

填满所有空间

小开

就这么做了，效果很好

<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMaxWidth="0dp"/>

提交答案