用ViewPager+Fragment实现页面滑动

　这里使用 ViewPager+Fragment 实现滑动效果

　　当然首先要先上效果图

---

　　　　　　　　　总共需要的文件:

• 2个Layou文件
• 1个Adapter文件
• 3个Fragment文件
• 1个Activity文件

　　　　　　　　　　　Layout文件

1. activity_main.xml

2. fragment_layout.xml

   activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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="com.example.a25086.viewpagetest.MainActivity">

    <!--实现滑动切换的ViewPager-->
    <android.support.v4.view.ViewPager
        android:layout_weight="1"
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

    <!--以下是小圆点,就是使用RadioButton实现的-->
    <RadioGroup
        android:layout_marginLeft="100dp"
        android:layout_marginRight="100dp"
       android:layout_weight="13"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RadioButton
            android:id="@+id/chooseone"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <RadioButton
            android:id="@+id/choosetwo"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <RadioButton
            android:id="@+id/choosethree"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </RadioGroup>
</LinearLayout>

fragment_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/text"
        android:gravity="center"
        android:textSize="50dp"
        android:text="This is One Fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>

---

　　　　　　　　　　　Adapter文件:

• FragmentChangeAdapter 继承自 FragmentPagerAdapter

public class FragmentChangeAdapter extends FragmentPagerAdapter {
    private List<Fragment> flist;//添加的Fragment就在这里

    public FragmentChangeAdapter(FragmentManager fm, List<Fragment> flist) {
        super(fm);
        this.flist = flist;
    }

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

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

---

　　　　　　　　　　Fragment文件 　　　

我这里全部使用一个布局文件(fragment_layout)进行加载

• OneFramgent
• TwoFragment
• ThreeFragment
  

OneFragment:

public class OneFragment extends Fragment {
    private TextView text;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout, container, false);
        initView(view);
        return view;
    }

    private void initView(View view) {
        text = (TextView) view.findViewById(R.id.text);
    }
}

TwoFragmetn:

public class TwoFragment extends Fragment {
    private TextView text;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout, container, false);
        initView(view);
        return view;
    }

    private void initView(View view) {
        text = (TextView) view.findViewById(R.id.text);
        text.setText("This is Two Fragment");
    }
}

ThreeFragment:

与TwoFragment相同,所以就不写啦,Thanks♪(･ω･)ﾉ

---

　　　　　　　　　　　MainActivity文件

我会尽力注释解释清楚地ヾ(◍°∇°◍)ﾉﾞ

public class MainActivity extends AppCompatActivity {
    private FragmentChangeAdapter fadapter;
    private List<Fragment> flist;//声明一个存放Fragment的List
    private ViewPager viewpager;
    private RadioButton chooseone;
    private RadioButton choosetwo;
    private RadioButton choosethree;

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

    private void initView() {
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        chooseone = (RadioButton) findViewById(R.id.chooseone);
        choosetwo = (RadioButton) findViewById(R.id.choosetwo);
        choosethree = (RadioButton) findViewById(R.id.choosethree);
    }
    private void initPager(){
        flist=new ArrayList<>();//这里如果不写的话,就没有存放Fragment的list了
                                //是会报错的
        //添加Fragment
        flist.add(new OneFragment());
        flist.add(new TwoFragment());
        flist.add(new ThreeFragment());
        fadapter=new FragmentChangeAdapter(getSupportFragmentManager(),flist);
        viewpager.setAdapter(fadapter);
        viewpager.addOnPageChangeListener(new OnPageChane());//滑动时会做的事
        viewpager.setCurrentItem(0);//指定当前出现的界面
        chooseone.setChecked(true);//应用一进来就是第一个被选中
    }

    private class OnPageChane implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }
        @Override
        public void onPageSelected(int position) {
            //实现滑动时RadioButton的选中状态进行变换
            switch (position){
                case 0:
                    chooseone.setChecked(true);
                    choosetwo.setChecked(false);
                    choosethree.setChecked(false);
                    break;
                case 1:
                    chooseone.setChecked(false);
                    choosetwo.setChecked(true);
                    choosethree.setChecked(false);
                    break;
                case 2:
                    chooseone.setChecked(false);
                    choosetwo.setChecked(false);
                    choosethree.setChecked(true);
                    break;
            }
        }
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

我在这上面踩过的坑,希望对大家有所帮助

1. 如果不写 flist=new ArrayList<>();会报错,刚开始写,经常写忘记了
2. 如果界面出现白屏,小圆点还在,但是程序不奔溃,那就有可能是以下两种错误:
   1.忘记setAdapter了
   2.在Adapter中的getCount方法,忘记写成flist.size();