标题栏按钮滑动或点击切换fragment

前阵子做项目需要用到标题栏点击按钮切换fragment，就像QQ现在的聊天和电话那样的效果点击就切换到另外一个界面，在网上也没有找到现成的代码，索性自己写了一个demo。只是自己一个人写，也不知道自己写的怎么样，刚好现在也没有什么事，记录下来以后当成一个笔记。

想象中做成的效果：

做完的demo（还真不是一般的丑，哈哈哈哈）：

这下面是MainActivity的代码：

public class MainActivity extends FragmentActivity implements View.OnClickListener {
    private Button topBtn01, topBtn02;
    private LinearLayout topBtnContainer;
    private ViewPager mViewPager;
    private TabPagerAdapter mPagerAdapter;

    ArrayList<Fragment> fragments = new ArrayList<Fragment>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //如果有actionbar则隐藏
        ActionBar bar = this.getActionBar();
        if(bar != null){
            bar.hide();
        }

        init();
    }

    private void init(){
       GroupChildrenCollect groupChildrenCollect = new GroupChildrenCollect(); //收藏界面的fragment
        GroupChildrenHasBuy groupChildrenHasBuy = new GroupChildrenHasBuy(); //已拼界面的fragment
        fragments.add(groupChildrenCollect);
        fragments.add(groupChildrenHasBuy);

        topBtn01 = (Button) this.findViewById(R.id.id_topBtn01);
        topBtn02 = (Button) this.findViewById(R.id.id_topBtn02);
        topBtnContainer = (LinearLayout) this.findViewById(R.id.id_topBtn_container);
        topBtn01.setOnClickListener(this);
        topBtn02.setOnClickListener(this);
        mViewPager = (ViewPager) this.findViewById(R.id.id_viewPager);
        mPagerAdapter = new TabPagerAdapter(this.getSupportFragmentManager(), fragments);

        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.invalidate();
        mPagerAdapter.notifyDataSetChanged();
    }

    /*
    * 自定义FragmentStatePagerAdapter适配器来显示滑动Fragment
    * */
    private class TabPagerAdapter extends FragmentStatePagerAdapter implements
            ViewPager.OnPageChangeListener {

        private ArrayList<Fragment> objects;

        public TabPagerAdapter(FragmentManager fm, ArrayList<Fragment> objects) {
            super(fm);
            this.objects = objects;
            mViewPager.setOnPageChangeListener(this);
        }

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

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

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageScrolled(int position, float positionOffset,
                                   int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            //滑动的监听事件
            changeFragmentFocus(position);
        }
    }

    @Override
    public void onClick(View v) {
        int vId = v.getId();
        //改变当前显示的Fragment,显示拼货界面：0， 显示预告界面：1
        switch(vId){
            case R.id.id_topBtn01:
                changeFragmentFocus(0);
                mViewPager.setCurrentItem(0);
                break;
            case R.id.id_topBtn02:
                changeFragmentFocus(1);
                mViewPager.setCurrentItem(1);
                break;
        }
    }

    private void changeFragmentFocus(int focus){
        if(focus == 0){
            topBtnContainer.setBackgroundResource(R.drawable.top_btn_shop);
            topBtn01.setTextColor(Color.rgb(255, 255, 255));
            topBtn02.setTextColor(Color.rgb(229, 28, 35));
        }else if (focus == 1){
            topBtnContainer.setBackgroundResource(R.drawable.top_btn_preview);
            topBtn01.setTextColor(Color.rgb(229, 28, 35));
            topBtn02.setTextColor(Color.rgb(255, 255, 255));
        }
    }
}

init()就是把两个界面的fragment加到 ArrayList<Fragment> fragments= new ArrayList<Fragment>()； 里面去，然后放进自定义的FragmentStatePagerAdapter中。

再把两个按钮加上点击事件。

private void init(){
    GroupChildrenCollect groupChildrenCollect = new GroupChildrenCollect();
    GroupChildrenHasBuy groupChildrenHasBuy = new GroupChildrenHasBuy();
    fragments.add(groupChildrenCollect);
    fragments.add(groupChildrenHasBuy);

    topBtn01 = (Button) this.findViewById(R.id.id_topBtn01);
    topBtn02 = (Button) this.findViewById(R.id.id_topBtn02);
    topBtnContainer = (LinearLayout) this.findViewById(R.id.id_topBtn_container);
    topBtn01.setOnClickListener(this);
    topBtn02.setOnClickListener(this);
    mViewPager = (ViewPager) this.findViewById(R.id.id_viewPager);
    mPagerAdapter = new TabPagerAdapter(this.getSupportFragmentManager(), fragments);

    mViewPager.setAdapter(mPagerAdapter);
    mViewPager.invalidate();
    mPagerAdapter.notifyDataSetChanged();
}

这个changeFragmentFocus()方法就是切换fragment的，切换的时候简单粗暴把按钮的背景颜色和字体颜色都改了。当按钮点击的时候只要调用changeFragmentFocus()就行啦。

 private void changeFragmentFocus(int focus){
        if(focus == 0){
            topBtnContainer.setBackgroundResource(R.drawable.top_btn_shop);
            topBtn01.setTextColor(Color.rgb(255, 255, 255));
            topBtn02.setTextColor(Color.rgb(229, 28, 35));
        }else if (focus == 1){
            topBtnContainer.setBackgroundResource(R.drawable.top_btn_preview);
            topBtn01.setTextColor(Color.rgb(229, 28, 35));
            topBtn02.setTextColor(Color.rgb(255, 255, 255));
        }
    }

源码的地址是：http://download.csdn.net/detail/lijiaweiljw/9529365