andrid 中有一种常见底部导航栏中间凸起样式,如图:
中间凸起样式常见的实现方式:
1.借助父布局的clipchildren属性,设置为false,即允许子view超出父view的限制
2.直接在原来view上覆盖view,拦截底层(原来)view的事件。
因项目中中使用了BottomNavigationViewEx
作为底部导航栏,本文主要探讨第二种实现方式。BottomNavigationViewEx具体使用方式请参考(https://github.com/ittianyu/BottomNavigationViewEx/blob/master/README_ZH.md)。此库作者提供了中间使用FloatingActionButton来实现凸起的方式,本文对FloatingActionButton的事件做了一下拓展。
<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”的具体布局;
<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="首页" />
<item
android:id="@+id/menu_empty"
android:title="" />
<item
android:id="@+id/menu_me"
android:icon="@drawable/foot_me"
android:title="我的" />
menu>
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 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 data;
public VpAdapter(FragmentManager fm, List data) {
super(fm);
this.data = data;
}
@Override
public int getCount() {
return data.size();
}
@Override
public Fragment getItem(int position) {
return data.get(position);
}
}
}
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;
}
}
<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)