Android 使用 ViewPager 和 TabLayout 包装内容

Question

我有这种情况：

一个使用 ViewPager 和 TabLayout 的 Fragment，它占据了整个屏幕的宽度。像这样：

correctly formatted tabs

到目前为止，一切都很好。但在某些时候，选项卡会与 wrap-content 保持一致并集中，如下所示：

wrongly formatted tabs

这不可能发生，我不知道为什么会发生。它应该是 match_parent，就像第一张图片显示的那样。

如果有人可以帮助我，我真的很感激。下面是片段的代码和xml：

public class RotativeInventorySupplyUDFragment extends AbstractNavFragment {

    private FragmentRotativeInventorySupplyBinding binder;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        binder = FragmentRotativeInventorySupplyBinding.inflate(inflater, container, false);
        return binder.getRoot();
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        binder.viewPager.setAdapter(new RotativeInventorySupplyUDFragment.PageAdapterInternal(getChildFragmentManager()));
        binder.viewPager.setOffscreenPageLimit(2);
    }

    @Override
    public void onAttach(@NonNull Context context) {
        super.onAttach(context);

        requireActivity().getOnBackPressedDispatcher().addCallback(this, new OnBackPressedCallback(true) {
            @Override
            public void handleOnBackPressed() { saveAndExit(); }
        });
    }

    public void navigateToCountFragment() {
        navigateTo(R.id.action_rotativeInventorySupplyUDFragment2_to_rotativeInventorySupplyCountFragment);
    }

    public void navigateToDetailFragment() {
        navigateTo(R.id.action_rotativeInventorySupplyUDFragment2_to_rotativeInventorySupplyDetailFragment);
    }

    private void navigateTo(int navigationId) {
        navigate(navigationId);
    }

    public void saveAndExit() {
        new LBMDialog.Builder(requireContext())
                .setTitle(translate("rotativeInventory.supply.attention"))
                .setCancelable(false)
                .setContent(translate("rotativeInventory.supply.stilUDPending") + "\n\n" + translate("rotativeInventory.supply.exitOrCount"))
                .setPrimaryFullWidthButton(new LBMDialog.LBMButtonInfo(translate("rotativeInventory.supply.continueCounting")) {
                    @Override
                    public void onClick() { }
                })
                .setSecondarySemiTransaparentButton(new LBMDialog.LBMButtonInfo(translate("rotativeInventory.supply.saveAndExit")) {
                    @Override
                    public void onClick() { navPop(); }
                })
                .setCloseIconVisibility(View.GONE)
                .swapButtons()
                .show(getChildFragmentManager());
    }

    @Override
    protected void doOnViewCreate() {}

    private class PageAdapterInternal extends FragmentStatePagerAdapter {

        public PageAdapterInternal(@NonNull FragmentManager fm) {
            super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new IrcSupplyUDFragment(IrcSupplyUDFragment.FragmentType.PENDING);
                case 1:
                    return new IrcSupplyUDFragment(IrcSupplyUDFragment.FragmentType.COMPLETED);
                default:
                    throw new IllegalStateException("Unexpected value: " + position);
            }
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return translate("rotativeInventory.supply.pendingDUs");
                case 1:
                    return translate("rotativeInventory.supply.completedDUs");
                default:
                    return "";
            }
        }

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


<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:ignore="MissingConstraints">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.helper.widget.Flow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:constraint_referenced_ids="viewPager"/>

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

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:tabTextAppearance="@style/TabLayoutCustomTextAppearance"/>

        </androidx.viewpager.widget.ViewPager>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Answer 1

由于您没有发布布局xml，我假设您使用的是MaterialTabLayout，您必须执行以下操作以满足您的要求：

在您的 TabLayout 中，

1. 输入android:layout_width="match_parent"，这样布局就占据了其父级的全宽。

2. 将app:tabMode="fixed" 放入您的 TabLayout 中，这是填充选项卡所必需的。

3. 输入app:tabGravity="fill"，这将占用每个TabItem的可用空间。

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill">
   
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 1" />
   
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 2" />
   
    </com.google.android.material.tabs.TabLayout>