Android 底部導航欄 中間凸起
阿新 • • 發佈：2019-01-07
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
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等。