带有中心按钮弧形或驼峰的底部导航[重复]

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

这种底部应用栏带有支持库 v28。 Joe Birch 的 article 会很有帮助。