安卓.另一个选项卡布局的选项卡内的选项卡布局 [英] Android. Tablayout inside a tab of another tablayout

问题描述

是否可以在另一个选项卡布局的选项卡内有一个选项卡布局?我创建了以下图像以获得更好的解释.所需的滑动动作如图所示.

Is it possible to have a tablayout inside a tab of another tablayout? I have created the following image for a better explanation. The slide movement desired is as it is described in the image.

我的主要活动

Xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    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="fixed"
            app:tabGravity="fill"/>
    </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"  />

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

代码

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    private final static int[] tabIcons = {
            R.drawable.ic_tab_1,
            R.drawable.ic_tab_2,
            R.drawable.ic_tab_3,
            R.drawable.ic_tab_4
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        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]);
        tabLayout.getTabAt(3).setIcon(tabIcons[3]);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new Fragment1());
        adapter.addFrag(new Fragment2());
        adapter.addFrag(new Fragment3());
        adapter.addFrag(new Fragment4());
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {

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

        ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

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

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

        void addFrag(Fragment fragment) {
            mFragmentList.add(fragment);
        }
    }
}

片段

Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/holo_blue_light"
    android:id="@+id/fragment_1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="myContext">

    <TextView
        android:text="It is just a text."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

代码

public class Fragment1 extends Fragment {

    public Fragment1() { }

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

Fragment2_A 和 Fragment2_B XML 和 Java 代码应该如何?

推荐答案

好的，所以在你的片段中你只有 TextView.现在为 fragment_2 放置另一个 TabLayout 和 ViewPager(你不需要 AppBar 和 Coordinator，它们将在 Activity 的父布局中已经存在)

ok, so inside your fragment you have only TextView. Now for fragment_2 put another TabLayout and ViewPager (you don't need AppBar, and Coordinator, they will be already there from parent layout of Activity)

frag2.xml

<LinearLayout
    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:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/frag2_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/frag2_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"  />
</LinearLayout>

您必须创建 Frag2 Fragment ，在 OnCreateView 内使用上述布局初始化，然后为 frag2_viewpager ViewPager 类只为 frag2a.xml 和 frag2b.xml Fragments 设置另一个适配器，他们可能只假设 TextView 或其他.TabLayout 将放置在 Frag2 的上方(以及 Activity 中的一个，如图所示)

you have to create Frag2 Fragment , init with above layout inside OnCreateView and then for frag2_viewpager ViewPager class set another adapter for frag2a.xml and frag2b.xml Fragments only, they may have lets assume only TextViews or whatever. TabLayout will be placed above, inside Frag2 (and one in Activity as on pic)

这篇关于安卓.另一个选项卡布局的选项卡内的选项卡布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！