Android 底部导航栏 中间凸起

andrid 中有一种常见底部导航栏中间凸起样式，如图：

中间凸起样式常见的实现方式：

1.借助父布局的clipchildren属性，设置为false，即允许子view超出父view的限制
2.直接在原来view上覆盖view，拦截底层（原来）view的事件。

因项目中中使用了BottomNavigationViewEx
作为底部导航栏，本文主要探讨第二种实现方式。BottomNavigationViewEx具体使用方式请参考（https://github.com/ittianyu/BottomNavigationViewEx/blob/master/README_ZH.md）。此库作者提供了中间使用FloatingActionButton来实现凸起的方式，本文对FloatingActionButton的事件做了一下拓展。

activity_main_home

<?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"
    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/colorWhite"
        app:itemIconTint="@color/selector_item_color"
        app:itemTextColor="@color/selector_item_color"
        app:menu="@menu/menu_bottom_navigation"/>

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

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

app:menu=”@menu/menu_bottom_navigation”的具体布局；

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

    <item
        android:id="@+id/menu_main"
        android:checked="true"
        android:icon="@drawable/foot_auction"
        android:title="首页" />

    <!--因为需要覆盖view 此处省略android:icon-->
    <item
        android:id="@+id/menu_empty"
        android:title="" />

    <item
        android:id="@+id/menu_me"
        android:icon="@drawable/foot_me"
        android:title="我的" />


</menu>

MainHomeActivity

package com.duyuanbo.navigationbar;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomNavigationView;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

import com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx;

import java.util.ArrayList;
import java.util.List;

/**
 * author : duyb
 * time : 2018/01/17
 * desc :主页
 */
public class MainHomeActivity extends AppCompatActivity {
    private BottomNavigationViewEx bnve;
    private VpAdapter adapter;
    private List<Fragment> fragments;
    private ViewPager viewPager;
    private FloatingActionButton floatingActionButton;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_home);
        initView();
        initData();
        initBNVE();
        initEvent();

    }

    /**
     * init BottomNavigationViewEx envent
     */
    private void initEvent() {
        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.menu_main:
                        position = 0;
                        break;
                    case R.id.menu_me:
                        position = 2;
                        break;
                    case R.id.menu_empty: {
                        position = 1;
                        //此处return false且在FloatingActionButton没有自定义点击事件时 会屏蔽点击事件
                       //return false;
                    }
                    default:
                        break;
                }
                if (previousPosition != position) {
                    viewPager.setCurrentItem(position, false);
                    previousPosition = position;
                }

                return true;
            }
        });

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

            }

            @Override
            public void onPageSelected(int position) {

                if (1 == position) {
                    floatingActionButton.setImageResource(R.drawable.comui_tab_pond_selected);

                } else {
                    floatingActionButton.setImageResource(R.drawable.comui_tab_pond);

                }
               /* // 1 is center 此段结合屏蔽FloatingActionButton点击事件的情况使用
                  //在viewPage滑动的时候 跳过最中间的page也
                if (position >= 1) {
                    position++;
                }*/
                bnve.setCurrentItem(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
/**
 * fab 点击事件结合OnNavigationItemSelectedListener中return false使用
 */
        /*floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Toast.makeText(MainHomeActivity.this, "Center", Toast.LENGTH_SHORT).show();
            }
        });*/

    }



    private void initView() {
        floatingActionButton = findViewById(R.id.fab);
        viewPager = findViewById(R.id.vp);
        bnve = findViewById(R.id.bnve);
    }

    /**
     * create fragments
     */
    private void initData() {
        fragments = new ArrayList<>(3);
        BaseFragment homeFragment = new BaseFragment();
        Bundle bundle = new Bundle();
        bundle.putString("title", "首页");
        homeFragment.setArguments(bundle);

        BaseFragment orderFragment = new BaseFragment();
        bundle = new Bundle();
        bundle.putString("title", "订单");
        orderFragment.setArguments(bundle);

        BaseFragment meFragment = new BaseFragment();
        bundle = new Bundle();
        bundle.putString("title", "我的");
        meFragment.setArguments(bundle);


        fragments.add(homeFragment);
        fragments.add(orderFragment);
        fragments.add(meFragment);
    }

    /**
     * init BottomNavigationViewEx
     */
    private void initBNVE() {

        bnve.enableAnimation(false);
        bnve.enableShiftingMode(false);
        bnve.enableItemShiftingMode(false);

        adapter = new VpAdapter(getSupportFragmentManager(), fragments);
        viewPager.setAdapter(adapter);

    }

    /**
     * view pager adapter
     */
    private static class VpAdapter extends FragmentPagerAdapter {
        private List<Fragment> data;

        public VpAdapter(FragmentManager fm, List<Fragment> data) {
            super(fm);
            this.data = data;
        }

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

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

BaseFragment

public class BaseFragment extends Fragment {
    private String title;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // get title
        title = getArguments().getString("title");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag_base, container, false);
        TextView textView = view.findViewById(R.id.tv_title);
        textView.setText(title);
        return view;
    }
}

frag_base.xml

<?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:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textColor="@android:color/black"
        android:textSize="20sp" />
</LinearLayout>

当然FloatingActionButton完全可以换成是其它的view，比如ImagView ,RadioButton,CheckBox等。

其它实现方案

参照PagerBottomTabStrip自定义tabItem
（https://github.com/tyzlmjj/PagerBottomTabStrip）