Question

我尝试用TabLayout填充ViewPager，但不幸的是没有填充。

我按照本教程进行了联系：TabLayout and ViewPager in your Android App。本教程使用旧的支持库v4。我的项目基于AndroidX，我希望继续使用。 TabLayout的{{3}}说我需要在TabLayout内创建ViewPager，但这根本不起作用。因此，我创建了以下 XML布局文件：

<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primaryColor"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextColor="@color/primaryTextColor" />

    </androidx.viewpager.widget.ViewPager>

</LinearLayout>

我用以下几行设置ViewPager ，以将TabLayout与ViewPager连接起来：

public class MyActivity extends AppCompatActivity {
    ...
    @Override
    public void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_layout);
        ...
        // tab layout
        ViewPager viewPager = findViewById(R.id.viewpager);
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(this, getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);
        ...
    }
    ...
}

我的适配器是FragmentPagerAdapter

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context context;

    public MyFragmentPagerAdapter(Context context, FragmentManager fm) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        if (position == 0) {
            return new MyFragment1();
        } else {
            return new MyFragment2();
        }
    }

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return context.getString(R.string.building);
            case 1:
                return context.getString(R.string.buff);
            default:
                return null;
        }
    }
}

我的Fragment之一如下：

public class MyFragment1 extends Fragment {

    public MyFragment () {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_building, container, false);
    }

}

下面是一张图片：

official documentation

问题

那为什么TabLayout根本没有被填充？我正在使用Android Studio，而Design Manager仅向我显示一个空的TabLayout和ViewPager。我猜想它会预编译TabLayout，但它是空的...

请帮助我，因为我坚持这个话题。我真的很想这样编码，以受益于滑动标签和内容。

非常感谢！

Answer 1

将您的TabLayout放入ViewPager内，如下所示。

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <com.google.android.material.tabs.TabLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/colorPrimaryDark"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorPrimaryLight"
        app:tabMaxWidth="0dp"
        app:tabMode="scrollable"
        app:tabRippleColor="@color/colorPrimaryLight"
        app:tabSelectedTextColor="@color/colorPrimaryLight"
        app:tabTextColor="@android:color/white" />
</androidx.viewpager.widget.ViewPager>

确保将android:layout_height中的TabLayout设置为wrap_content。

将TabLayout放入ViewPager时，无需保持下面几行：

TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);

代码中的所有其他内容都是正确的。
此外，现在我看到您的代码，您的layout_height中的TabLayout设置为match_parent，因此TabLayout占用了屏幕的整个空间，同样，在您的XML中，ViewPager的高度不加任何限制，也没有容器可以容纳ViewPager和TabLayout（例如LinearLayout，FrameLayout等）。

Answer 2

这里是我的一个项目的示例。创建并填充ViewPager，如下所示：

 <androidx.viewpager.widget.ViewPager
    android:id="@+id/loginViewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@id/loginTitle">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/loginTabContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabRippleColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextAppearance="@style/TabLayoutTheme">

        <com.google.android.material.tabs.TabItem android:text="first tab" />
        <com.google.android.material.tabs.TabItem android:text="second tab" />

    </com.google.android.material.tabs.TabLayout>
</androidx.viewpager.widget.ViewPager>

然后在您的活动中创建一个FragmentStatePagerAdapter来决定在每个页面中返回什么。我的代码在kotlin中，但是Java版本是相同的：

    private inner class ScreenSlidePagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
    override fun getCount(): Int = NUM_PAGES
    override fun getItem(position: Int): Fragment = when (position) {
        1 -> FirstFragment()
        0 -> SecondFragment()
        else -> FirstFragment()
    }

    override fun getPageTitle(position: Int): CharSequence? {
        return when (position) {
            0 -> "First Title"
            1 -> "Second Title"
            else -> "First Title"
        }
    }
}

最后在您的活动中：

    val pagerAdapter = ScreenSlidePagerAdapter(supportFragmentManager)
    loginViewPager.adapter = pagerAdapter

Answer 3

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

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabGravity="fill"
        style="@style/Base.Widget.Design.TabLayout"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

viewPager = (ViewPager)rootView. findViewById(R.id.viewpager);
  ViewPagerAdapter adapter = new ViewPagerAdapter(getFragmentManager());
    adapter.addFragment(new FragAllONE(), "ONE");
    adapter.addFragment(new FragAllTWO(), "TWO");
    viewPager.setAdapter(adapter);
    viewPager.setOffscreenPageLimit(1);
    viewPager.setCurrentItem(0);
    viewPager.addOnPageChangeListener(this);

    tabLayout = (TabLayout)rootView. findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

private class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

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

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

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        Object object = super.instantiateItem(container, position);
        if (object instanceof Fragment) {
            Fragment fragment = (Fragment) object;
            String tag = fragment.getTag();

        }
        return object;
    }

    public void restoreState(Parcelable state, ClassLoader loader) {

    }

    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }

}

Answer 4

我在另一个线程Use Tab layout in MVVM architecture with the data binding library上找到了解决方案。我正在使用Android数据绑定，因此未将TabLayout分配给ViewPager。因此我的代码是正确的，但与数据绑定无关。

不过，谢谢您在这里的帖子！

TabLayout根本不会填充ViewPager

4 个答案: