it-swarm.com.de

Tab nimmt auf Tablet-Geräten nicht die volle Breite ein [Using Android.support.design.widget.TabLayout]

Ich habe Setup-Registerkarten als UPDATE 29/05/2015 this post. Tabs nehmen auf meinem Nexus 4-Handy die volle Breite ein, aber auf dem Nexus 7-Tablet in der Mitte und decken nicht die gesamte Bildschirmbreite ab.

Nexus 7-Screenshot  Nexus7  Nexus 4 Screenshot  Nexus 4

179
Max

Eine "einfachere" Antwort von Kaizie ausgeliehen fügt einfach app:tabMaxWidth="0dp" In Ihr TabLayout xml ein:

<Android.support.design.widget.TabLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />
539
Adam Johns

Ich hatte das gleiche Problem und überprüfte den TabLayout-Stil und stellte fest, dass sein Standardstil Widget.Design.TabLayout Ist, der verschiedene Implementierungen hat (normal, quer und sw600dp).

Das, was wir brauchen, ist das für Tablets (sw600dp), das die folgende Implementierung hat:

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

Ab diesem Stil verwenden wir "tabGravity" (die möglichen Werte sind "center" oder "fill") mit dem Wert "fill".

Aber wir müssen tiefer gehen, und dann sehen wir, dass sich diese von Base.Widget.Design.TabLayout Aus erstreckt. Die Implementierung lautet:

<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>

Von diesem Stil aus müssen wir "tabMaxWidth" überschreiben. In meinem Fall habe ich es auf 0dp Gesetzt, so dass es keine Begrenzung gibt.

Und mein Stil sah so aus:

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

Und dann füllt die Tab-Leiste den gesamten Bildschirm von Seite zu Seite.

86
Kaizie

Lösung für scrollable: (TabLayout.MODE_SCROLLABLE), dh wann immer Sie mehr als 2 Registerkarten benötigen (Dynamische Registerkarten)

Schritt 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>

Schritt 2: Ihr XML-Layout

<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" />

Schritt 3: In Ihrer Aktivität/Fragment, wo immer Sie Registerkarten haben.

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

    }
25

Wenden Sie auf die Ansicht TabLayout Folgendes an, um zu erzwingen, dass Registerkarten die gesamte Breite einnehmen (in gleiche Größen unterteilt):

TabLayout tabLayout = (TabLayout) findViewById(R.id.your_tab_layout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
15
Jon Cairns

Dies ist hilfreich, müssen Sie versuchen

 <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" />
5
Ness Tyagi
<Android.support.design.widget.TabLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />

arbeite für mich. Dies haben auch xmlns:app="http://schemas.Android.com/apk/res-auto"

3

Für mich hat der folgende Code funktioniert und hat gereicht.

<Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabGravity="fill"/>
3
Birendra Singh

Überprüfen Sie den folgenden Code für Lösungen.

Unten ist der 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" />

Beachten Sie, dass Sie für eine dynamische Tabulatoranzahl nicht vergessen, setTabNumbers (tabcount) aufzurufen.

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

Referenz entnommen aus https://medium.com/@elsenovraditya/set-tab-minimum-width-of-scrollable-tablayout-programmatically-8146d6101efe

2
Kuldeep Sakhiya

Warum all diese hektische Arbeit? Setzen Sie einfach app:tabMode="scrollable" in Ihrem TabLayout in XML. Das ist es.

enter image description here

1
Ali Akram

In meiner Variante dieses Problems hatte ich 3 mittelgroße Tabs, die auf Tablets nicht die volle Breite einnahmen. Die Registerkarten mussten auf Tablets nicht scrollbar sein, da Tablets groß genug sind, um alle Registerkarten ohne Scrollen anzuzeigen. Aber ich brauchte die Registerkarten, um auf Handys scrollen zu können, da Handys zu klein sind, um alle Registerkarten zusammen anzuzeigen.

In meinem Fall war die beste Lösung, eine res/layout-sw600dp/main_activity.xml - Datei hinzuzufügen, in der das relevante TabLayout app:tabGravity="fill" Und app:tabMode="fixed" Haben könnte. Aber in meinem regulären res/layout/main_activity.xml Habe ich app:tabGravity="fill" Und app:tabMode="fixed" Weggelassen und stattdessen app:tabMode="scrollable" Gehabt.

1
CKP78

Lösung für Scrollable (Kotlin)

In 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 meinem Fall reserviere ich bei weniger als 3 Tabs den gleichen Platz.

Anmerkung: Wenn Bedingung wie pro Ihre Anforderung ist

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

     fun allotEachTabWithEqualWidth(tabLayout: TabLayout) {
        mTabLayout.tabMode=  TabLayout.MODE_FIXED
        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
        }

    }
0
Ranjith Kumar