android - 使用多级选项卡自定义选项卡布局

Question

您好，我正在尝试为我的自定义布局添加一个子标签布局，如下所示:

我已经成功添加了 tablayout 但是:

如何添加如下所示的子布局？？正如我们在图片中看到的，第一个子布局与第一个选项卡布局相关

我的layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.tiger.alahedclub.activity.navigation">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:popupTheme="@style/generalnotitle"
     >
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            app:titleTextColor="@android:color/black"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/yellow"
            app:popupTheme="@style/generalnotitle">



            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">


            <TextView
                android:id="@+id/action_bar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_centerHorizontal="true"
                android:text="@string/app_name"
                android:textColor="@android:color/black"
                android:textSize="24sp" />


            </RelativeLayout>
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:background="@color/yellow"
            app:tabTextColor="@android:color/black"
            app:tabTextAppearance="@style/MineCustomTabText"
            app:tabSelectedTextColor="#1B5E20"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorHeight="2dp"
            app:tabMaxWidth="0dp"
            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"
        android:background="#B71C1C"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

更新:

持有 viewpager 的 Activity :

public class Detail_match extends AppCompatActivity {
    private TabLayout tabLayout,tabLayout2;
    private ViewPager viewPager;

    int onStartCount = 0;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        onStartCount = 1;
        if (savedInstanceState == null) // 1st time
        {
            this.overridePendingTransition(R.anim.anim_slide_in_left,
                    R.anim.anim_slide_out_left);
        } else // already created so reverse animation
        {
            onStartCount = 2;
        }
        setContentView(R.layout.activity_detail_match);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);


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


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

        tabLayout2 = (TabLayout) findViewById(R.id.tabs2);


    }


    @Override
    protected void onPause() {
        super.onPause();
    }
    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();
        if (onStartCount > 1) {
            this.overridePendingTransition(R.anim.anim_slide_in_right,
                    R.anim.anim_slide_out_right);

        } else if (onStartCount == 1) {
            onStartCount++;
        }

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new FiveFragment(), getString(R.string.lineup));
        adapter.addFrag(new SixFragment(), getString(R.string.stats));
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<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();
        }

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

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

我的 fragment five.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_post"
                android:layout_width="match_parent"
                    android:layout_height="wrap_content" />


            </ScrollView>

        </android.support.v4.widget.SwipeRefreshLayout>

    </RelativeLayout>



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

Answer 1

在您的 Viewpager fragment 中:您正在返回 Fragment getItem(int position)

你需要在xml中添加一个Tablayout和一个viewpager

因此在您的 FiveFragment xml 中:

 <LinearLayout
    android:id="@+id/main_layout"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <!-- our tablayout to display tabs  -->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <!-- View pager to swipe views -->
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"/>

</LinearLayout>

然后在 FiveFragment 的 onCreateView() 中使用 Tablayout 设置 viewpager..

喜欢:

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.your_layout, container, false);
    viewPager = (ViewPager) view.findViewById(R.id.pager);
    addTabs(viewPager);

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

}

private void addTabs(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager());
    adapter.addFrag(new Sublayout1(), "ONE");
    adapter.addFrag(new Sublayout2(), "TWO");
    viewPager.setAdapter(adapter);
}

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<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();
    }

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

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

因此每个 Fragment 都包含一个要控制的项目的嵌套选项卡。