底部导航，中心按钮弧形或驼峰

Question

希望使用主中心操作按钮修改底部导航栏，该按钮可以更改导航栏本身的形状或者像这样的弧形

或底部导航中的驼峰包围着它周围的中心按钮。

如果我必须延长BottomNavigationView，我很好，但我不知道从哪里开始。

我找到this similar question，但这不是我想要解决的确切问题。

Answer 1

兄弟，试试这个

只需将BottomAppBar和FloatingActionButton放入父级CoordinatorLayout，并将FloatingActionButton的app：layout_anchor属性设置为BottomAppBar的引用ID。

  

  

<android.support.design.bottomappbar.BottomAppBar
    android:id="@+id/bottom_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:fabAttached="true"
    app:backgroundTint="@color/colorPrimary"
    app:fabCradleVerticalOffset="12dp">

</android.support.design.bottomappbar.BottomAppBar>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    android:src="@drawable/ic_add_white_24dp"
    app:layout_anchor="@+id/bottom_appbar"/>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.button.MaterialButton
        android:id="@+id/toggle_alignment"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:textColor="#fff"
        android:text="Toggle FAB alignment"
        app:backgroundTint="@color/colorPrimary"/>

</FrameLayout>

     

To set menu options you can provide Menu resource to your BottomAppBar in code by calling BottomAppBar.replaceMenu(R.menu.xxx) and to toggle the alignment I created a simple extensions function


import kotlinx...bottom_appbar
import kotlinx...fab
import kotlinx...toggle_alignment
// using kotlin-android-extensions here for findViewById calls
class BottomAppBarActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.actvity_bottom_appbar)

    //setSupportActionBar(bottom_appbar) calling this breaks it!
    // setting the menu
    bottom_appbar.replaceMenu(R.menu.bottom_appbar_menu)
    toggle_alignment.setOnClickListener {
      bottom_appbar.toggleAlignment()
    }
 }
 fun BottomAppBar.toggleAlignment() {
   val current = fabAlignmentMode
   fabAlignmentMode = current.xor(1)
 }
}

Answer 2

此类Bottom App Bar附带支持库v28。 Joe Birch的这个article会有所帮助。