如何协调导航抽屉与底部导航视图

Question

我是 android 开发人员的新手。我正在检查 material 设计库，我已经实现了一个带有底部导航的导航抽屉，可以轻松地在片段中导航。这两个组件都工作得很好，但我不知道如何协调这两个组件的导航。例如，当在导航抽屉上切换片段时，它会更改布局，但按钮导航所选项目不会随之更改。

如何解决这个问题并link两个组件相互协作并同步更改的选定项目？

这是我的 java 文件的样子，这里是 GitHub 上整个项目的 link：https://github.com/mreek/NavigationDrawer

提前致谢。

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    private DrawerLayout drawer;
    private TextView appBarTV;
    private static final String TAG = "MyActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Intent intent= new Intent(this,IntroActivity.class);
        startActivity(intent);

        drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        appBarTV = findViewById(R.id.appbar_text_view);

        ImageButton menuRight = findViewById(R.id.leftRight);
        menuRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (drawer.isDrawerOpen(GravityCompat.START)) {
                    drawer.closeDrawer(GravityCompat.START);
                } else {
                    drawer.openDrawer(GravityCompat.START);
                }
            }
        });

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        BottomNavigationView bottomNavigationView = (BottomNavigationView)findViewById(R.id.navigation);

        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Fragment selectedFragment = null;
                switch (item.getItemId()) {
                    case R.id.action_item1:
                        selectedFragment = MainFragment.newInstance();
                        break;
                    case R.id.action_item2:
                        selectedFragment = AccountFragment.newInstance();
                        break;
                    case R.id.action_item3:
                        selectedFragment = SellFragment.newInstance();
                        break;
                    case R.id.action_item4:
                        selectedFragment = ChatFragment.newInstance();
                        break;
                    case R.id.action_item5:
                        selectedFragment = NotificationFragment.newInstance();
                        break;
                }
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.f_container, selectedFragment);
                transaction.commit();
                return true;
            }
        });

        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.f_container, MainFragment.newInstance());
        transaction.commit();
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        drawer.closeDrawers();
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            MainFragment fragment = new MainFragment();
            ft.replace(R.id.f_container, fragment);
            ft.commit();
        } else if (id == R.id.nav_gallery) {
            //appBarTV.setText("Fragment With Tabs");
            ChatFragment fragment = new ChatFragment();
            ft.replace(R.id.f_container, fragment);
            ft.commit();
        } else if (id == R.id.nav_slideshow) {
            AccountFragment fragmentTab = new AccountFragment();
            ft.replace(R.id.f_container, fragmentTab);
            ft.commit();
        } else if (id == R.id.nav_share) {
            Toast.makeText(this, "Partager", Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_send) {
            Toast.makeText(this, "Rate 5 stars", Toast.LENGTH_SHORT).show();
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/app_bar_main" />

        <FrameLayout
            android:id="@+id/f_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="3dp"
            android:background="@color/white"
            app:itemIconTint="@color/blue"
            app:itemTextColor="@color/blue"
            app:menu="@menu/bottom_navigation_items" />

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
        app:itemTextColor="@color/black"/>
</android.support.v4.widget.DrawerLayout>

Answer 1

试试这个代码：

private void setupNavDrawer(NavigationView navigationView) {
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

             Fragment fragment = null;

             switch (item.getItemId()){
                case R.id.nav_gallery:
                   fragment = new GalleryFragment();
                   break;
                case R.id.nav_share:
                   fragment = new ShareFragment();
                   break;
                default:
                   fragment = new GalleryFragment();
                   break;

            FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

           //if checked - set title menu
            item.setChecked(true);
            setTitle(item.getTitle());
            mDrawerLayout.closeDrawers();

            return true;
        }
    }); 
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ............//nav
    setupNavDrawer(navigationView);
}

Answer 2

首先，当用户从底部导航中选择一个选项卡时，您应该避免重新创建片段。您应该将片段保留为私有变量：

private DrawerLayout drawer;
private BottomNavigationView bottomNavigationView;
private MainFragment mainFragment = MainFragment.newInstance();
private AccountFragment accountFragment = AccountFragment.newInstance();
private SellFragment sellFragment = SellFragment.newInstance();
private ChatFragment chatFragment = ChatFragment.newInstance();
private NotificationFragment notificationFragment = NotificationFragment.newInstance();

当用户选择一个选项卡时，只需切换到该片段：

bottomNavigationView.setOnNavigationItemSelectedListener(item -> {
    Fragment selectedFragment = null;
    switch (item.getItemId()) {
        case R.id.action_announces:
            selectedFragment = mainFragment;
            break;
        case R.id.action_account:
            selectedFragment = accountFragment;
            break;
        case R.id.action_sell:
            selectedFragment = sellFragment;
            break;
        case R.id.action_chat:
            selectedFragment = chatFragment;
            break;
        case R.id.action_notifications:
            selectedFragment = notificationFragment;
            break;
    }
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    if (selectedFragment != null) {
        transaction.replace(R.id.f_container, selectedFragment);
        transaction.commit();
    }
    return true;
});

当用户使用导航菜单选择选项卡切换到所需的片段时：

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    drawer.closeDrawers();
    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

    switch (item.getItemId()) {
        case R.id.nav_announces:
            bottomNavigationView.setSelectedItemId(R.id.action_announces);
            ft.replace(R.id.f_container, mainFragment);
            break;
        case R.id.nav_account:
            bottomNavigationView.setSelectedItemId(R.id.action_account);
            ft.replace(R.id.f_container, accountFragment);
            break;
        case R.id.nav_sell:
            bottomNavigationView.setSelectedItemId(R.id.action_sell);
            ft.replace(R.id.f_container, sellFragment);
            break;
        case R.id.nav_chat:
            bottomNavigationView.setSelectedItemId(R.id.action_chat);
            ft.replace(R.id.f_container, chatFragment);
            break;
        case R.id.nav_notifications:
            bottomNavigationView.setSelectedItemId(R.id.action_notifications);
            ft.replace(R.id.f_container, notificationFragment);
            break;
    }

    ft.commit();
    return true;
}

我已经 fork 你的 repo 并将它迁移到 AndroidX，然后将它修复到一个名为 androidx 的新分支上。我向你提出了拉取请求。您可以接受并尝试一下。

如何协调导航抽屉与底部导航视图

How to coordinate a Navigation Drawer with a Buttom Navigation View

java

android

android-layout

android-fragments

navigation-drawer