web-dev-qa-db-fra.com

Supprimer le saut de ligne dans TabLayout

Je viens d'ajouter le nouveau composant TabLayout à mon application. Comme vous le savez peut-être, il existe deux modes différents pour les onglets app:tabMode="scrollable" et app:tabMode="fixed". 

Quand j'utilise app:tabMode="fixed" j'obtiens le résultat suivant:

 enter image description here

Il n'y a pas de marges/marges à gauche et à droite, mais le texte est enveloppé.

Mais quand j'utilise app:tabMode="scrollable" j'obtiens le résultat suivant:

 enter image description here

Le texte n'est pas enveloppé, mais il y a une marge étrange du côté droit et je ne peux pas m'en débarrasser.

J'ai également essayé de définir tabGravity sur app:tabGravity="center" ou app:tabGravity="fill", mais je n'ai apporté aucun changement.

Ce serait bien si certains d'entre vous les gars et les filles intelligents avaient une solution pour moi.

A bientôt, Lukas

androidxmllayouttabsandroid-support-library
36
finki

Une solution consiste ici à gonfler une disposition personnalisée pour chaque onglet, ce qui vous donnera plus de contrôle sur l'apparence de chaque onglet . Ceci est effectué avec la méthode setCustomView () .

Notez qu'il sera différent selon la résolution de l'écran.

Il est toujours difficile de donner une apparence parfaite à chaque périphérique, mais au moins, cette méthode vous donne plus de contrôle, car vous pouvez utiliser différents fichiers xml de présentation personnalisés pour différentes résolutions/tailles d'écran. 

Une approche serait de rendre la taille de la police la plus grande possible sans être tronquée à chaque taille d'écran.

J'ai un exemple simple qui fonctionne, qui limite le texte de chaque onglet à une ligne. Cependant, dans cet exemple simple, le texte long dans les onglets latéraux est également ellipsé sans changer la taille de la police. Votre prochaine étape serait de déterminer la taille de police optimale pour chaque taille d’écran et de créer un xml de disposition spécifique pour chaque onglet.

Voici le fichier custom_tab.xml, avec Android:singleLine="true" spécifié:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical" Android:layout_width="match_parent"
    Android:layout_height="match_parent">
    <TextView
        Android:id="@+id/custom_text"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:background="?attr/selectableItemBackground"
        Android:gravity="center"
        Android:textSize="16dip"
        Android:textColor="#ffffff"
        Android:singleLine="true"
        />
</LinearLayout>

Voici la mise en page pour MainActivity:

<RelativeLayout
    Android:id="@+id/main_layout"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"
        Android:background="?attr/colorPrimary"
        Android:elevation="6dp"
        Android:minHeight="?attr/actionBarSize"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tab_layout"
        app:tabMode="fixed"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_below="@+id/toolbar"
        Android:background="?attr/colorPrimary"
        Android:elevation="6dp"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        Android:minHeight="?attr/actionBarSize"
        />

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="fill_parent"
        Android:layout_below="@id/tab_layout"/>

</RelativeLayout>

Voici le code d'activité, qui inclut FragmentPagerAdapter:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Get the ViewPager and set it's PagerAdapter so that it can display items
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        PagerAdapter pagerAdapter =
                new PagerAdapter(getSupportFragmentManager(), MainActivity.this);
        viewPager.setAdapter(pagerAdapter);

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);

        // Iterate over all tabs and set the custom view
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }
    }


    class PagerAdapter extends FragmentPagerAdapter {

        String tabTitles[] = new String[] { "Aufzeichnung", "Berichte", "Neue Aufgabe", };
        Context context;

        public PagerAdapter(FragmentManager fm, Context context) {
            super(fm);
            this.context = context;
        }

        @Override
        public int getCount() {
            return tabTitles.length;
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return new BlankFragment();
                case 1:
                    return new BlankFragment();
                case 2:
                    return new BlankFragment();
            }

            return null;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // Generate title based on item position
            return tabTitles[position];
        }

        public View getTabView(int position) {
            View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView tv = (TextView) tab.findViewById(R.id.custom_text);
            tv.setText(tabTitles[position]);
            return tab;
        }

    }
}

Et voici le résultat avec le code ci-dessus:

 enter image description here

Notez que si vous supprimez Android:singleLine="true", il ressemble à ceci, de la même manière que dans votre question:

 enter image description here

24
Daniel Nugent

Voici un petit hack beaucoup plus court que d'utiliser setCustomView(): utilisez l'attribut Android:theme sur votre TabLayout:

<Android.support.design.widget.TabLayout
    Android:id="@+id/tab_layout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/TabLayout_Theme"
    app:tabMode="fixed"/>

Puis dans vos thèmes XML:

<style name="TabLayout_Theme" parent="@style/AppTheme">
    <item name="Android:singleLine">true</item>
</style>

Nous devons le faire de cette façon car malheureusement l'attribut Android:singleLine est ignoré sur le app:tabTextAppearance défini sur TabLayout. app:tabTextAppearance n'est vraiment utile que pour changer la taille du texte.

27
TalkLittle

Afficher "..." dans les titres des onglets ne fera pas une bonne expérience d’interface utilisateur Je suggère que vous deviez définir tabmode à scrollable et laisser les titres des onglets prendre l’espace souhaité. 

  <Android.support.design.widget.TabLayout
                Android:id="@+id/htab_tabs"
                Android:layout_width="wrap_content"
                Android:layout_height="?attr/actionBarSize"
                Android:layout_gravity="bottom"
                app:tabIndicatorColor="@Android:color/white"
                app:tabMode="scrollable" />
11
Hitesh Sahu

Si c'est une option, vous pouvez centrer les onglets avec RelativeLayout et en configurant Android: layout_centerHorizontal = "true"

Cela vous donnera une marge égale à gauche et à droite.

par exemple.

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">
        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_centerHorizontal="true"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            app:tabMode="scrollable" />
    </RelativeLayout>
1
AndiDev

Résolu mon problème en attribuant un style à l'application: tabTextAppearance

<Android.support.design.widget.TabLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:tabTextAppearance="@style/MyCustomTabTextAppearance">

style:

<style name="MyCustomTabTextAppearance" parent="@style/AppTheme">
    <item name="Android:singleLine">true</item>
    <item name="Android:textSize">@dimen/_5sdp</item>
</style>

Vous pouvez également définir textSize.

0
Hardik Lakhani

Si vous utilisez TextView dans votre mise en page XML, utilisez Android:maxLines="1" ou Android:singleLine="true" Vérifiez si cela fonctionne. Et si non TextView, veuillez placer votre code XML ici.

0
theJango
float myTabLayoutSize = 360;
if (DeviceInfo.getWidthDP(this) >= myTabLayoutSize ){
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
} else {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}
0
Alok Singh