web-dev-qa-db-ja.com

中央ボタンの弧またはこぶのある下部ナビゲーション

ナビゲーションバー自体の形状をそのように弧状に変更するメインの中央アクションボタンで下部ナビゲーションバーを変更しようとしている enter image description here

または、中央のボタンを囲む下部ナビゲーションのこぶ。

BottomNavigationViewを拡張する必要がある場合は問題ありませんが、どこから始めればよいかわかりません。

私は この同様の質問 を見つけましたが、それは私が解決しようとしている正確な問題ではありません。

androidmobilematerial-designbottomnavigationview
5
Kshitij Aggarwal

ブロ、これを試してください

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)
 }
}
2
Arul Harsh

このタイプのボトムアプリバーには、Support Library v28が付属しています。これは、Joe Birchによる 記事 が役立ちます。

0
Mehul Kanzariya