web-dev-qa-db-fra.com

Utilisation de TabLayout dans un fragment; texte de tabulation invisible

J'expérimente actuellement divers nouveaux composants dans la nouvelle bibliothèque de conception de support Android . J'ai implémenté un NavigationView dans mon MainActivity.Java, qui utilise un FragmentManager pour naviguer entre les éléments dans le tiroir de navigation:

getSupportFragmentManager()
    .beginTransaction()
    .replace(R.id.content, mTabLayoutFragment)
    .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
    .commit();

J'utilise un TabLayout dans l'un des fragments. Voici la disposition du fragment:

<Android.support.design.widget.AppBarLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@Android:color/white"/>

</Android.support.design.widget.AppBarLayout>

Et le code Java derrière:

import Android.os.Bundle;
import Android.support.design.widget.*;
import Android.support.v4.app.Fragment;
import Android.support.v4.app.FragmentManager;
import Android.support.v4.app.FragmentStatePagerAdapter;
import Android.support.v4.view.ViewPager;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;

public class TabLayoutFragment extends Fragment {   


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View inflatedView = inflater.inflate(R.layout.fragment_tablayout, container, false);

        TabLayout tabLayout = (TabLayout) inflatedView.findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("Campusplan"));
        tabLayout.addTab(tabLayout.newTab().setText("Raumplan"));
        final ViewPager viewPager = (ViewPager) inflatedView.findViewById(R.id.viewpager);

        viewPager.setAdapter(new PagerAdapter
                (getFragmentManager(), tabLayout.getTabCount()));
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        return inflatedView;
    }

    public class PagerAdapter extends FragmentStatePagerAdapter {
        int mNumOfTabs;

        public PagerAdapter(FragmentManager fm, int NumOfTabs) {
            super(fm);
            this.mNumOfTabs = NumOfTabs;
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    TabItem1 tab1 = new TabItem1();
                    return tab1;
                case 1:
                    TabItem1 tab2 = new TabItem1();
                    return tab2;
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {
            return mNumOfTabs;
        }
    }
}

Notez s'il vous plaît TabItem1 et TabItem1, qui sont des fragments qui ne sont rien d'autre qu'une TextView. Ces deux doivent être affichés dans le TabLayout.

Maintenant, ce code semble fonctionner, dans une certaine mesure. Voici à quoi ça ressemble:

Ce qui est bizarre, c'est qu'après avoir fait pivoter l'appareil, tout semble fonctionner correctement:

enter image description here

Il semble que quelque chose soit appelé lors d'un changement de configuration. C'est bizarre, d'autant plus que j'ai dans mon AndroidManifest:

Android:configChanges="orientation|screenSize"
androidandroid-fragmentsandroid-tablayoutandroid-support-design
21
jacobz

Je suis confronté au même problème avec la nouvelle version de Android supporte la bibliothèque de conception v23.1.1. Mais je viens de comprendre ce qui se passe.

si votre téléavertisseur de vue a 2 fragments comme votre mention ci-dessus, alors vous définissez votre téléavertisseur de vue avec cette déclaration:

tabLayout.setupWithViewPager(viewPager);

automatiquement vous aurez 2 onglets avec du texte vide. Donc vous ne devriez plus ajouter de nouvel onglet. Mais quelque chose que vous devez faire est de définir le texte dans ces deux onglets créés.

tabLayout.getTabAt(0).setText("Campusplan");
tabLayout.getTabAt(1).setText("Raumplan");

Conclusion. Pour que les onglets fonctionnent comme vous le souhaitez, une chose importante que vous devez faire:

tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setText("Campusplan");
tabLayout.getTabAt(1).setText("Raumplan");

J'espère que cela vous sera utile :)

33
arif ardiansyah

Mise à jour: Design Library v23.0.0 résout ce problème.

Trouvé le problème ici: https://code.google.com/p/Android/issues/detail?id=180462

Solution simple:

tabLayout.post(new Runnable() {
    @Override
    public void run() {
        tabLayout.setupWithViewPager(viewPager);
    }
});
18
jacobz

juste essayé de remplacer la méthode dans l'adaptateur:

public CharSequence getPageTitle(int position) {}

et il fonctionne.

4
Damon Yuan

Le développeur travaillant sur cette bibliothèque recommande le travail suivant:

if (ViewCompat.isLaidOut(tabLayout)) {
        tabLayout.setupWithViewPager(viewPager);
    } else {
        tabLayout.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                tabLayout.setupWithViewPager(viewPager);
                tabLayout.removeOnLayoutChangeListener(this);
            }
        });
    }
2
Pepijn

Manque de réputation pour commenter @arif ardiansyah ...

Vérifiez le code source:

 `TabLayout#setupWithViewPager(...)` 

 -->>`setPagerAdapter(adapter, true);`

 -->>`populateFromPagerAdapter();`

Ici, TabLayout supprime tous les onglets et recrée de nouveaux onglets dont le texte est défini avec PagerAdapter#getPageTitle(...). Vous pouvez donc remplacer cette méthode pour fournir à Tablayout le titre de vos onglets.

0
Lym Zoy