Android之ViewPager與Fragment

功能是利用viewpager，通過按鈕 btn1 和按鈕 btn2 切換fragment1頁面和fragment2頁面。

下面是activity_main.xml佈局文件：（底部兩個按鈕，上面一個ViewPager）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <Button
            android:id="@+id/btn_1_page"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/bg_transparent"
            android:drawableTop="@mipmap/img_grey"
            android:text="1頁"
            android:drawablePadding="0dp"
            android:textColor="@color/gray"
            android:textSize="14sp" />
        <Button
            android:id="@+id/btn_2_page"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/bg_transparent"
            android:drawableTop="@mipmap/img_grey"
            android:drawablePadding="0dp"
            android:textColor="@color/gray"
            android:text="2頁"
            android:textSize="14sp" />

    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/linearLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

 用ViewPager需要一個adapter來綁定數據，因爲ViewPager常常和Fragment組合使用，所以有專門的FragmentPagerAdapter可供使用。

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private int PAGER_COUNT = 2;
    private Fragment1 fragment1 = null;
    private Fragment2 fragment2 = null;

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = null;
        switch (i) {
            case MainActivity.PAGE_ONE:
                fragment = fragment1;
                break;
            case MainActivity.PAGE_TWO:
                fragment = fragment2;
                break;

        }
        return fragment;
    }

    @Override
    public int getCount() {
        return PAGER_COUNT;
    }

MainActivity類，必須實現Fragment1.OnFragmentInteractionListener、Fragment2.OnFragmentInteractionListener、ViewPager.OnPageChangeListener這三個接口

public class MainActivity extends AppCompatActivity implements Fragment1.OnFragmentInteractionListener, Fragment2.OnFragmentInteractionListener,ViewPager.OnPageChangeListener {

    private String TAG = "MainActivity";
    //Fragment
    public static final int PAGE_ONE = 0;
    public static final int PAGE_TWO = 1;
    private ViewPager vpager;
    private MyFragmentPagerAdapter mAdapter;
    Button btn1;
    Button btn2;

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

        //ViewPager//fragment
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        vpager = findViewById(R.id.view_pager);
        vpager.setAdapter(mAdapter);
        vpager.setCurrentItem(PAGE_ONE);
        vpager.addOnPageChangeListener(this);

      
    }

    private void initView(){
        btn1 = findViewById(R.id.btn_1_page);
        btn2 = findViewById(R.id.btn_2_page);
        //設置drawableTop
        btn1.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.folder_36dp, 0, 0);
        btn1.setTextColor(getResources().getColor(R.color.mainColor));
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                setPageOne();
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                setPageTwo();
            }
        });
    }

    private void setPageOne(){
        vpager.setCurrentItem(PAGE_ONE);
        btn1.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.img, 0, 0);
        btn1.setTextColor(getResources().getColor(R.color.mainColor));
        btn2.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.img_grey, 0, 0);
        btn2.setTextColor(getResources().getColor(R.color.gray));
    }

    private void setPageTwo(){
        vpager.setCurrentItem(PAGE_TWO);
        btn2.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.img, 0, 0);
        btn2.setTextColor(getResources().getColor(R.color.mainColor));
        btn1.setCompoundDrawablesWithIntrinsicBounds(0, R.mipmap.img_grey, 0, 0);
        btn1.setTextColor(getResources().getColor(R.color.gray));
    }

    
    
    @Override
    public void onFragmentInteraction(Uri uri) {

    }

    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }

    @Override
    public void onPageSelected(int i) {
        Log.i(TAG,"PAGE"+i);
        switch (i){
            case 0:
                setPageOne();
                break;
            case 1:
                setPageTwo();
                break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int i) {

    }
}