第15天ViewPager案例2：Viewpager+Fragment实现微信底部导航（******）

ViewPager

一.效果

1.点击底部，Viewpager切换
2.滑动ViewPager，底部也变化
3.Selector选择器的使用

二.思路：1个ViewPager+4个Fragment+1个FragmentPagerAdapter

1.容器：ViewPager
2.数据：ArrayList<Fragment
3.适配器：FragmentPagerAdapter

重写的方法：
(1)getItem() 返回指定下标对于的Fragment
(2)getCount() 得到当前数据源的总数量

四.代码

（1）4个Fragment省略不写
（2）布局activity_main.xml:ViewPager+小圆点+开始体验+右上角倒计时

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
 <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_weight="10"
        android:layout_width="match_parent"
        android:layout_height="0dp">
    </android.support.v4.view.ViewPager>
    <RadioGroup
        android:id="@+id/rg"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal">
        <RadioButton
            android:checked="true"
            android:layout_gravity="center"
            android:textAlignment="center"
            android:drawableTop="@drawable/selector1"
            android:id="@+id/rb1"
            android:text="微信"
            android:button="@null"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <RadioButton
            android:layout_gravity="center"
            android:textAlignment="center"
            android:drawableTop="@drawable/selector1"
            android:id="@+id/rb2"
            android:text="微信"
            android:button="@null"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <RadioButton
            android:layout_gravity="center"
            android:textAlignment="center"
            android:drawableTop="@drawable/selector1"
            android:id="@+id/rb3"
            android:text="微信"
            android:button="@null"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <RadioButton
            android:layout_gravity="center"
            android:textAlignment="center"
            android:drawableTop="@drawable/selector1"
            android:id="@+id/rb4"
            android:text="微信"
            android:button="@null"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </RadioGroup>
</LinearLayout>

(3)Java代码：MainActivity.java

/**
 * 1.viewpager
 * 2.List<Fragment>
 * 3.FragmentPagerAdapter
 * 4.RadioGroup设置点击事件
 * */
public class MainActivity extends AppCompatActivity {
    //视图
    private ViewPager vp;
    private RadioGroup rg;
    private RadioButton rb1,rb2,rb3,rb4;
    //数据
    private ArrayList<Fragment> fragmentArrayList=new ArrayList<>();
    //适配器
    private MyFragmentPagerAdpater myFragmentPagerAdpater;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //TODO 去除Bar
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//这句话一定要放到中间
        setContentView(R.layout.activity_main);
        initview();
        initdata();
        initadpater();
        initlistener();
    }

    private void initlistener() {
        //点击顶部的时候，切换ViewPager
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //checkedId代表的是选中的rb的id
                if(rb1.getId()==checkedId){
                    vp.setCurrentItem(0);
                }else if(rb2.getId()==checkedId){
                    vp.setCurrentItem(1);
                }else if(rb3.getId()==checkedId){
                    vp.setCurrentItem(2);
                }else if(rb4.getId()==checkedId){
                    vp.setCurrentItem(3);
                }
                
                
            }
        });
        //滑动ViewPager的时候切换底部
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }
            @Override
            public void onPageSelected(int i) {
                if(i==0){
                    rb1.setChecked(true);
                }else  if(i==1){
                    rb2.setChecked(true);
                }else  if(i==2){
                    rb3.setChecked(true);
                }else  if(i==3){
                    rb4.setChecked(true);
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }
    private void initadpater() {
        myFragmentPagerAdpater=new MyFragmentPagerAdpater(getSupportFragmentManager(),fragmentArrayList);
        vp.setAdapter(myFragmentPagerAdpater);

    }
    private void initdata() {
        fragmentArrayList.add(new Fragment1());
        fragmentArrayList.add(new Fragment2());
        fragmentArrayList.add(new Fragment3());
        fragmentArrayList.add(new Fragment4());
    }

    private void initview() {
        vp=findViewById(R.id.vp);
        rg=findViewById(R.id.rg);
        rb1=findViewById(R.id.rb1);
        rb2=findViewById(R.id.rb2);
        rb3=findViewById(R.id.rb3);
        rb4=findViewById(R.id.rb4);
    }
}

（4）适配器代码：

public class MyFragmentPagerAdpater extends FragmentPagerAdapter {
    private ArrayList<Fragment> list;

    public MyFragmentPagerAdpater(FragmentManager fm, ArrayList<Fragment> list) {
        super(fm);
        this.list=list;
    }

    @Override
    public Fragment getItem(int i) {
        return list.get(i);
    }

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

源代码：