web-dev-qa-db-fra.com

Android Disposition des onglets: Envelopper la largeur de l'indicateur d'onglet par rapport au titre de l'onglet

Existe-t-il un moyen d'enrouler la largeur de l'indicateur d'onglet par rapport au titre de l'onglet?

Current

Required

androidandroid-layoutandroid-tablayout
23
Narayan C.R

Oui , il est possible d'enrouler l'indicateur de tabulation comme rembourrage de réglage du titre à 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

[~ # ~] modifier [~ # ~] : à partir du com.Android.support:design:28.0.0, vous pouvez facilement régler l'indicateur comme étiquette maintenant:

app:tabIndicatorFullWidth="false"

EDIT juillet 2019 : utilisez la dépendance androidX com.google.Android.material:material:x.x.x

26
leon

Depuis la bibliothèque de support 28, vous pouvez effectuer les opérations suivantes:

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

Vous pouvez définir le remplissage souhaité qui affecte l'indicateur de tabulation.

Vous pouvez également le faire maintenant:

app:tabIndicator="@drawable/tab_indicator"

cela définira un indicateur personnalisé dessinable.

exemple de dessin personnalisé:

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

Si vous n'avez pas besoin que la bande soit plus petite que le texte, cela devrait fonctionner:

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

Pour les points ajoutés, vous pouvez vérifier la taille du texte de chaque titre.

9
Erik B

La réponse courte est "non". Voici l'explication.

Il y a une classe privée SlidingTabStrip dans TabLayout qui dessine un indicateur

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

Je crois que mIndicatorLeft et mIndicatorRight est ce dont vous avez besoin. Ces champs sont définis dans la même classe:

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

où les paramètres gauche et droit sont calculés dans la méthode suivante:

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

Et le pire, c'est que le champ SlidingTabStrip dans TabLayout est privé et final.

private final SlidingTabStrip mTabStrip;

Je ne vois pas comment il est possible d'atteindre ce dont vous avez besoin sans créer un TabLayout totalement nouveau.

3
Sviatoslav Melnychenko

Une solution simple est:

tabLayout.setTabIndicatorFullWidth(false);

Mais cela fonctionne avec les dernières dépendances comme

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

Je suis sûr que la version du SDK est nécessaire, mais vous pouvez le faire directement dans votre fichier XML, en ajoutant l'attribut padding à l'aide de l'espace de noms de l'application.

Donnez simplement à votre TabLayout l'apparence suivante:

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

Vous pouvez déplacer le xmlns:app="http://schemas.Android.com/apk/res-auto" pour votre parent layou aussi, mais c'est votre choix :)

Merci leon pour sa réponse, qui m'a amené à y parvenir par XML.

0
Endy Silveira

J'ai essayé 2 heures pour différentes solutions mais aucune de celles-ci n'a un effet parfait.
Le problème réside dans le rembourrage de tabView - même si je mets son rembourrage à 0,
Les différents onglets ont toujours un remplissage différent et donc le texte à l'intérieur de son TextView varie en taille.

Ensuite, j'ai trouvé cette bibliothèque qui l'a parfaitement résolu.
https://github.com/H07000223/FlycoTabLayout
Comme l'a dit @Stas Melnychenko, nous ne pouvons probablement pas le faire à moins de réécrire un TabLayout. Et cette bibliothèque réécrit un TabLayout...

0
Sira Lam

Il y a un attribut appelé tabIndicatorFullWidth dans Android.support.design.widget.TabLayout

<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

Vous pouvez le faire en utilisant des styles.

Dans la mise en page xml:

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

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