选项卡没有采取全屏的平板设备
我有安装标签作为UPDATE 29/05/2015 这个职位。 Tabs在我的Nexus 4手机上占有全部的宽度,但在nexus 7平板电脑上却没有覆盖全屏宽度。
Nexus 7截图 Nexus 4截图
从Kaizie借来的 “更简单”的答案就是在你的TabLayout
添加app:tabMaxWidth="0dp"
xml:
<android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabMode="fixed" />
我有同样的问题,我检查了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>
从这种风格,我们将使用“ 填充 ”值使用“ tabGravity ”(可能的值是“中心”或“填充”)。
但是我们需要更深入的了解,然后我们看到这个扩展了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>
然后标签栏将从一边到另一边充满整个屏幕。
可滚动的解决scheme:(TabLayout.MODE_SCROLLABLE),即当你需要多于2个选项卡(dynamic选项卡)
第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); } }
要强制选项卡占用全部宽度(拆分为相同的大小),请将以下内容应用于TabLayout
视图:
TabLayout tabLayout = (TabLayout) findViewById(R.id.your_tab_layout); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); tabLayout.setTabMode(TabLayout.MODE_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”;
这是有用的,你必须尝试
<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" />
检查下面的代码解决scheme。
以下是布局代码:
<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" />
请注意,对于dynamic标签计数,不要忘记调用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; } }
为什么所有忙碌的工作? 只需在您的TabLayout中添加app:tabMode="scrollable"
即可。 而已。
在我的这个问题的变种,我有3中等大小的标签没有占用全宽在平板电脑上。 我不需要在平板电脑上滚动标签,因为平板电脑足够大,可以在不滚动的情况下一起显示标签。 但是我确实需要可以在手机上滚动的标签,因为手机太小,不能一起显示所有标签。
在我的例子中,最好的解决scheme是添加一个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"
。