导航栏和ViewPager和Fragment

 

最近项目有用到很多基础的东西，所以记录下来以作总结，再者就是为了各位有 需要的朋友，可以参考下来。

实现的效果就是上面有一个导航栏，是三个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;
        }
    }