TabLayout的选项卡未显示出来。

11

我有一个主活动,它托管了一个片段,该片段又托管了一个TabLayout(带有ViewPager)。选项卡栏被显示出来了,但选项卡本身没有显示。

这是我在主活动中显示宿主片段的代码:

        Fragment fragment = new BMITabsFragment();

        FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).addToBackStack(Constants.BMI_TABS_FRAGMENT).commit();

以下是托管TabLayout的Fragment示例,它被称为BMITabsFragment(如下所示):

public class BMITabsFragment extends Fragment {
...
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
        mParam1 = getArguments().getString(ARG_PARAM1);
        mParam2 = getArguments().getString(ARG_PARAM2);
    }

}

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

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

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

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_bmitabs, container, false);
    return view;
}
...
}

这是我的FragmentPagerAdapter:

public class BMIFragmentPagerAdapter extends FragmentPagerAdapter {

final int PAGE_COUNT = 2;
private FragmentManager fragmentManager;
private Context context;

public BMIFragmentPagerAdapter(FragmentManager fm, Context context) {
    super(fm);
    this.context = context;
    this.fragmentManager = fm;

}

public BMIFragmentPagerAdapter(FragmentManager fm) {
    super(fm);
    fragmentManager = fm;

}

@Override
public CharSequence getPageTitle(int position) {
    String[] pageTitles = context.getResources().getStringArray(R.array.page_titles_array);
    return pageTitles[position];
}

@Override
public Fragment getItem(int position) {
    SharedPreferences prefs = context.getSharedPreferences(Constants.SHARED_PREFS_FILE, 0);
    long patientId = prefs.getLong(Constants.SELECTED_PATIENT_ID, 1);
    Fragment fragment = null;
    switch (position){
        case 0:
            return BMITabelleFragment.newInstance(patientId);

        case 1:
            return BMIChartFragment.newInstance(patientId);

        default:
            return BMITabelleFragment.newInstance(patientId);
    }
}

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

这是fragment_bmitabs.xml的片段:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="0px"
    android:layout_weight="1"
    android:background="@android:color/white" />

</LinearLayout>

我的代码基于谷歌 Android 指南,链接为:https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout

这里我缺些什么?

注意:我正在使用 AppCompatActivity,支持库 v4 & v7 和 com:android:support:design 库。


在styles.xml中进行一个简单的更新,类似于 <style name="TextAppearance.Widget.TabWidget" parent="@style/AppTheme"> .. 对我很有用-答案在这里:https://dev59.com/7nE85IYBdhLWcg3wYSZk#2805256 - Gene Bo
7个回答

51

1
荒谬...文档说“此视图还支持作为ViewPager的装饰部分使用,并且可以直接像这样在布局资源文件中添加到ViewPager中”,这表明如果您以这种方式使用此视图,则不需要调用该方法。 - Massimo
1
无法正常工作。选项卡的碎片仍未显示。 - ralphgabb

9

setupWithViewPager() 后设置选项卡图标

private void setTabs {
   tabLayout.setupWithViewPager(viewPager);
   setupTabIcons();
} 

private void setupTabIcons() {
   tabLayout.getTabAt(0).setIcon(tabIcons[0]);
   tabLayout.getTabAt(1).setIcon(tabIcons[1]);
   tabLayout.getTabAt(2).setIcon(tabIcons[2]);
}

你忘记修复这个答案中的链接了。现在它指向“输入链接说明”。 - Reinstate Monica
这对我有用,viewPager已经初始化了选项卡,只需使用getTabAt()获取选项卡并设置文本、图标或自定义视图即可! - leopold

6

像 @Nathaniel Ford 所说,这应该是一个 bug,我改用设计库23.0.1。谷歌修复了它,所以将 build.gradle 更改为 compile 'com.android.support:design:23.0.1'。ps:你还必须将 compileSdkVersion 改为 23。


谢谢...这对我很有用。谷歌API的质量之差让我感到惊讶,真是令人惊叹。 - Merlevede

2

对我来说,其他答案都没有用,我尝试了所有的方法

然而,这个答案有效:TabLayout not showing tabs after adding navigation bar

根据那个答案,你需要将TabLayout放在AppBarLayout中。为什么呢?谁知道呢。但至少它可以工作。

示例代码(从那篇帖子中提取):

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="200dp"
    android:id="@+id/appBarLayout2">


    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout2"
        app:tabMode="fixed"
        app:tabGravity="fill"

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

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

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentBottom="true"
    android:id="@+id/viewPager2"
    android:layout_below="@+id/appBarLayout2">

</android.support.v4.view.ViewPager>

1
如果您在xml文件的Tablayout中使用了android:tabPadding属性,请将其删除。

作为一个有效的回答,请更详细地阐述一下,并解释原因。谢谢。 - acostela

0
如果将来有人与ViewPager2一起使用TabLayout并遇到相同的问题,只需在new TabLayoutMediator()的末尾添加.attach();即可解决。
new TabLayoutMediator(tabLayoutRef, viewPager2Ref, (tab, position) -> tab.setText("Tab No. "+position)).attach();

0
你可以使用FragmentStatePagerAdapter代替FragmentPagerAdapter,这可能会对你有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接