web-dev-qa-db-ja.com

タブレットデバイスでタブが全角にならない[Android.support.design.widget.TabLayoutを使用する]

UPDATE 29/05/2015this postのように設定タブがあります。タブは私のNexus 4モバイルでは全幅になりますが、nexus 7タブレットでは中央にあり、全画面幅をカバーしません。

Nexus 7のスクリーンショット Nexus7 Nexus 4のスクリーンショット Nexus 4

androidtabswidthandroid-appcompatandroid-tablayout
173
Max

"単純な"答え 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" />
521
Adam Johns

私は同じ問題を抱えていて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>

このスタイルから、 "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>

そしてタブバーは画面全体を左右に塗りつぶします。

81
Kaizie

スクロール可能のためのソリューション：（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);
        }

    }
24
Ram Prakash Bhat

タブが全幅を占めるようにする（同じサイズに分割する）には、TabLayoutビューに次のように適用します。

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

これはあなたが試す必要があるのに役立ちます

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

私のために働きます。これにはxmlns:app="http://schemas.Android.com/apk/res-auto"もあります

2
Cam Hùng Huỳnh

解決策については、以下のコードを確認してください。

以下はレイアウトコードです。

<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-programatically-8146d6101efe からの参照

2
Kuldeep Sakhiya

私にとっては、次のコードがうまくいって十分でした。

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

なぜそんなに忙しいの？ TabLayoutにapp:tabMode="scrollable"をXMLで挿入するだけです。それでおしまい。

enter image description here

1
Ali Akram

この問題の私の変形では、私はタブレットの全幅を占めていなかった中程度のサイズの3つのタブを持っていました。タブレットはスクロールせずにタブをまとめて表示するのに十分な大きさなので、タブをタブレット上でスクロール可能にする必要はありませんでした。電話はすべてのタブをまとめて表示するには小さすぎるので、私は電話でタブをスクロール可能にする必要がありました。

私の場合の最善の解決策は、関連するTabLayoutがres/layout-sw600dp/main_activity.xmlとapp:tabGravity="fill"を持つことができるapp:tabMode="fixed"ファイルを追加することでした。しかし、私の通常のres/layout/main_activity.xmlでは、app:tabGravity="fill"とapp:tabMode="fixed"を省き、代わりにapp:tabMode="scrollable"を使いました。

1
CKP78

Solution for Scrollable（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" />

Kotlinの場合：

私の場合、3つ未満のタブがある場合、等しいスペースを割り当てます。

注：条件が要件に従っている場合

        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