web-dev-qa-db-ja.com

Navigation DrawerとBottom Navigationを同時に使用する方法-Navigation Architecture Component

以下のような画面があり、同じ画面にナビゲーションドロワーと下部ナビゲーションが含まれています。

app screen

Jetpack Navigation Architecture Componentを使用しています。

現在の問題と私が試したこと

2番目と3番目の下部のナビゲーション項目をクリックすると、ツールバーに戻る矢印が表示されますか？

試行：2番目と3番目の下部ナビゲーションに関連付けられたフラグメントを最上位の宛先に設定する

appBarConfig = AppBarConfiguration(setOf(R.layout.fragment_star, R.layout.fragment_stats, R.layout.fragment_user))

の代わりに

appBarConfig = AppBarConfiguration(navController.graph, drawerLayout)

うまくいきませんでした。

どんな助けも高く評価されます！

私のコードは以下のようになります。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto">

    <androidx.drawerlayout.widget.DrawerLayout
        Android:id="@+id/drawerLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true">


        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical">

            <androidx.appcompat.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:background="?attr/colorPrimary"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

            <fragment
                Android:id="@+id/navHostFragment"
                Android:name="androidx.navigation.fragment.NavHostFragment"
                Android:layout_width="match_parent"
                Android:layout_height="0dp"
                Android:layout_weight="1"
                app:defaultNavHost="true"
                app:navGraph="@navigation/nav_graph" />

            <com.google.Android.material.bottomnavigation.BottomNavigationView
                Android:id="@+id/bottomNav"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"
                Android:background="?android:attr/windowBackground"
                app:menu="@menu/menu_bottom" />

        </LinearLayout>

        <!-- gives navDrawer material look-->
        <com.google.Android.material.navigation.NavigationView
            Android:id="@+id/navView"
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_gravity="start"
            app:menu="@menu/nav_drawer_menu"
            app:headerLayout="@layout/nav_header"
            Android:fitsSystemWindows="true"
            />
    </androidx.drawerlayout.widget.DrawerLayout>
</layout>

menu_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item
        Android:id="@+id/starFragment"
        Android:icon="@drawable/ic_star_green_48dp"
        Android:title="@string/bottom_nav_title_star"/>

    <item
        Android:id="@+id/statsFragment"
        Android:icon="@drawable/ic_stats_green_48dp"
        Android:title="@string/bottom_nav_title_stats"/>

    <item
        Android:id="@+id/userFragment"
        Android:icon="@drawable/ic_user_green_48dp"
        Android:title="@string/bottom_nav_title_user"/>

</menu>

nav_graph.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:Android="http://schemas.Android.com/apk/res/Android"
            xmlns:app="http://schemas.Android.com/apk/res-auto"
            xmlns:tools="http://schemas.Android.com/tools" Android:id="@+id/nav_graph_main"
            app:startDestination="@id/starFragment">

    <fragment
        Android:id="@+id/starFragment"
        Android:name="com.example.app.ui.StarrFragment"
        Android:label="Star"
        tools:layout="@layout/fragment_star">
    </fragment>
    <fragment
        Android:id="@+id/statsFragment"
        Android:name="com.example.app.StatsFragment"
        Android:label="fragment_stats"
        tools:layout="@layout/fragment_stats" />
    <fragment
        Android:id="@+id/userFragment"
        Android:name="com.example.app.UserFragment"
        Android:label="fragment_user"
        tools:layout="@layout/fragment_user" />
</navigation>

ActivityMain.kt

class MainActivity : AppCompatActivity() {

    private lateinit var drawerLayout: DrawerLayout
    private lateinit var appBarConfig: AppBarConfiguration
    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        setSupportActionBar(toolbar)

        drawerLayout = binding.drawerLayout
        navController = this.findNavController(R.id.navHostFragment)

        binding.bottomNav.setupWithNavController(navController)

        NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
        appBarConfig = AppBarConfiguration(navController.graph, drawerLayout)


        // lock drawer when not in start destination
        navController.addOnDestinationChangedListener { nc, nd, _ ->

            if(nd.id == nc.graph.startDestination){
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
            }
            else{
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
            }
        }

         NavigationUI.setupWithNavController(binding.navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {

        // replace navigation up button with nav drawer button when on start destination
        return NavigationUI.navigateUp(navController, appBarConfig)

    }
}
androidkotlinandroid-jetpackandroid-architecture-navigation
9
user158

戻るボタンをドロワーアイコンに置き換えるための個別のコードを記述する必要はありません。

AppBarConfigurationで、下部ナビゲーションとナビゲーションドロワーの両方から移動するために使用している（nav_graphからの）フラグメントIDを渡します。 （P.Sフラグメントとそれに関連付けられたアイコンは同じIDを持つ必要があります）

あなたの場合、AppBarConfigurationは次のようになります。

appBarConfig = AppBarConfiguration.Builder(R.id.starFragment, R.id.statsFragment, R.id.userFragment)
                .setDrawerLayout(drawerLayout)
                .build()

アクションバーを設定します。

setSupportActionBar(toolbar)
setupActionBarWithNavController(navController, appBarConfig)

次に、下部ナビゲーションとナビゲーションビューの両方にnavcontrollerをセットアップします。

navView.setupWithNavController(navController)
bottomNav.setupWithNavController(navController)

onSupportNavigateUp関数は次のようになります。

override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp(appBarConfig)
    }

引き出しが開いている場合は、戻るボタンを押して処理する必要があります。

override fun onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START)
        } else {
            super.onBackPressed()
        }
    }

ボーナス

デフォルトでは、icon_1、icon_2、icon_3の順にナビゲーションアイコンをクリックすると、そこから戻るボタンを押すと、icon_1のホームアイコンに戻ります。

アイコンをクリックしたのとは逆の順序で戻る（バックスタック方式）場合は、メニューの項目にAndroid：menuCategory = "secondary"を追加します。だからあなたのメニューは次のようになります：

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:id="@+id/starFragment"
        Android:icon="@drawable/ic_star_green_48dp"
        Android:title="@string/bottom_nav_title_star"
        Android:menuCategory="secondary"/>
    <item
        Android:id="@+id/statsFragment"
        Android:icon="@drawable/ic_stats_green_48dp"
        Android:title="@string/bottom_nav_title_stats"
        Android:menuCategory="secondary"/>
    <item
        Android:id="@+id/userFragment"
        Android:icon="@drawable/ic_user_green_48dp"
        Android:title="@string/bottom_nav_title_user"
        Android:menuCategory="secondary"/>
</menu>

戻るボタンのアイコンが今解決されることを願っています:)

7
Atr07

このプロジェクト はDrawerLayoutを使用し、RadioButtonsを使用してBottomNavigationViewをシミュレートします。これが問題を解決するために私が見つけた方法です

Google Codelabナビゲーションプロジェクトでは、Adithya T Rajが言及していることを行いますが、横向きにDrawerLayoutを表示し、縦向きにBottomNavigationViewを表示するだけです。 プロジェクトリンク ：

両方を表示するように強制しようとします このブランチ上 ですが、DrawerLayoutのみが表示されます

1
evaldez

まず第一に、それは良い設計アプローチではありません。そのようなものにしたい場合は、下部のアプリバーを使用する必要があります（ナビゲーションドロワー付きの下部ナビゲーションビューではありません）。

ここにあなたのためのガイドがあります： Article Link

あなたはそれであなたのアプリを簡単に適応させることができます。

0
Halil ÖZCAN