Viewpager+Fragment 实现滑动切换显示内容

版权声明：本文为博主原创文章，未经博主允许不得转载。

简介：
Fragment+Viewpager+中间突出的底部导航栏
实现点击底部导航Tab切换一级fragment
一级fragment中嵌套viewpager滑动切换二级fragment并同时实现与上部title相应点击事件及底部横线切换的关联

效果如图：

切换后

底部导航栏布局已在上篇给出，需要请移步
http://blog.csdn.net/baidu_33424803/article/details/51428003

以下是主要代码：
FragmentActivity管理多个fragment页面

public class MainActivity extends FragmentActivity implements OnClickListener {



    private RadioButton doujinBtn;
    private RadioButton cosBtn;
    private RadioButton homeBtn;
    private RadioButton photoBtn;
    private RadioButton cvBtn;
    private ImageView homeIvBg;

    private DoujinFragment doujin;
    private CosFragment cos;
    private HomeFragment home;
    private PhotoFragment photo;
    private CVFragment CV;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FragmentTransaction ft=this.getSupportFragmentManager().beginTransaction();
        setContentView(R.layout.activity_main);
        initView();
        setOnclick();
    }


    private void initView(){

        doujinBtn = (RadioButton) findViewById(R.id.tab_same);
        cosBtn = (RadioButton) findViewById(R.id.tab_cos);
        homeBtn = (RadioButton) findViewById(R.id.tab_home_bg);
        photoBtn = (RadioButton) findViewById(R.id.tab_photo);      
        cvBtn = (RadioButton) findViewById(R.id.tab_cv);
        homeIvBg = (ImageView) findViewById(R.id.Iv_home_bg);
        //设置默认显示的fragment==home
        selectStyle(R.id.tab_home_bg);

    }

    private void setOnclick(){
        doujinBtn.setOnClickListener(this);
        cosBtn.setOnClickListener(this);
        homeBtn.setOnClickListener(this);
        photoBtn.setOnClickListener(this);
        cvBtn.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        goneFragment();
        selectStyle(v.getId());
    }
    //根据具体点击切换显示对应fragment
        private void selectStyle(int ID) {
            boolean homeFlag=true;//true--默认蓝，false--白

            FragmentTransaction ft=getSupportFragmentManager().beginTransaction();
            switch (ID) {
            case R.id.tab_same:
                homeIvBg.setImageResource(R.drawable.home);
                //显示DoujinFragment
                if(doujin==null){
                    doujin=new DoujinFragment();
                    ft.add(R.id.FrameAct_FragmentGroup, doujin);
                }else{
                    ft.show(doujin);
                }

                break;
            case R.id.tab_cos:
                homeIvBg.setImageResource(R.drawable.home);
                if(cos==null){
                    cos=new CosFragment();
                    ft.add(R.id.FrameAct_FragmentGroup, cos);
                }else{
                    ft.show(cos);
                }
                break;
            case R.id.tab_home_bg:
                homeIvBg.setImageResource(R.drawable.home_sel);
                if(home==null){
                    home=new HomeFragment();
                    ft.add(R.id.FrameAct_FragmentGroup, home);
                }else{
                    ft.show(home);
                }
                break;
            case R.id.tab_photo:
                homeIvBg.setImageResource(R.drawable.home);
                if(photo==null){
                    photo=new PhotoFragment();
                    ft.add(R.id.FrameAct_FragmentGroup, photo);
                }else{
                    ft.show(photo);
                }
                break;
            case R.id.tab_cv:
                homeIvBg.setImageResource(R.drawable.home);
                if(CV==null){
                    CV=new CVFragment();
                    ft.add(R.id.FrameAct_FragmentGroup, CV);
                }else{
                    ft.show(CV);
                }
                break;
            }
            //提交
            ft.commit();
        }

        //隐藏所有fragment方法
        private void goneFragment(){
            FragmentTransaction ft=getSupportFragmentManager().beginTransaction();
            if(doujin!=null)
                ft.hide(doujin);
            if(cos!=null)
                ft.hide(cos);
            if(home!=null)
                ft.hide(home);
            if(photo!=null)
                ft.hide(photo);
            if(CV!=null)
                ft.hide(CV);
            ft.commit();
        }

}

首页fragment中viewpager管理的多个二级fragment以及相应切换

public class HomeFragment extends BaseFragment implements OnClickListener, OnPageChangeListener{

    private ViewPager vp;

    private HomepageFragemnt homepageFragment;
    private FollowFragment followFragment;
    private ArrayList<Fragment>fragmentsList;
    private HomeFragmentPagerAdapter pagerAdapter;


    private TextView lineTv;

    private TextView homeTv;

    private TextView followTv;

    private int currIndex=0;

    @Override
    public View initView() {
        View v=View.inflate(getActivity(), R.layout.fragment_home, null);
        vp=(ViewPager) f(R.id.home_VPGroup, v);
        lineTv = (TextView) f(R.id.Title_Line, v);
        homeTv = (TextView) f(R.id.title_left, v);  
        followTv = (TextView) f(R.id.title_right, v);
        return v;
    }

    @Override
    public void setOnclick() {
        vp.setOnPageChangeListener(this);
        homeTv.setOnClickListener(new MyOnClickListener(0));
        followTv.setOnClickListener(new MyOnClickListener(1));
    }

    @Override
    public void initList() {
        // TODO Auto-generated method stub
        fragmentsList=new ArrayList<Fragment>();
        homepageFragment=new HomepageFragemnt();
        followFragment=new FollowFragment();
        fragmentsList.add(homepageFragment);
        fragmentsList.add(followFragment);
        //关联适配器
        pagerAdapter=new HomeFragmentPagerAdapter(getChildFragmentManager(), fragmentsList);
        vp.setAdapter(pagerAdapter);
        vp.setOnPageChangeListener(this);
        //设置初始化的fragment
        selectLine(R.id.title_left);


    }

    //切换title下的线及对应fragment
    private void selectLine(int ID){
        RelativeLayout.LayoutParams lp=(LayoutParams) lineTv.getLayoutParams();
        //FragmentTransaction ft=getFragmentManager().beginTransaction();
        switch(ID){
        case R.id.title_left:
            lp.addRule(RelativeLayout.ALIGN_LEFT, R.id.title_left);
            lp.addRule(RelativeLayout.ALIGN_RIGHT, R.id.title_left);
            break;
        case R.id.title_right:
            lp.addRule(RelativeLayout.ALIGN_LEFT, R.id.title_right);
            lp.addRule(RelativeLayout.ALIGN_RIGHT, R.id.title_right);
            break;
        }
        lineTv.setLayoutParams(lp);
        lineTv.requestLayout();
    }

    public class MyOnClickListener implements View.OnClickListener{
        private int index=0;

        public MyOnClickListener(int i){
            index=i;
        }
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            selectLine(v.getId());
            vp.setCurrentItem(index);
        }

    }


    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onPageSelected(int arg0) {
        // TODO Auto-generated method stub
        switch (arg0) {
        case 0:
            if(currIndex==1){
                selectLine(R.id.title_left);
            }
            break;

        case 1:
            if(currIndex==0){
                selectLine(R.id.title_right);
            }
            break;
        }
        currIndex=arg0;
    }

}

具体显示效果：

切换后：

源码下载地址：http://download.csdn.net/detail/baidu_33424803/9522087

不足之处欢迎大家指正。 本文为博主原创，转载请知会博主并注明出处，谢谢！