本文主要是介绍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;@Overrideprotected 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;@Overridepublic 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() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic 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);}@Overridepublic void onPageScrollStateChanged(int state) {}});
/*** fab 点击事件结合OnNavigationItemSelectedListener中return false使用*//*floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic 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;}@Overridepublic int getCount() {return data.size();}@Overridepublic Fragment getItem(int position) {return data.get(position);}}
}
BaseFragment
public class BaseFragment extends Fragment {private String title;@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);// get titletitle = getArguments().getString("title");}@Nullable@Overridepublic 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）
这篇关于Android 底部导航栏 中间凸起的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
