最近專案有用到很多基礎的東西，所以記錄下來以作總結，再者就是為了各位有 需要的朋友，可以參考下來。

實現的效果就是上面有一個導航欄，是三個Button按鈕組成，導航欄和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"
    android:orientation="vertical"
    tools:context="com.viewpagefragment.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <Button
            android:id="@+id/bt1"
            android:textColor="#f00"
            android:text="頁卡1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/bt2"

            android:text="頁卡2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/bt3"

            android:text="頁卡3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


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

2.佈局檔案之後就是設定ViewPager中要包含的Fragment

fragment1

這裡我就暫時先拿一個fragment舉例，其他的複製就行，記得要更改佈局檔案 R.layout.fragment1

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment1, container, false);

        return view;
    }
}
 

<?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="wrap_content"
     android:layout_height="wrap_content"
     android:text="頁面1"
     />
</LinearLayout>
 

我這裡的需求是三個fragment頁面，所以說fragment頁面完成之後就要做ViewPager的適配將fragment新增進去

public class MyFragmentAdapter extends FragmentPagerAdapter {
    public MyFragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    /**
     * Return the Fragment associated with a specified position.
     *
     * @param position 根據得到的position進行判斷，如果是0就顯示Fragment1的頁面，一次累計
     */
    @Override
    public Fragment getItem(int position) {
        Fragment fragment=null;
        switch (position){
            case 0:
                fragment=new Fragment1();
                break;
            case 1:
                fragment=new Fragment2();

                break;
            case 2:
                fragment=new Fragment3();

                break;
        }
        return fragment;
    }

    /**
     * Return the number of views available.
      *顯示fragment頁面的個數
     */
    @Override
    public int getCount() {
        return 3;
    }
}

在Mainactivity中呼叫就是

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    /**
     * 頁卡1
     */
    private Button mBt1;
    /**
     * 頁卡2
     */
    private Button mBt2;
    /**
     * 頁卡3
     */
    private Button mBt3;
    private ViewPager mVp;
    private ArrayList<Button> btList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
           //拿到控制元件id
        initView();
   //ViewPager適配
        initData();
    }

    private void initData() {
          //拿到ViewPager介面卡的類
        MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager());
         //ViewPager適配
        mVp.setAdapter(myFragmentAdapter);
            mVp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }
                //通過ViewPager的這個方法判斷導航欄中Button按鈕顯示的狀態，
                @Override
                public void onPageSelected(int position) {
                  for (int i=0;i<btList.size();i++){
                      if (i==position){
                          btList.get(i).setTextColor(Color.RED);
                      }else {
                          btList.get(i).setTextColor(Color.BLACK);

                      }
                  }

                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });
    }

    private void initView() {
        mBt1 = (Button) findViewById(R.id.bt1);
        mBt1.setOnClickListener(this);
        mBt2 = (Button) findViewById(R.id.bt2);
        mBt2.setOnClickListener(this);
        mBt3 = (Button) findViewById(R.id.bt3);
        mBt3.setOnClickListener(this);
        mVp = (ViewPager) findViewById(R.id.vp);
//建立存放控制元件的集合，我這裡是Button型別的，之後將導航欄上的控制元件新增進去
        btList = new ArrayList<>();
        btList.add(mBt1);
        btList.add(mBt2);
        btList.add(mBt3);


    }
    //根據Button按鈕的點選事件來判斷顯示ViewPager中的那個頁面
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            default:
                break;
            case R.id.bt1:
                mVp.setCurrentItem(0);
                break;
            case R.id.bt2:
                mVp.setCurrentItem(1);

                break;
            case R.id.bt3:
                mVp.setCurrentItem(2);

                break;
        }
    }