ViewPager加RadioGroup构建底部导航

ViewPager 简介

ViewPager可以实现视图的左右滑动效果

ViewPager的继承结构

java.lang.Object
    ↳android.view.View
       ↳android.view.ViewGroup
          ↳android.support.v4.view.ViewPager

ViewaPager与ListView类似也需要适配器来承载需要显示的View

An AdapterView is a view whose children are determined by an Adapter.See ListView, GridView, Spinner and Gallery for commonly used subclasses of AdapterView.

ViewPager常用适配器:

adapter	含义
PagerAdapter	填充简单View如图片,可用于实现应用启动欢迎界面
FragmentPagerAdapter	PagerAdapter的子类,可填充Fragment
FragmentStatePagerAdapter	PagerAdapter的子类,可以保存Fragment的状态,适合大量的Fragment。可以更好得控制内存。

使用FragmentPagerAdapter实现可滑动页面的底部导航栏

在主布局文件（activity_main.xml）中加入ViewPager控件，以及用于底部按钮的RadioGroup

<?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="0dip"
        android:layout_weight="6">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:background="@color/blue"
        android:gravity="bottom">
        <RadioGroup
            android:id="@+id/rg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <RadioButton
                android:id="@+id/rb1"
                style="@style/radioBtStyle"
                android:background="@drawable/perform"
                android:text="rb1" />
            <RadioButton
                android:id="@+id/rb2"
                style="@style/radioBtStyle"
                android:background="@drawable/perform"
                android:text="rb2" />
            <RadioButton
                android:id="@+id/rb3"
                style="@style/radioBtStyle"
                android:background="@drawable/perform"
                android:text="rb3" />
            <RadioButton
                android:id="@+id/rb4"
                android:background="@drawable/perform"
                style="@style/radioBtStyle"
                android:text="rb4" />
        </RadioGroup>
    </LinearLayout>
</LinearLayout>

Radio的样式都一样，因此把它们抽象为一个统一的style

<style name="radioBtStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_margin">3dp</item>
        <item name="android:gravity">bottom|center_horizontal</item>
        <item name="android:button">@null</item>

</style>

为每个按钮定义selector（perform.xml），在按下时表现不同效果

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" android:state_pressed="true"></item>
    <item android:drawable="@color/white" android:state_checked="true"></item>
    <item android:drawable="@color/yellow"></item>
</selector>

FragmentPagerAdapter当然需要首先建立Fragment，本例需要四个Fragment，这里只写出一个Fragment的建立方法

Fragment类

//Fragment1.java
public class Fragment1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.frag1,container,false);
    }
}

布局文件

<!--layout/frag1.xml-->
<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="frag1"
        />
</LinearLayout>

在Activity中开始初始化

public class MainActivity extends FragmentActivity {
    private List<Fragment> fragmentList;
    private ViewPager viewPager;
    private RadioGroup radioGroup;
    private RadioButton raBt1, raBt2, raBt3, raBt4;
    private int[] rbResId = new int[]{R.id.rb1, R.id.rb2, R.id.rb3, R.id.rb4};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        //具体视图数据的装载容器
        fragmentList = new ArrayList<Fragment>();
        fragmentList.add(new Fragment1());
        fragmentList.add(new Fragment2());
        fragmentList.add(new Fragment3());
        fragmentList.add(new Fragment4());
        /**
         *相当于ListView的各种适配器(BaseAdapter,ArrayAdapter,SimpleAdapter)
         * FragmentAdapter,ViewPager的适配器，为ViewPager返回Fragment
         */
        FragmentManager fm = getSupportFragmentManager();
        viewPager.setAdapter(new FragmentPagerAdapter(fm) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
               return fragmentList.size();
            }
        });
        /**
         * RadioGroup监听器，底部按钮按下时回掉此方法
         */
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                for (int i = 0; i < rbResId.length; i++) {
                //按下按钮时设置对应的Fragment
                    if (rbResId[i] == checkedId) {
                        viewPager.setCurrentItem(i);
                    }
                }
            }
        });
        /**
         *ViewPager页面监听器，当页面改变时会回调监听器
         */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
            @Override
            public void onPageScrollStateChanged(int state){}
            @Override
            public void onPageSelected(int position) {
            //滑动到当前页面时，设置对应的按钮为选中状态
                radioGroup.check(rbResId[position]);
            }
        });
        /**
         * 当然初始化为第一个RadioButton与第一个Fragment
         */
        radioGroup.check(R.id.rb1);
    }

分析一下使用步骤：
1. 创建一个容器存储所有的视图数据Fragment
2. 创建一个FragmentPagerAdapter，它的构造函数必须要传入一个FragmentManager。ps：如果要自定义自己的adapter，就要同时传入存储数据的容器和FragmentManager
3. 通过ViewPager的setAdapter()绑定适配器
4. 创建并绑定RadioGroup的按钮选中监听器以及ViewPager的页面选中监听器
5. 因为fragment页面和button的选中状态是相辅相成的，在按钮选中监听器中会调用viewPager.setCurrentItem()来同步页面状态，在页面选择监听器用radioGroup.check()来同步按钮状态。