web-dev-qa-db-ja.com

Androidタブレイアウト：タブタイトルに関してタブインジケーターの幅を折り返す

タブタイトルに関してタブインジケータの幅をラップする方法はありますか？

Current

Required

androidandroid-layoutandroid-tablayout
23
Narayan C.R

はい、タブインジケータをタイトル設定として0にパディングすることが可能です

 public void wrapTabIndicatorToTitle(TabLayout tabLayout, int externalMargin, int internalMargin) {
        View tabStrip = tabLayout.getChildAt(0);
        if (tabStrip instanceof ViewGroup) {
            ViewGroup tabStripGroup = (ViewGroup) tabStrip;
            int childCount = ((ViewGroup) tabStrip).getChildCount();
            for (int i = 0; i < childCount; i++) {
                View tabView = tabStripGroup.getChildAt(i);
                //set minimum width to 0 for instead for small texts, indicator is not wrapped as expected
                tabView.setMinimumWidth(0);
                // set padding to 0 for wrapping indicator as title
                tabView.setPadding(0, tabView.getPaddingTop(), 0, tabView.getPaddingBottom());
                // setting custom margin between tabs
                if (tabView.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
                    ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) tabView.getLayoutParams();
                    if (i == 0) {
                        // left
                        settingMargin(layoutParams, externalMargin, internalMargin);
                    } else if (i == childCount - 1) {
                        // right
                        settingMargin(layoutParams, internalMargin, externalMargin);
                    } else {
                        // internal
                        settingMargin(layoutParams, internalMargin, internalMargin);
                    }
                }
            }

            tabLayout.requestLayout();
        }
}

private void settingMargin(ViewGroup.MarginLayoutParams layoutParams, int start, int end) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        layoutParams.setMarginStart(start);
        layoutParams.setMarginEnd(end);
        layoutParams.leftMargin = start;
        layoutParams.rightMargin = end;
    } else {
        layoutParams.leftMargin = start;
        layoutParams.rightMargin = end;
    }
}

Result

[〜＃〜] edit [〜＃〜]：com.Android.support:design:28.0.0の時点で、ラベルとしてインジケーターを簡単に調整できるようになりました。

app:tabIndicatorFullWidth="false"

2019年7月編集：androidX依存関係を使用com.google.Android.material:material:x.x.x

26
leon

サポートライブラリ28以降、次のことができます。

app:tabIndicatorFullWidth="false"
app:tabPaddingStart="25dp"
app:tabPaddingEnd="25dp"

タブインジケーターに影響する目的のパディングを設定できます。

また、これを行うことができます：

app:tabIndicator="@drawable/tab_indicator"

これにより、カスタムのドロアブルがインジケーターとして設定されます。

カスタムドロウアブルの例：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <solid Android:color="@color/colorPrimary"/>
    <corners Android:radius="5dp"/>
</shape>
10
Malek Hijazi

enter image description here

ストリップをテキストより小さくする必要がない場合、これは機能するはずです：

public static void reduceMarginsInTabs(TabLayout tabLayout, int marginOffset) {

    View tabStrip = tabLayout.getChildAt(0);
    if (tabStrip instanceof ViewGroup) {
        ViewGroup tabStripGroup = (ViewGroup) tabStrip;
        for (int i = 0; i < ((ViewGroup) tabStrip).getChildCount(); i++) {
            View tabView = tabStripGroup.getChildAt(i);
            if (tabView.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
                ((ViewGroup.MarginLayoutParams) tabView.getLayoutParams()).leftMargin = marginOffset;
                ((ViewGroup.MarginLayoutParams) tabView.getLayoutParams()).rightMargin = marginOffset;
            }
        }

        tabLayout.requestLayout();
    }
}

追加されたポイントについては、各タイトルのテキストサイズを確認できます。

9
Erik B

短い答えは「いいえ」です。ここに説明があります。

インジケーターを描画するTabLayout内にSlidingTabStripプライベートクラスがあります

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        // Thick colored underline below the current selection
        if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
            canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                    mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
        }
    }

