替换片段会导致单个框架布局重叠的问题

Question

我想用BottomNavigation，NavigationDrawer和TabLayout的所有三个组合制作一个应用程序。 BottomNavigation有三个按钮，每个按钮都有一个单独的片段。 NavigationDrawer有4个菜单项，每个菜单项都有一个单独的片段。同样，TabLayout具有一个带有3个选项卡的PageViewer，每个选项卡都有一个单独的片段。

我已经设计了要求，但是上述所有3个控件的所有片段都有一个重叠的问题。 而且我无法执行按钮单击之类的操作。如果我使用OnClick事件单击按钮操作方法，则控件不会转到与该按钮关联的操作方法。 此外，每个片段上的控件都与另一个片段控件重叠并且也可见。

我仅对BottomNavigation和NavigationDrawer使用一个framelayout来更改片段。 如何解决片段之间的重叠问题。

 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent”
        android:layout_height="match_parent">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

             <android.support.v7.widget.Toolbar
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

      <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
           android:layout_width="match_parent"
            android:layout_height="match_paren/>
     <android.support.design.widget.BottomNavigationView/>

    <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="407dp/>
    <android.support.v4.widget.DrawerLayout
           android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:openDrawer="start">
    <android.support.design.widget.NavigationView
                 android:layout_width="wrap_content"
                android:layout_height="match_parent/>
        </android.support.v4.widget.DrawerLayout>
    </android.support.constraint.ConstraintLayout>

用于BottomNavigation，NavigationDrawer和TabLayout的Java代码。

// MainActivity.Java

//片段随着NavigationDrawer片段的帧布局而改变

frameLayout = findViewById(R.id.frameLayout);
 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
 navDrawer = (NavigationView) findViewById(R.id.nav_view);
        nnavDrawer.setNavigationItemSelectedListener(new 
 NavigationView.OnNavigationItemSelectedListener() {
 @Override
 public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()){
                    case R.id.navevents:
                        setFragment(events);
                       return true;
                    case R.id.navnews:
                        setFragment(news);
                        dl.closeDrawer(GravityCompat.START);
                        return true;
                }
                return false;
            }
        });

//fragment changing with framelayout  for BottomNavigation fragments
 bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
 public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()){
                    case R.id.navhome:
                        setFragment(Json);
                        return true;
                    case R.id.navdetails:
                        setFragment(details);
                        return true;
              }
                return false;
            }
        });
    }

类似地，TabLayout的视图分页器正在更改3个片段。但是所有片段都使用相同的帧布局。

 //fragments are changing with replace() method. 
  private void setFragment(Fragment fragment) {
        FragmentTransaction fragmentChanges = 
        getSupportFragmentManager().beginTransaction();
        fragmentChanges.replace(R.id.frameLayout,fragment);
        fragmentChanges.addToBackStack(null);
       fragmentChanges.commit();
    }

我看过很多其他有关片段重叠问题的文章。 他们中的一些建议删除所有片段并添加必须显示的片段。我已经尝试了以下代码。但这没用。

private void changeFragment(Fragment fr){
    FrameLayout fl = (FrameLayout) findViewById(R.id.mainframe);
    fl.removeAllViews();
    FragmentTransaction transaction1 = 
    getSupportFragmentManager().beginTransaction();
    transaction1.add(R.id.mainframe, fr);
   transaction1.commit();
}

我不能为BottomNavigation，NavigationDrawer和TabLayout使用一帧布局吗？谁能建议我如何解决这个问题。