Android Studio 实现tabs (二) 使用BottomNavigationView + viewpage + fragment 实现 tabs滑动切换

接上一章，tabs我们已经建立好了，但是默认的tab功能只能点击，如果还想让tab可滑动切换，那么就需要继续加工了.

一、首先修改activity_main.xml ，添加viewpage组件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

  <android.support.v4.view.ViewPager
      android:id="@+id/main_viewPage"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_above="@id/bottom_navigation"
      ></android.support.v4.view.ViewPager>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation" />
  <View
      android:layout_width="match_parent"
      android:layout_height="5dp"
      android:layout_above="@id/bottom_navigation"
      android:background="@drawable/bottom_shadow" />
</RelativeLayout>

上面的VIEW是做了一个阴影效果：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#0000"
        android:startColor="#30000000"
        android:type="linear"/> 
</shape>

修改MainActvity如下：

public class MainActivity extends AppCompatActivity {

    private TextView mTextMessage;
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    viewPager.setCurrentItem(0);
                    return true;
                case R.id.navigation_dashboard:
                    viewPager.setCurrentItem(1);
                    return true;
                case R.id.navigation_notifications:
                    viewPager.setCurrentItem(2);
                    return true;
                case R.id.navigation_tab4:
                    viewPager.setCurrentItem(3);
                    return true;
                case R.id.navigation_tab5:
                    viewPager.setCurrentItem(4);
                    return true;
            }
            return false;
        }
    };

    MenuItem menuItem;
    ViewPager viewPager ;
    BottomNavigationView navigation ;

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

        mTextMessage = (TextView) findViewById(R.id.message);
        navigation = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

        BottomNavigationViewHelper.disableShiftMode(navigation);

        viewPager = findViewById(R.id.main_viewPage);

        //滑动监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (menuItem != null) {
                    menuItem.setChecked(false);
                } else {
                    navigation.getMenu().getItem(0).setChecked(false);
                }
                menuItem = navigation.getMenu().getItem(position);
                menuItem.setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        setupViewPager();

    }

    /***
     * 设置tab fragment 页面集合
     */
    private void setupViewPager() {
        MainViewPagerAdapter adapter = new MainViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(TabFragment.newInstance("首页"));
        adapter.addFragment(TabFragment.newInstance("消息"));
        adapter.addFragment(TabFragment.newInstance("广场"));
        adapter.addFragment(TabFragment.newInstance("发现"));
        adapter.addFragment(TabFragment.newInstance("我的"));
        viewPager.setAdapter(adapter);
    }

}

新增类：MainViewPagerAdapter 如：

public class MainViewPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();

    public MainViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

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

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

    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);
    }

}

新建一个公共的tabFragment，如：

public class TabFragment extends Fragment {
    public static TabFragment newInstance(String info) {
        Bundle args = new Bundle();
        TabFragment fragment = new TabFragment();
        args.putString("info", info);
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_base, null);
        TextView tvInfo = (TextView) view.findViewById(R.id.textView);
        tvInfo.setText(getArguments().getString("info"));
        tvInfo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "Don't click me.please!.", Snackbar.LENGTH_SHORT).show();
            }
        });
        return view;
    }
}

fragment布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

</RelativeLayout>

直接运行即可看到效果： 

代码：https://download.csdn.net/download/ssdate/11042408