fragment嵌套fragment+viewpager实现顶部导航栏

对于这种界面大家都很熟悉，上面的标题栏滑动或点击的时候可选择不同的界面，下面的导航栏点击可切换不同的界面，这样的效果可以在一个Acitivity里面加载最多的页面：

对于这样的界面如何实现呢，其实就是Fragment的嵌套，点击下方的音乐按钮的时候会加载上面包括标题栏的Fragment界面，这个Fragment界面嵌套在ViewPager中，又包括了期刊、单曲等Fragment界面，下面我用自己的方法实现了这个效果：

首先是主界面的布局文件activity_main.xml，其中的FrameLayout是用来盛放ViewPager的容器

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="9">
        </FrameLayout>
    
        <RelativeLayout

            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <RadioGroup
                android:id="@+id/radio"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:checkedButton="@+id/button01"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/button01"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="#2bccfc"
                    android:button="@null"
                    android:gravity="center"
                    android:text="音乐" />

                <RadioButton
                    android:id="@+id/button02"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:gravity="center"
                    android:text="社区" />

                <RadioButton
                    android:id="@+id/button03"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:gravity="center"
                    android:text="我的" />
            </RadioGroup>
        </RelativeLayout>

</LinearLayout>

然后第一个页面的布局是fragment01.xml，上面标题栏+Viewpager

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/frag01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ff735c"
            android:text="期刊" />

        <Button
            android:id="@+id/frag02"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffffff"
            android:text="单曲" />

        <Button
            android:id="@+id/frag03"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffffff"
            android:text="文章" />

        <Button
            android:id="@+id/frag04"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffffff"
            android:text="活动" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />


</LinearLayout>

第二个界面和第三个界面由于和第一个界面类似，就只加了一个textview来标识了，具体的就不给出来了。

然后是在MainActivity去加载这三个界面，就是Fragmen最常见t的切换，点击下方的按钮切换页面

public class MainActivity extends FragmentActivity {

    private Button button01, button02, button03;
    private ViewPager viewPager;
    private RadioGroup radioGroup;

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

    private void initFragment() {

        FragmentManager ft = getSupportFragmentManager();
        FragmentTransaction fm = ft.beginTransaction();
        fm.replace(R.id.frame, new Fragment01());
        fm.commit();
    }
    
    private void initView() {

        button01 = (Button) findViewById(R.id.button01);
        button02 = (Button) findViewById(R.id.button02);
        button03 = (Button) findViewById(R.id.button03);
        radioGroup = (RadioGroup) findViewById(R.id.radio);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction ft = fm.beginTransaction();
                initBtn();
                switch (checkedId) {
                    case R.id.button01:
                        button01.setBackgroundColor(Color.parseColor("#2bccfc"));
                        ft.replace(R.id.frame, new Fragment01());
                        break;
                    case R.id.button02:
                        button02.setBackgroundColor(Color.parseColor("#2bccfc"));
                        ft.replace(R.id.frame, new Fragment02());
                        break;
                }
                ft.commit();

            }
        });
    }

    private void initBtn() {
        button01.setBackgroundColor(Color.parseColor("#ffffff"));
        button02.setBackgroundColor(Color.parseColor("#ffffff"));
        button03.setBackgroundColor(Color.parseColor("#ffffff"));

    }

}

然后在第一个界面中滑动或点击的时候会切换不同的界面，这些不同界面同样是用Fragment来加载的，这些Fragment界面也要一个一个去实现，我这里都是用了最简单的界面来测试的，在代码中就直接使用了

public class Fragment01 extends Fragment implements ViewPager.OnPageChangeListener,View.OnClickListener{

    private List<Fragment> list;
    private View view;
    private ViewPager viewPager;
    private Button button01,button02,button03,button04;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        view=inflater.inflate(R.layout.fragment01,container,false);
        initView();
        return view;
    }

    private void initView() {
        viewPager=(ViewPager)view.findViewById(R.id.viewpager01);

        list=new ArrayList<>();
        button01=(Button)view.findViewById(R.id.frag01);
        button02=(Button)view.findViewById(R.id.frag02);
        button03=(Button)view.findViewById(R.id.frag03);
        button04=(Button)view.findViewById(R.id.frag04);

        button01.setOnClickListener(this);
        button02.setOnClickListener(this);
        button03.setOnClickListener(this);
        button04.setOnClickListener(this);

        //这些界面要也要一个一个先去实现
        list.add(new Frag01());
        list.add(new Frag02());
        list.add(new Frag03());
        list.add(new Frag04());

        viewPager.setAdapter(new FragmentAdapter(getFragmentManager(),list));
        viewPager.setOnPageChangeListener(this);
        viewPager.setCurrentItem(0);

    }

    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }

    @Override
    public void onPageSelected(int i) {
        initBtnListener();
        switch (i){
            case 0:
                button01.setBackgroundColor(Color.parseColor("#ff735c"));
                break;
            case 1:
                button02.setBackgroundColor(Color.parseColor("#ff735c"));
                break;
            case 2:
                button03.setBackgroundColor(Color.parseColor("#ff735c"));
                break;
            case 3:
                button04.setBackgroundColor(Color.parseColor("#ff735c"));
                break;
        }

    }

    @Override
    public void onPageScrollStateChanged(int i) {

    }

    @Override
    public void onClick(View v) {
        initBtnListener();
        switch (v.getId()){
            case R.id.frag01:
                button01.setBackgroundColor(Color.parseColor("#ff735c"));
                viewPager.setCurrentItem(0);
                break;
            case R.id.frag02:
                button02.setBackgroundColor(Color.parseColor("#ff735c"));
                viewPager.setCurrentItem(1);
                break;
            case R.id.frag03:
                button03.setBackgroundColor(Color.parseColor("#ff735c"));
                viewPager.setCurrentItem(2);
                break;
            case R.id.frag04:
                button04.setBackgroundColor(Color.parseColor("#ff735c"));
                viewPager.setCurrentItem(3);
                break;
        }
    }

    private void initBtnListener(){

        button01.setBackgroundResource(R.color.color_white);
        button02.setBackgroundResource(R.color.color_white);
        button03.setBackgroundResource(R.color.color_white);
        button04.setBackgroundResource(R.color.color_white);
    }
}

上面ViewPager的适配器代码如下，只要传入想要滑动的Fragment的集合即可，实现如下

public class FragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> list;

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

    public FragmentAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.list = list;
    }

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

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

这样第一个界面的效果就已经实现了，其他的界面的实现类似，然后效果图是这样的，前两张图是第一个界面的，第三张图是第二个界面的