Android：如何构建多级选项卡

Posted 2023-04-15

【中文标题】Android：如何构建多级选项卡

【英文标题】：Android: How to build Multiplelevel Tabs

【发布时间】：2016-03-19 13:56:39

【问题描述】：

我想在 android 中创建多级标签。它应该遵循多级层次结构，或如图所示的嵌套选项卡理念。如有必要，请提供链接或网址。

【参考方案1】：

使用多层Android TabLayout，参考this。 TabLayout 是非常可定制的。例如添加标签，设置分隔高度，在标签中使用自定义视图。

【讨论】：

谢谢humblebee，它对我有用。虽然我在那里做了很多头脑风暴。感谢您提供链接。

多行在哪里？

您可以将一个内部视图作为另一个选项卡布局

【参考方案2】：

您应该使用 ViewPager 来执行此操作。下面的代码将帮助您在android中制作多级标签。

view_pager_main.xml

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <FrameLayout
        android:layout_
        android:layout_>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            style="@style/MyCustomTabLayout"
            android:layout_
            android:layout_
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_
        android:background="@android:color/white" />

    <TextView
        android:id="@+id/tvNoPlans"
        android:layout_
        android:layout_
        android:text="No Plans Available"
        android:textColor="@android:color/black"
        android:visibility="gone" />

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

view_pager_child.xml

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <FrameLayout
        android:layout_
        android:layout_>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout_child"
            style="@style/MyCustomTabLayout1"
            android:layout_
            android:layout_
            app:tabGravity="center"
            app:tabIndicatorColor="@color/btn_background"
            app:tabIndicatorHeight="3dp"
            app:tabMode="scrollable"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    </FrameLayout>

    <View
        android:layout_
        android:layout_
        android:background="@android:color/darker_gray"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_child"
        android:layout_
        android:layout_
        android:background="@android:color/white" />

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

ViewPagerMain.java

public class ViewPagerMain extends Fragment 

    ViewPager viewpager;
    TabLayout tabLayout;
    TextView tvNoPlans;

    View rootview;
    Fragment fr = null;

    ArrayList<String> cat_id = new ArrayList<String>();
    ArrayList<String> cat_name = new ArrayList<String>();

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 

        rootview = inflater.inflate(R.layout.view_pager_main, container, false);

        tvNoPlans = (TextView) rootview.findViewById(R.id.tvNoPlans);
        viewpager = (ViewPager) rootview.findViewById(R.id.viewpager);
        viewpager.setOffscreenPageLimit(3);

        tabLayout = (TabLayout) rootview.findViewById(R.id.tabLayout);

        cat_id.add(0,"1");
        cat_id.add(1,"2");

        cat_name.add(0,"Parent1");
        cat_name.add(1,"Parent2");

        setupViewpager(viewpager);
        tabLayout.post(new Runnable() 
            @Override
            public void run() 
                tabLayout.setupWithViewPager(viewpager);
            
        );

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

            
        );
        return rootview;
    

    public void setupViewpager(ViewPager viewPager) 

        ViewpagerAdapter adapter = new ViewpagerAdapter(getChildFragmentManager());

        for (int i = 0; i < cat_id.size(); i++) 
            Bundle bundle = new Bundle();
            bundle.putString("cat_id",cat_id.get(i));
            fr = new ViewPagerChild();
            fr.setArguments(bundle);
            adapter.addFrag(fr, cat_name.get(i));
        
        viewPager.setAdapter(adapter);
    

ViewPagerChild.java

public class ViewPagerChild extends Fragment 

    ViewPager viewPager_child;
    TabLayout tabLayout_child;
    SharedPreferences preferences;
    View rootview;
    String cat_id;

    ArrayList<String> subcat_id = new ArrayList<String>();
    ArrayList<String> subcat_name = new ArrayList<String>();

    Bundle bundle;
    Fragment fr = null;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        rootview = inflater.inflate(R.layout.view_pager_child, container, false);
        preferences = getActivity().getSharedPreferences(Constant.PREF_MAIN, 0);

        bundle = getArguments();
        cat_id = bundle.getString("cat_id");

        viewPager_child = (ViewPager) rootview.findViewById(R.id.viewpager_child);
        viewPager_child.setOffscreenPageLimit(10);

        tabLayout_child = (TabLayout) rootview.findViewById(R.id.tabLayout_child);

        subcat_id.add(0,"1");
        subcat_id.add(1, "2");

        subcat_name.add(0,"Child1");
        subcat_name.add(1,"Child2");

        setupViewpagerChild(viewPager_child);
        tabLayout_child.post(new Runnable() 
            @Override
            public void run() 
                tabLayout_child.setupWithViewPager(viewPager_child);
            
        );

        tabLayout_child.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() 
            @Override
            public void onTabSelected(TabLayout.Tab tab) 
                viewPager_child.setCurrentItem(tab.getPosition());
            

            @Override
            public void onTabUnselected(TabLayout.Tab tab) 

            

            @Override
            public void onTabReselected(TabLayout.Tab tab) 

            
        );
        return rootview;
    

    public void setupViewpagerChild(ViewPager viewPager_child) 
        ViewpagerAdapter adapter = new ViewpagerAdapter(getChildFragmentManager());

        for (int i = 0; i < subcat_id.size(); i++) 

            fr = new TabFragment();
            adapter.addFrag(fr, subcat_name.get(i));
        
        viewPager_child.setAdapter(adapter);
    

ViewpagerAdapter.java

public class ViewpagerAdapter extends FragmentPagerAdapter 

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

    public ViewpagerAdapter(FragmentManager manager)
        super(manager);
    

    @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 addFrag(Fragment fragment,String title)
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    

tab_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_>

    <TextView
        android:id="@+id/tv"
        android:layout_
        android:layout_
        android:gravity="center"
        android:text="Hello There!!!"/>

</LinearLayout>

TabFragment.java

public class TabFragment extends Fragment 

    View rootview;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        rootview = inflater.inflate(R.layout.fragment_tab, container, false);

        return rootview;