Android实现头部切换页（Fragment+viewPager）

Android实现头部切换页（Fragment+viewPager）

Fragment可以看作是轻量级的Activity。不得不说，Fragment实现界面是非常简单且高效的事。ViewPager适合用作界面的左右滑动，在手机屏幕有限的情况下，ViewPager提供了一种很好地解决方案。

今天尝试实现了头部的切换页，发现做出来效果挺不错。下面是实现步骤：

1、实现Fragment

简单的实现了三个Fragment，只需继承Fragment，重写onCreateView方法即可。

public class FirstFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.first_fragment,container,false);
        return view;
    }
}

三个Fragment都是一样的实现，只不过加载了不一样的布局文件。布局文件随便拖拽了几个控件上去，区分彼此。

2、实现适配器

ViewPager的适配器应该使用FragmentPageAdapter。这个适配器类似于BaseAdapter。

public class FragmentViewPagerAdapter extends FragmentPagerAdapter {

    //需要显示的Fragment
    private List fragments;

    public FragmentViewPagerAdapter(FragmentManager fm,List fragments){
        super(fm);
        this.fragments=fragments;
    }

    @Override
    public Fragment getItem(int position) {
        //得到具体的Fragment
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        //返回数量
        return fragments.size();
    }
}

3、主Activity的实现

主Activity中，初始化了各个控件，设置了ViewPager的监听器。代码如下：

public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;
    private List fragmentList;
    private TextView tvTab1,tvTab2,tvTab3;
    private int currIndex;


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

    private void initView(){
        tvTab1= (TextView) findViewById(R.id.tv_tab1);
        tvTab2= (TextView) findViewById(R.id.tv_tab2);
        tvTab3= (TextView) findViewById(R.id.tv_tab3);

        tvTab1.setOnClickListener(new tvOnClickListener(0));
        tvTab2.setOnClickListener(new tvOnClickListener(1));
        tvTab3.setOnClickListener(new tvOnClickListener(2));
    }

    //textView的监听器，当按下textview控件时，可跳转到对应Fragment。
    private class tvOnClickListener implements View.OnClickListener{

        private int index=0;

        public tvOnClickListener(int index){
            this.index=index;
        }

        @Override
        public void onClick(View view) {
            viewPager.setCurrentItem(index);
        }
    }

    private void initViewPager(){
        viewPager= (ViewPager) findViewById(R.id.viewpager);
        fragmentList=new ArrayList();
        fragmentList.add(new FirstFragment());
        fragmentList.add(new SecondFragment());
        fragmentList.add(new ThirdFragment());

        //设置适配器
        viewPager.setAdapter(new FragmentViewPagerAdapter(getSupportFragmentManager(), fragmentList));
        viewPager.setCurrentItem(0);
        tvTab1.setTextColor(Color.RED);
        //设置监听
        viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
    }

    private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{

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

        }

        @Override
        public void onPageSelected(int position) {
            currIndex=position;
            //使TextView改变颜色，指示现在是哪个Fragment。
            switch (position){
                case 0:
                    tvTab1.setTextColor(Color.RED);
                    tvTab2.setTextColor(Color.WHITE);
                    tvTab3.setTextColor(Color.WHITE);
                    break;
                case 1:
                    tvTab1.setTextColor(Color.WHITE);
                    tvTab2.setTextColor(Color.RED);
                    tvTab3.setTextColor(Color.WHITE);
                    break;
                case 2:
                    tvTab1.setTextColor(Color.WHITE);
                    tvTab2.setTextColor(Color.WHITE);
                    tvTab3.setTextColor(Color.RED);
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

4、xml布局文件

这里将主布局的xml文件也给出来。

这样功能就基本实现了。发现还可以再美化。

5、加入沉浸式效果

现在很多应用都实现了沉浸式状态栏，这个小小的改变确实使应用看起来不那么变扭。在网上查找到一种实现。

在MainActivity中加入两行代码：

//透明状态栏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //透明导航栏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

xml布局中加入：

android:fitsSystemWindows="true"
android:clipToPadding="true"

看看效果：

源码地址：http://download.csdn.net/detail/wen_wu_shuang_quan/9203297