Android 底部栏结合FloatingActionButton

无图言吊先！

 

---

1.依赖

compile 'com.github.ittianyu:BottomNavigationViewEx:1.2.4'
    // badge 加不加小红点
    implementation 'q.rorbin:badgeview:1.1.0'

---

2.menu 

menu_navigation_with_view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/icon1"
        android:checked="true"
        android:icon="@drawable/icon1"
        android:title="小红旗" />
    <item
        android:id="@+id/icon2"
        android:icon="@drawable/icon2"
        android:title="小星星" />

    <item
        android:id="@+id/icon3"
        android:icon="@drawable/icon3"
        android:title="小王八" />
    <item
        android:id="@+id/icon4"
        android:icon="@drawable/more"
        android:title="小more" />
</menu>

---

3.MainXml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
            android:id="@+id/bnve"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/colorPrimary"
            app:itemIconTint="@color/selector_item_gray_color"
            app:itemTextColor="@color/selector_item_gray_color"
            app:menu="@menu/menu_navigation_with_view_pager" />

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

    
    </RelativeLayout>
</layout>

---

4.selector_item_gray_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_checked="true"/>
    <item android:color="@android:color/white" android:state_pressed="true"/>
    <item android:color="@color/colorGray"/>
</selector>

---

5.MainAc

final List<Fragment> list = new ArrayList<>();

        BlankFragment blankFragment1 = BlankFragment.getInstance("第一个");
        BlankFragment blankFragment2 = BlankFragment.getInstance("第二个");
        BlankFragment blankFragment3 = BlankFragment.getInstance("第三个");
        BlankFragment blankFragment4 = BlankFragment.getInstance("第四个");

        list.add(blankFragment1);
        list.add(blankFragment2);
        list.add(blankFragment3);
        list.add(blankFragment4);

        mViewBinding.bnve.enableItemShiftingMode(false);//为true 时  只有当前选中项 会显示文字
        mViewBinding.bnve.enableShiftingMode(false);//为true 时,当前选中项宽度改变
        mViewBinding.bnve.enableAnimation(false);//开启或关闭点击动画(文字放大效果和图片移动效果)。默认为 true.


        MyPageAdapter myPageAdapter = new MyPageAdapter(getSupportFragmentManager(), list);
        mViewBinding.vp.setAdapter(myPageAdapter);

        //
        mViewBinding.bnve.setupWithViewPager(mViewBinding.vp);

---

6.可以加小红点

private Badge addBadgeAt(final int position, final int number) {
        // add badge
        return new QBadgeView(this)
                .setBadgeNumber(number)
                .setGravityOffset(12, 2, true)
                .bindTarget(mViewBinding.bnve.getBottomNavigationItemView(position))
                .setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() {
                    @Override
                    public void onDragStateChanged(int dragState, Badge badge, View targetView) {
                        if (Badge.OnDragStateChangedListener.STATE_SUCCEED == dragState) {
                            Toast.makeText(mContext, "第" + position + "条的" + number + "移除", Toast.LENGTH_SHORT).show();
                        }
                    }
                });
    }

 addBadgeAt(0, 1);
        addBadgeAt(1, 5);
        addBadgeAt(3, 6);

---

7.加FloatButton

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/icon1"
        android:checked="true"
        android:icon="@drawable/icon1"
        android:title="小红旗" />
    <item
        android:id="@+id/icon2"
        android:icon="@drawable/icon2"
        android:title="小星星" />
    <item
        android:id="@+id/i_empty"
        android:title="" />
    <item
        android:id="@+id/icon3"
        android:icon="@drawable/icon3"
        android:title="小王八" />
    <item
        android:id="@+id/icon4"
        android:icon="@drawable/more"
        android:title="小more" />
</menu>

MENU中放空

---

8.布局加上

   <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="26dp"
            android:src="@drawable/book"
            android:tint="@color/colorGray"
            app:backgroundTint="@android:color/white"
            app:borderWidth="0dp"
            app:elevation="9dp" />

---

9.去掉

setupWithViewPager 切记切记

---

10.设置点击/滑动/选中事件

  mViewBinding.bnve.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            private int previousPosition = -1;

            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int position = 0;
                switch (item.getItemId()) {
                    case R.id.icon1:
                        position = 0;
                        break;
                    case R.id.icon2:
                        position = 1;
                        break;
                    case R.id.icon3:
                        position = 2;
                        break;
                    case R.id.icon4:
                        position = 3;
                        break;
                    case R.id.i_empty: {
                        return false;
                    }
                }
                if (previousPosition != position) {
                    mViewBinding.vp.setCurrentItem(position, false);
                    previousPosition = position;
                }
                return true;
            }
        });

        // 针对悬浮按钮
        mViewBinding.vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (position >= 2 ){// 2 is center
                    position++;// if page is 2, need set bottom item to 3, and the same to 3 -> 4
                }
                mViewBinding.bnve.setCurrentItem(position);
                Toast.makeText(mContext, ""+position, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });