TabLayout标签文本不显示


72

TabLayout在a内部使用它Fragment来显示三个固定的选项卡,并且这些选项卡都在工作,但是即使我app:tabTextColor在布局中设置了属性后,它仍然不可见,它也没有显示选项卡文本。

NewFragment.java

public class NewFragment extends Fragment {

private RecyclerView mRecyclerView;
private RecyclerView.LayoutManager mLayoutManager;
private RecyclerView.Adapter mAdapter;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View inflatedView = inflater.inflate(R.layout.new_fragment, container, false);

    TabLayout tabLayout = (TabLayout) inflatedView.findViewById(R.id.tabLayout);
    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
    final ViewPager viewPager = (ViewPager) inflatedView.findViewById(R.id.viewpager);

    LinearLayoutManager mLayoutManager = new LinearLayoutManager(getActivity());
    mLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);

    viewPager.setAdapter(new PagerAdapter(getFragmentManager(), tabLayout.getTabCount()));
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
    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:
                return new FragmentTab();
            case 1:
                return new FragmentTab();
            case 2:
                return new FragmentTab();
            default:
                return null;
        }
    }

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

newfragment.xml

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

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabTextColor="#ffffff"
    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>

Answers:


142

问题是您setupWithViewPager()在设置了带有addTab()呼叫的选项卡之后正在呼叫,从而有效地覆盖了它们。

文件TabLayout有关setupWithViewPager()

ViewPager适配器的页面标题中将填充此布局中显示的选项卡。

如果您想将TabLayout搭配使用ViewPager,则应getPageTitle()在中进行覆盖PagerAdapter(并删除addTab()呼叫,它们是多余的)。

例如:

public class ExamplePagerAdapter extends FragmentStatePagerAdapter {

    // tab titles
    private String[] tabTitles = new String[]{"Tab1", "Tab2", "Tab3"};

    public ExamplePagerAdapter(FragmentManager fm) {
        super(fm);
    }

    // overriding getPageTitle()
    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new Tab1Fragment();
            case 1:
                return new Tab2Fragment();
            case 2:
                return new Tab3Fragment();
            default:
                throw new RuntimeException("Invalid tab position");
        }
    }

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

    // ...
}

感谢您抽出宝贵时间并发布此答案。它帮助了:)
莫娜

我整天都在寻找相同的问题。谢谢!解决了。
阿维纳什

3
_ / _ _ / _您刚刚退出了开发
流程,却

致Android核心团队的信息:如果您有点不幸,那么有关此文档的内容不足以在开发中浪费时间。
卡尔,

13

我在致电后为每个标签添加了标签文本和图标 tabs.setupWithViewPager(viewPager)

    viewPager.setAdapter(new MyViewAdapter(getSupportFragmentManager()));
    TabLayout tabs=(TabLayout) findViewById(R.id.tabs);
    tabs.setupWithViewPager(viewPager);
    tabs.getTabAt(0).setIcon(R.drawable.icon1);
    tabs.getTabAt(1).setIcon(R.drawable.icon2);
    tabs.getTabAt(0).setText(getResources().getText(R.string.tab1));
    tabs.getTabAt(1).setText(getResources().getText(R.string.tab2));

如果tabs.setupWithViewPager(viewPager);在设置完选项卡后调用,它会工作

1

我正在使用Kotlin,花了一个小时来查找此代码中的错误。

var viewPager: ViewPager = view.findViewById(R.id.viewPager)

...

adapter = TabAdapter(fragmentManager!!)
adapter.addFragment(Fragment1(), "Fragment 1")
adapter.addFragment(Fragment2(), "Fragment 2")

viewPager.adapter = adapter

tabLayout.setupWithViewPager(viewpager)

我可以毫无错误地进行编译,但是在我意识到分配给tabLayout的viewpager不是viewPager之前,不会显示选项卡标题(注意大写的'P')。它不会产生错误,因为Kotlin将找到任何匹配的布局ID,在本例中为“ viewpager”,它是一个ViewPager,但在另一个视图上。


tabLayout.setupWithViewPager(viewpager)是哪里人基本上忘了..
Sreekant谢诺伊

0

我想用XML定义TabItem,而不是通过编程来实现。如您所述,此setupWithViewPager()调用将选项卡项目的文本和图标重置为null(它使用相同的选项卡对象,只是重置其内容)。我使用了您的方法,但使其更可重用。这是我的代码:

public class TabLayoutUtil {
    public static void setupTabLayoutWithViewPager(TabLayout tabLayout, ViewPager viewPager) {
        ArrayList<Pair<CharSequence, Drawable>> tabsContentCopy= new ArrayList<>();
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tabsContentCopy.add(new Pair<>(tab != null ? tab.getText() : null, tab != null ? tab.getIcon() : null));
        }
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            if (i<tabsContentCopy.size()) {
                tabLayout.getTabAt(i).setText(tabsContentCopy.get(i).first);
                tabLayout.getTabAt(i).setIcon(tabsContentCopy.get(i).second);
            }
        }
    }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.