标题栏和导航栏的组合界面实现方法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();
}
}

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