TabLayout 选项卡文本不显示

Question

我在 Fragment 中使用 TabLayout 来显示三个固定选项卡，这些选项卡可以正常工作，但即使在我设置 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>

Answer 1

问题是您在使用 addTab() 调用设置选项卡后调用 setupWithViewPager()，有效地覆盖了它们。

来自 TabLayout 关于 setupWithViewPager() 的 documentation:

The tabs displayed in this layout will be populated from the ViewPager adapter's page titles.

如果您想将 TabLayout 与 ViewPager 一起使用，您应该在 PagerAdapter 中覆盖 getPageTitle()（并删除 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;
    }

    // ...
}

Answer 2

我在调用 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));

Answer 3

我想在 XML 中定义 TabItem 而不是以编程方式进行。正如您提到的，此 setupWithViewPager() 调用将选项卡项的文本和图标重置为空（它使用相同的选项卡对象，只是重置其内容）。我使用了您的方法，但使其更具可重用性。这是我的代码：

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

Answer 4

我正在使用 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 选项卡文本不显示

TabLayout tabs text not displaying

android

android-layout

android-tablayout