嵌套的操作栏选项卡(带有ViewPager)

9
我有一个使用Action Bar Tabs(带ViewPager)的项目。 当在选项卡之间滑动时,选项卡移动非常流畅,但我需要添加两个子选项卡,在第二个选项卡中,然后像Glassdoor或Flipboard一样移动到下一个选项卡或返回上一个选项卡。 请帮忙。

Glassdoor My App

主活动

public class MainActivity extends AppCompatActivity {


private SectionsPagerAdapter mSectionsPagerAdapter;
private ViewPager mViewPager;

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

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
    mViewPager = (ViewPager) findViewById(R.id.container);
    mViewPager.setAdapter(mSectionsPagerAdapter);

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

}


public class SectionsPagerAdapter extends FragmentPagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return Tab1Fragment.newInstance();
                case 1:
                    return Tab2Fragment.newInstance();
                default:
                    return Tab3Fragment.newInstance();
            }
    }

    @Override
    public int getCount() {
        // Show 3 total pages.
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "Tab 1";
            case 1:
                return "Tab 2";
            case 2:
                return "Tab 3";
        }
        return null;
    }
}
}

activity_main.xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Tab2Fragment- 我想嵌套SubTab1Fragment和SubTab2Fragment

public class Tab2Fragment extends Fragment {   
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";


public Tab2Fragment() {
    // Required empty public constructor
}


// TODO: Rename and change types and number of parameters
public static Tab2Fragment newInstance() {
    Tab2Fragment fragment = new Tab2Fragment();

    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {

    }
}

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

}

fragment_tab2.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.r3dm4n.testprojectapp.Tab2Fragment">

<!-- TODO: Update blank fragment layout -->
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="@string/hello_blank_fragment" />

2个回答

9

我已经弄清楚了。我还在Github上发布了一个演示项目。

enter image description here

在MainActivity中,您需要返回一个新的Fragment来实现所需的“嵌套”,如下所示:

@Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                return Tab1Fragment.newInstance();
            case 1:
                return new Tab2Fragment();
            default:
                return Tab3Fragment.newInstance();
        }

在TAB2片段中,如果你想要其他嵌套的片段进行以下更改:
public class Tab2Fragment extends Fragment {

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


    View view = inflater.inflate(R.layout.fragment_tab2, container, false);
    ViewPager mViewPager = (ViewPager) view.findViewById(R.id.container_main);
    SectionsPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getChildFragmentManager());
    mViewPager.setAdapter(mSectionsPagerAdapter);

    return view;

}


private class SectionsPagerAdapter extends FragmentPagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return Nest1Fragment.newInstance(1);
            default:
                return Nest2Fragment.newInstance(2);
        }

    }

    @Override
    public int getCount() {
        // Show 4 total pages.
        return 2;
    }

    @Override
    public CharSequence getPageTitle(int position) {

        switch (position) {
            case 0:
                return "Nested 1";
            default:
                return "Nested 2";
        }


    }
}


}

fragment_tab2.xml

<android.support.v4.view.ViewPager
    android:id="@+id/container_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:layout_scrollFlags="scroll|enterAlways">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary" />
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">
    </android.support.v7.widget.Toolbar>
</android.support.v4.view.ViewPager>


@ r3dm4n,我尝试了你的代码,但它没有显示嵌套的标签页。 - Hardik Mehta
我在Github上发布了一个链接,其中包含一个完整的可工作项目。 - r3dm4n
@r3dm4n 我从那里下载了。 - Hardik Mehta
@r3dm4n 没有错误,但嵌套的选项卡在Tab2fragment中没有显示。 - Hardik Mehta
让我们在聊天中继续这个讨论 - Hardik Mehta
它们对我来说就像屏幕截图中一样显示出来。 - r3dm4n

2

看一下这个答案,它可能会有所帮助

ViewPager嵌套在ViewPager中

另外,在添加子选项卡时,你可以在移动到下一个选项卡的监听器中添加类似这样的条件。

if(mPager.getCurrentItem() >=2)
 mParentPager.setCurrentItem()=mParentPager.getCurrenItem()+1

这是用于切换到前一个选项卡的代码

if(mPager.getCurrentItem() ==0)
 mParentPager.setCurrentItem()=mParentPager.getCurrenItem()-1

谢谢,但不幸的是它并没有对我有太大帮助。 - r3dm4n

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接