选项卡文本随 viewpager 消失

Question

一个非常简单的例子。我认为大多数人都以这种方式实现选项卡。但是标签文本只是丢失了。

设计支持库的版本是最新的24.2.0。

这是我的布局代码：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabTextColor="@android:color/darker_gray"
    app:tabSelectedTextColor="@android:color/white"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TabItem
        android:text="@string/tab_domain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.TabItem
        android:text="@string/tab_upload"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.TabItem
        android:text="@string/tab_download"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

我正在使用 ButterKnife 8.2.1 来绑定视图对象。这是我在 onCreate() 中的活动代码：

    final DiagnosePagerAdapter adapter = new DiagnosePagerAdapter(getSupportFragmentManager(),
            tabs.getTabCount());
    tabs.setupWithViewPager(pager);
    pager.setAdapter(adapter);
    pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));

这是我的适配器：

    class DiagnosePagerAdapter extends FragmentStatePagerAdapter {
    int mNumOfTabs;
    List<Fragment> fragments = new ArrayList<>();

    public DiagnosePagerAdapter(FragmentManager fm, int numberOfTabs) {
        super(fm);
        this.mNumOfTabs = numberOfTabs;
        fragments.add(new DomainFragment());
        fragments.add(new UploadFragment());
        fragments.add(new DownloadFragment());
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

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

我在这里看到过类似的问题：Using TabLayout inside a Fragment; tab text invisible

该问题的答案表示，该问题已在 23.0.0 中得到修复，并且在我的手机（包括小米 HM 2A 和华为设备）上都没有解决方法。

Answer 1

您必须覆盖getPageTitle()，如下所示（我认为这将解决您的问题）：

@Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "Domain";
            case 1:
                return "Upload";
            case 2:
                return "Download";
        }
        return null;
    }

另外，由于您有固定数量的标签，您应该使用FragmentPagerAdapter 而不是FragmentStatePagerAdapter。然后改变你的xml布局如下：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabTextColor="@android:color/darker_gray"
    app:tabSelectedTextColor="@android:color/white"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

如下更改您的适配器：

class DiagnosePagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case 0:
                fragment = new DomainFragment();
                break;
            case 1:
                fragment = new UploadFragment();
                break;
            case 2:
                fragment = new DownloadFragment();
                break;
        }
        return fragment;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "Domain";
            case 1:
                return "Upload";
            case 2:
                return "Download";
        }
        return null;
    }

}

并更改您的onCreate() 如下：

final DiagnosePagerAdapter adapter = new DiagnosePagerAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);//call setAdapter() before setupWithViewPager()
tabs.setupWithViewPager(pager);

Answer 2

选项卡的文本被覆盖，因为 Android 不使用您在布局 xml 中定义的选项卡。相反，它会创建全新的选项卡。

另一个答案已经解释了如何使用适配器添加文本。

但是如果你想添加一个图标，或者用你的标签做一些其他的事情，那么你必须在第一个创建的 Fragment 中执行以下操作。

public void onCreateView(...) {
    ...
    TabLayout tabLayout = getActivity().findViewById(R.id.tabLayout);
    PagerAdapter.setTitle(tabLayout);

然后在你的 PagerAdapter...

public static void setTitle(TabLayout tabLayout) {
    TabLayout.Tab tab;

    tab = tabLayout.getTabAt(0);
    tab.setIcon(R.drawable.home_icon);
    tab.setText(R.string.my);

    tab = tabLayout.getTabAt(1);
    tab.setIcon(R.drawable.icon_search);
    tab.setText(R.string.search);

    tab = tabLayout.getTabAt(2);
    tab.setIcon(R.drawable.icon_settings);
    tab.setText(R.string.settings);
}

我觉得这有点乱，但我没有找到其他方法。

Answer 3

使 tablayout 可滚动为 true，以便它可以显示文本的完整名称。 作为参考，您可以使用以下代码。

 <androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/tb_socialMedia_fragment">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabInlineLabel="true"
        app:tabMode="scrollable"
        />
</androidx.viewpager.widget.ViewPager>

Answer 4

如果你想为 tablayout 添加名称并添加类，你可以使用以下代码

class SocialMediaVpAdapter(
    var fragmentManager: FragmentManager, var context :Context) : FragmentPagerAdapter(fragmentManager) {
    override fun getCount(): Int {
        return 4
    }

    override fun getPageTitle(position: Int): CharSequence? {
         return when (position) {
            0 -> {
                context.getString(R.string.social_all)
            }
            1 -> {
                context.getString(R.string.social_facebook)
            }
            2 -> {
                context.getString(R.string.social_Instagram)
            }
            3 ->{
                context.getString(R.string.social_tiktok)
            }

            else ->context.getString(R.string.social_all)
         }
    }

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> {
                AllSocialMedia()
            }
            1 -> {
                FbSocialMediaActivity()
            }
            2 -> {
                InstagramSocialMedia()
            }
            3 ->{
                TikTokSocialMedia()
            }

            else -> AllSocialMedia()
        }
    }
}