嵌套的操作栏选项卡(使用ViewPager)

时间:2016-10-26 12:23:42

标签: android android-studio android-viewpager android-tabs android-tabbed-activity

我有一个使用Action Bar标签的项目(使用ViewPager)。 在它们之间滑动时,标签移动非常顺畅,但我需要在TAB 2中添加两个子标签,然后移动到下一个标签或当然返回,就像在Glassdoor或Flipboard上一样。

请帮忙。

Glassdoor My App

MainActivity

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 个答案:

答案 0 :(得分:8)

我想出来了。 我还在Github上发布了一个演示项目 enter image description here

在MainActivity中,你需要为你想要的那个返回一个新的片段&#34;嵌套&#34;像这样:

@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>

答案 1 :(得分:2)

看看这个答案 这可能会有所帮助

ViewPager nested in ViewPager

同时添加子选项卡您可以在侦听器中添加这样的条件,以便移动到下一个选项卡

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

这是移动到上一个标签

if(mPager.getCurrentItem() ==0)
 mParentPager.setCurrentItem()=mParentPager.getCurrenItem()-1
相关问题