Вкладка не принимает полную ширину на планшетном устройстве [с помощью android.поддержка.дизайн.штучка.TabLayout]
У меня есть вкладки настройки как обновление 29/05/2015этой пост. Вкладки принимают полную ширину на моем мобильном устройстве Nexus 4, но на планшете nexus 7 он находится в центре и не покрывает всю ширину экрана.
Nexus 7 скриншот Nexus 4 скриншот
10 ответов:
"более простой" ответ заимствовано у Кайзи будет просто добавлять
app:tabMaxWidth="0dp"
в своемTabLayout
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
который имеет различные реализации (normal, landscape и 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>
и тогда панель вкладок заполнит весь экран из стороны в сторону.
решение для прокрутки: (TabLayout.MODE_SCROLLABLE), то есть когда вам нужно больше, чем 2 вкладки (динамические вкладки)
Шаг 1 : стиль.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
view: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: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:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill"/>
Проверьте ниже код для решения.
Ниже приведен код макета:
<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
<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"
в моем варианте этой проблемы, у меня было 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"
, и .