我想制作可滚动的 TabWidget

问题描述

我正在为 TabHost 内容添加大量布局。

<TabHost
            android:id="@+id/tab_host"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <LinearLayout
                        android:id="@+id/tab4"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <include
                            layout="@layout/fragment_mask"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tab5"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <include
                            layout="@layout/fragment_mask"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tab6"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <include
                            layout="@layout/fragment_mask"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tab7"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <include
                            layout="@layout/fragment_mask"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tab8"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <include
                            layout="@layout/fragment_mask"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tab1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <include
                            layout="@layout/fragment_glass"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tab2"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <include
                            layout="@layout/fragment_hair"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tab3"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <include
                            layout="@layout/fragment_mask"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </LinearLayout>
                </FrameLayout>

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>
        </TabHost>

但是,并非每个 Tabs 都正确可见。所以,我想让它滚动。我可以通过 TabLayout 完成。但是,我想从 layouts 访问那些 MainActivity。所以,我不能使用 TabLayoutViewPager。所以,我必须使 TabWidget 可滚动。怎么做?或者,有没有类似的图书馆?

解决方法

你可以使用 tablayout 和 viewpager 来做到这一点

Layout.xml 文件

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/_32sdp"
        android:layout_margin="@dimen/_8sdp"
        android:layout_marginLeft="8sp"
        android:background="@drawable/tab_layout_background"
        app:tabBackground="@drawable/tab_layout_selector"
        app:tabIndicatorHeight="0dp"
        app:tabMode="auto"
        app:tabPaddingEnd="16dp"
        app:tabPaddingStart="16dp"
        app:tabRippleColor="@null"
        app:tabSelectedTextColor="@color/white"
        app:tabTextAppearance="@style/TabTextAppearance" />
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tabLayout"
        android:layout_marginLeft="@dimen/_8sdp"
        android:layout_marginRight="@dimen/_8sdp"/>
</RelativeLayout>

主类文件

tabLayout.addTab(tabLayout.newTab().setText(getResources().getString(R.string.sales_order)));
    tabLayout.addTab(tabLayout.newTab().setText(getResources().getString(R.string.buyer_info)));

    final HomeAdapter adapter = new HomeAdapter(this,getSupportFragmentManager(),tabLayout.getTabCount());
    viewPager.setAdapter(adapter);

    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

    tabLayout.addOnTabSelectedListener(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) {

        }
    });

还有适配器

public class HomeAdapter extends FragmentPagerAdapter {

private int totalTabs;


public HomeAdapter(MainActivity context,FragmentManager fm,int totalTabs) {
    super( fm );
    this.totalTabs = totalTabs;
}

@NonNull
@Override
public Fragment getItem(int position) {
    switch (position){
        case 0:
            return new SalesListFragment();
        case 1:
            return new BuyerListFragment();
        default:
            return null;
    }
}

// this counts total number of tabs
@Override
public int getCount() {
    return totalTabs;
}

}

希望它是充满活力的。