[英]Tab not taking full width on Tablet device [Using android.support.design.widget.TabLayout]
I have setup tabs as UPDATE 29/05/2015 this post.我将此帖子设置为UPDATE 29/05/2015选项卡。 Tabs take full width on my Nexus 4 mobile but on nexus 7 tablet it in center and not cover full screen width.
标签在我的 Nexus 4 手机上占满宽度,但在 nexus 7 平板电脑上它位于中心并且不覆盖整个屏幕宽度。
Nexus 7 screenshot连结 7 屏幕截图
Nexus 4 screenshot
连结 4 屏幕截图
A "simpler" answer borrowed from Kaizie would just be adding app:tabMaxWidth="0dp"
in your TabLayout
xml:从 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" />
I had the same problem and I checked the TabLayout style, and i found that its default style is Widget.Design.TabLayout
which has different implementations (normal, landscape and sw600dp).我遇到了同样的问题,我检查了 TabLayout 样式,我发现它的默认样式是
Widget.Design.TabLayout
,它有不同的实现(正常、横向和 sw600dp)。
The one we need is the one for tablets (sw600dp) which has the following implementation:我们需要的是平板电脑(sw600dp),它具有以下实现:
<style name="Widget.Design.TabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabGravity">center</item>
<item name="tabMode">fixed</item>
</style>
From this style we will use " tabGravity " (which possible values are "center" or "fill") using the "fill" value.从这个样式我们将使用“ tabGravity ”(可能的值是“center”或“fill”)和“fill”值。
But we need to go deeper, and then we see that this one extends from Base.Widget.Design.TabLayout
, which implementation is:但是我们需要更深入,然后我们看到这个是从
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>
So, from this style we will need to override " tabMaxWidth ".因此,从这种样式中,我们需要覆盖“ tabMaxWidth ”。 In my case I set it to
0dp
, so it has no limit.就我而言,我将其设置为
0dp
,因此它没有限制。
And my style looked like this:我的风格是这样的:
<style name="MyTabLayout" parent="Widget.Design.TabLayout">
<item name="tabGravity">fill</item>
<item name="tabMaxWidth">0dp</item>
</style>
And then the tab bar will fill the whole screen from side to side.然后标签栏将从一侧到另一侧填满整个屏幕。
Solution for scrollable: (TabLayout.MODE_SCROLLABLE), that is when ever you need more than 2 tabs (Dynamic tabs)可滚动解决方案:(TabLayout.MODE_SCROLLABLE),即当您需要超过 2 个标签时(动态标签)
Step 1 : style.xml第 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>
Step 2 : Your xml layout第 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" />
Step 3: In your Activity/Fragment where ever you have tabs.第 3 步:在您的 Activity/Fragment 中有标签的地方。
/**
* 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);
}
}
To force tabs to take up the full width (split into equal sizes), apply the following to the TabLayout
view:要强制选项卡占据整个宽度(分成相等的大小),请将以下内容应用于
TabLayout
视图:
TabLayout tabLayout = (TabLayout) findViewById(R.id.your_tab_layout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
This is helpful you must try这很有帮助你必须尝试
<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" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
work for me.为我工作。 This also have
xmlns:app="http://schemas.android.com/apk/res-auto"
这也有
xmlns:app="http://schemas.android.com/apk/res-auto"
Just did this and worked like a charm就这样做了,工作起来很有魅力
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMaxWidth="0dp"/>
For me the following code worked and was enough.对我来说,以下代码有效并且足够了。
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"/>
Solution for Scrollable (Kotlin) Scrollable (Kotlin) 的解决方案
In xml:在 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" />
In Kotlin:在科特林:
In my case if less than 3 tabs I allocate equal space.在我的情况下,如果少于 3 个选项卡,我会分配相等的空间。
Note: If condition is as per your requirement注意:如果条件符合您的要求
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
}
}
Check below code for solutions.检查以下代码以获取解决方案。
Below is layout code:下面是布局代码:
<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" />
Note, for dynamic tab count, don't forget to call setTabNumbers(tabcount).注意,对于动态标签计数,不要忘记调用 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;
}
}
Reference taken from https://medium.com/@elsenovraditya/set-tab-minimum-width-of-scrollable-tablayout-programmatically-8146d6101efe参考来自https://medium.com/@elsenovraditya/set-tab-minimum-width-of-scrollable-tablayout-programmatically-8146d6101efe
In my variant of this problem, I had 3 tabs of moderate size which weren't taking up full width on tablets.在这个问题的变体中,我有 3 个中等大小的标签,它们没有在平板电脑上占据全宽。 I didn't need the tabs to be scrollable on tablets, since tablets are big enough to display the tabs all together without any scrolling.
我不需要选项卡在平板电脑上可滚动,因为平板电脑足够大,无需滚动即可显示所有选项卡。 But I did need the tabs to be scrollable on phones, since phones are too small to display all the tabs together.
但我确实需要标签在手机上可滚动,因为手机太小而无法将所有标签显示在一起。
The best solution in my case was to add a res/layout-sw600dp/main_activity.xml
file, where the relevant TabLayout could have app:tabGravity="fill"
and app:tabMode="fixed"
.在我的情况下,最好的解决方案是添加一个
res/layout-sw600dp/main_activity.xml
文件,其中相关的 TabLayout 可以有app:tabGravity="fill"
和app:tabMode="fixed"
。 But in my regular res/layout/main_activity.xml
, I left out app:tabGravity="fill"
and app:tabMode="fixed"
, and had app:tabMode="scrollable"
instead.但是在我的常规
res/layout/main_activity.xml
,我省略了app:tabGravity="fill"
和app:tabMode="fixed"
,而是使用了app:tabMode="scrollable"
。
Please note that you also need to set请注意,您还需要设置
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"
to fill all space填满所有空间
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.