Fragment的嵌套和侧滑菜单DrawerLayout加标签页的使用

先来看一下效果图吧：

             效果图1                                                                                                                             效果图2

标签页用的ToolBar+SlidingTabLayout                                                                     另一种效果：标签页用的PagerTabStrip

                                                                                                                            因为是写的两个demo，所以界面不大一致，但是基本功能差不多，只是标签页的效果不一样。

                      

功能介绍：

1、有侧滑菜单DrawerLayout作为主菜单，可以切换fragment_parent1和fragment_parent2

2、fragment_parent1下又有三个子fragment，通过标签页滑动切换

主要知识点：

1、侧滑菜单：DrawerLayout

2、fragment的嵌套：关键代码:getChildFragmentManager()

3、标签页：ToolBar +SlidingTabLayout +ViewPager或PagerTabStrip+ViewPager,还有一个PagerTitleStrip,和PagerTabStrip差不多，只是没有下划线。

下面开始：

首先是侧滑

MainActivity的布局文件： activity_main.xml

最外层使用：

android.support.v4.widget.DrawerLayout

一开始显示在屏幕中间的用一个布局包裹起来，放在最上面

侧滑部分也用一个布局包裹起来，放在中间布局的下方

注意侧滑部分的布局要加上：

android:layout_gravity="left"

或者是“start”。

当然，如果你想要从右边侧滑的，只需将left改为right（或者是“end”）即可。

如果你左右侧滑都想加，记得添加顺序（1、中间内容部分 2、左边侧滑部分 3、右边侧滑部分）

说了这么多，可能没理解，来看一下 activity_maim.xml的完整代码吧：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEE"
    tools:context="com.graygrass.myfragmentnest.MainActivity">

    <!--屏幕正中的部分-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/title" />

        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <!--左边的侧滑-->
    <LinearLayout
        android:id="@+id/linearLayout_left"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="@android:color/white"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn_left1"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:text="显示fragmentParent1" />

        <Button
            android:id="@+id/btn_left2"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:text="显示fragmentParent2" />
    </LinearLayout>

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

里面include的一个title的布局，只是标题栏的一张图片（为了让用户知道是有侧滑功能或者说方便点出侧滑菜单）和一段文字。

由于屏幕的中间放的是fragment，所以用FrameLayout来盛放。

到这里运行就可以拉出侧滑菜单了。

然后是MainActivity中：

实例化控件等等。。。

 DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

给标题的图片加上点击事件，方便点出侧滑菜单：

drawerLayout.openDrawer(Gravity.LEFT);

关闭侧滑菜单：

drawerLayout.closeDrawer(Gravity.LEFT);

还有一个方法，用于切换fragment_parent :

private void addFragmentToStack(Fragment fragment) {
       getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, fragment).commit();
    }

在左边的侧滑菜单的按钮中加上：

 @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.actionbar_img:
                drawerLayout.openDrawer(Gravity.LEFT);
                break;
            case R.id.btn_left1:
                drawerLayout.closeDrawer(Gravity.LEFT);
                addFragmentToStack(new FragmentParent1());
                break;
            case R.id.btn_left2:
                drawerLayout.closeDrawer(Gravity.LEFT);
                addFragmentToStack(new FragmentParent2());
                break;
        }
    }

其中的两个FragmentParent，   FragmentParent2没什么可讲的，里面只是有一行字而已。

FragmentParent1里面又包含了三个子Fragment，下面来看下布局：  fragment_parent1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/toolbar_tab" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

其中的toolbar_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary">

    <com.graygrass.myfragmentnest.layout.SlidingTabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.Toolbar>

使用SlidingTabLayout要添加两个类： SlidingTabLayout， 与SlidingTabStrip，可以去网上下载放进项目。

因为要用到ViewPager，所以需要写一个适配器Adapter：

与通常使用的Adapter不同的是，需要重写getPageTitle方法，将每个标签的标题放到SlidingTabLayout上。

public class ViewPagerAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> list;
    private Context context;
    private String[] titles={"fragment_child1_1","fragment_child1_2","fragment_child1_3"};
    public ViewPagerAdapter(FragmentManager fm, List<Fragment> list, Context context) {
        super(fm);
        this.list = list;
        this.context = context;
    }

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

    @Override
    public int getCount() {
        if(list!=null)
            return list.size();
        return 0;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

在FragmentParent1中，将Fragment_Child加入到List<Fragment> list 中：

注意此处FragmentManager须填写getChildFragmentManager()，因为是fragment的嵌套。

list = new ArrayList<>();
        list.add(new FragmentChild1_1());
        list.add(new FragmentChild1_2());
        list.add(new FragmentChild1_3());
        ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager(), list, view.getContext());
        viewPager.setAdapter(adapter);

记得将ViewPager加入SlidingTabLayout里面：

tabLayout.setViewPager(viewPager);

还可以设置下划线的颜色：

tabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
            @Override
            public int getIndicatorColor(int position) {
                return Color.WHITE;
            }
        });

也可以自定义tab上文字显示的样式：

tabLayout.setCustomTabView(R.layout.tab_text, 0);//注意这句一定要放在setViewPager前面

此处注意，由于我测试的标题文字都较长，故刚好可以占满屏幕，如果文字较短，则默认显示的会很短，即后面会有一段空白，如图：

此时可在自定义的文字样式 R.layout.tab_text中设android:layout_width="0dp"      android:layout_weight="1"使他们权重相等，各占相等的比重。

自定义背景颜色：

tabLayout.setBackgroundColor(getResources().getColor(R.color.title_green));

还有其他的可以去网上搜索。

至此，效果图一的效果就出来了。

效果图二与之的区别在 fragment_parent1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagerTabStrip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.v4.view.ViewPager>
</LinearLayout>

apapter 同样要重写 getPageTitle方法，在FragmentParent1中viewPager.setAdapter(adapter)后的操作就不需要了。

至此，效果图二的效果就出来了。

源码下载：源码下载