MIndicatorLeftとmIndicatorRightが必要だと思います。これらのフィールドは同じクラスに設定されます：

    private void setIndicatorPosition(int left, int right) {
        if (left != mIndicatorLeft || right != mIndicatorRight) {
            // If the indicator's left/right has changed, invalidate
            mIndicatorLeft = left;
            mIndicatorRight = right;
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }

左と右のパラメーターは次の方法で計算されます：

private void updateIndicatorPosition() {
        final View selectedTitle = getChildAt(mSelectedPosition);
        int left, right;
        if (selectedTitle != null && selectedTitle.getWidth() > 0) {
            left = selectedTitle.getLeft();
            right = selectedTitle.getRight();
            if (mSelectionOffset > 0f && mSelectedPosition < getChildCount() - 1) {
                // Draw the selection partway between the tabs
                View nextTitle = getChildAt(mSelectedPosition + 1);
                left = (int) (mSelectionOffset * nextTitle.getLeft() +
                        (1.0f - mSelectionOffset) * left);
                right = (int) (mSelectionOffset * nextTitle.getRight() +
                        (1.0f - mSelectionOffset) * right);
            }
        } else {
            left = right = -1;
        }
        setIndicatorPosition(left, right);
    }

そして最悪なのは、TabLayoutのSlidingTabStripフィールドがプライベートで最終的なことです。

private final SlidingTabStrip mTabStrip;

まったく新しいTabLayoutを作成せずに、必要なものを実現する方法がわかりません。

3
Sviatoslav Melnychenko

1つの簡単な解決策は次のとおりです。

tabLayout.setTabIndicatorFullWidth(false);

しかし、それは次のような最新の依存関係で動作します

implementation 'com.Android.support.constraint:constraint-layout:1.1.2'
implementation 'com.Android.support:design:28.0.0'
3
sudhakara k s

必要なSDKバージョンについては確かですが、アプリの名前空間を使用してパディング属性を追加して、XMLファイルで直接行うことができます。

TabLayoutを次のようにします。

        <Android.support.design.widget.TabLayout
            xmlns:app="http://schemas.Android.com/apk/res-auto"
            Android:id="@+id/tab"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            ...
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="0dp"
        </Android.support.design.widget.TabLayout>

親のlayouのxmlns:app="http://schemas.Android.com/apk/res-auto"も移動できますが、それはあなたの選択です:)

レオンの回答に感謝します。それにより、XMLでそれを実現することができました。

0
Endy Silveira

さまざまなソリューションで2時間試しましたが、どれも完璧な効果はありません。
問題はtabViewのパディングにあります-パディングをすべて0に設定しても、
異なるタブはまだ異なるパディングを持っているため、そのTextView内のテキストはサイズが異なります。

それから私は完全にそれを解決したこのライブラリを見つけました。
https://github.com/H07000223/FlycoTabLayout
@ Stas Melnychenkoが言ったように、おそらくTabLayoutを書き直さない限り、できません。そして、このライブラリはTabLayout...を書き直します。

0
Sira Lam

Android.support.design.widget.TabLayout内にtabIndicatorFullWidthという属性があります

<Android.support.design.widget.TabLayout
    Android:id="@+id/tablayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:tabBackground="@color/colorPrimary"

    app:tabIndicatorFullWidth="false" // tested okay on 8.1 , 6.0.1 

    app:tabTextColor="@color/colorAccent"
    app:tabTextAppearance="@style/CampusTabText"
    Android:minHeight="?attr/actionBarSize"
    app:tabMaxWidth="0dp"
    app:tabGravity="fill"
    app:tabMode="fixed" />
0
dplzop

スタイルを使用して実行できます。

レイアウトxmlで：

<Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        style="@style/AppTabLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

styles.xmlで：

<style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="Android:layout_marginLeft">40dp</item>
    <item name="Android:layout_marginRight">40dp</item>
</style>
0
Silwester