修复 CoordinatorLayout 中的底栏

Posted

技术标签:

【中文标题】修复 CoordinatorLayout 中的底栏【英文标题】:Fix bottom bar in CoordinatorLayout 【发布时间】:2016-06-05 05:11:27 【问题描述】:

我有一个 CoordinatorLayout 包含 AppBarLayout 和一个 FrameLayout 包含片段。

其中一个片段在顶部包含一个TabLayout,一个位于RecyclerView 的列表槽,在底部包含一个“自制”工具栏。

AppBarLayout 配置为app:layout_scrollFlags="scroll|enterAlways"

我的问题是滚动时两个“工具栏”都隐藏了,AppBarLayout 和底部的“自制”工具栏。这是当前的行为

我想修复底部的“自制”工具栏以保持可见,但我无法实现。

这是片段布局的 XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:orientation="vertical"
    >
    <android.support.design.widget.TabLayout
        android:id="@+id/toolbarfilter"
        android:layout_
        android:background="@color/azul_asde"
        app:tabMode="fixed"
        app:tabMaxWidth="0dp"
        android:elevation="4dp"
        app:tabIndicatorColor="@color/verde_pastel"
        android:layout_
        />

    <android.support.v4.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swipeContainer"
        android:layout_
        android:layout_
        android:layout_weight="1">

    <android.support.v7.widget.RecyclerView
    android:id="@+id/list"
    android:layout_
    android:layout_/>
    </android.support.v4.widget.SwipeRefreshLayout>

        <LinearLayout
        android:id="@+id/toolbarselection"
        android:layout_
        android:layout_
        android:orientation="horizontal"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:background="@color/azul_asde"
        android:elevation="4dp"
        android:visibility="visible"
        >
        <ImageView
            android:id="@+id/delete"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:src="@drawable/ic_delete_white_24dp"
            android:tint="@color/gris_desactivado" />
        <ImageView
            android:id="@+id/select"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:src="@drawable/ic_bookmark_border_white_24dp"/>

        <ImageView
            android:id="@+id/send"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:src="@drawable/ic_send_white_24dp"
            android:tint="@color/gris_desactivado" />

    </LinearLayout>

</LinearLayout>

EDIT1: THIS questions 似乎是同一个问题。

【问题讨论】:

你能帮我个忙,告诉我们你是如何隐藏底部栏的吗?我似乎无法弄清楚......(我不需要顶部栏,只需要底部) 嗨半藏,你找到解决这个问题的方法了吗? 你能发布你的xml文件吗,其中包含CoordinatorLayout 您的底栏需要在 CoordinatorLayout 级别且具有底部重力,否则它将与其余内容一起滚动。 你不能只使用 RecyclerView 实现片段布局吗? 【参考方案1】:

当从属视图(RecyclerViewNestedScrollView)中滚动内容小于视图高度时,此行为基本上从AppBarLayout 中删除滚动标志SCROLL,即。当不需要滚动时。它还覆盖了通常由AppBarLayout.ScrollingViewBehavior 完成的偏移滚动视图。添加页脚时效果很好,即。按钮,滚动视图或ViewPager,每个页面的内容长度可能不同。

https://gist.github.com/MaciejKaras/02bff315f00b87d80467a470424f22c3

已经在https://***.com/a/37293634回答了

【讨论】:

【参考方案2】:

要修复底部栏,首先您必须使用一个存在选项卡的活动。在那个活动中使用不同的片段。在这个activity_main_tab.xml中添加你的tabLayout

activity_main_tab.xml

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:local="http://schemas.android.com/apk/res-auto"
        android:id="@+id/co_activity_root_layout"
        android:layout_
        android:layout_>
        <RelativeLayout
            android:layout_
            android:layout_
            android:layout_alignParentTop="true">

            <android.support.design.widget.AppBarLayout
                local:theme="@style/Theme.AppBarOverlay"
                android:id="@+id/toolbar_layout"
                android:layout_
                android:layout_
                android:layout_alignParentTop="true">

            </android.support.design.widget.AppBarLayout>

            <RelativeLayout
                android:layout_
                android:layout_
                android:layout_below="@+id/toolbar_layout">

                <FrameLayout
                    android:id="@+id/fl_fragment_container"
                    android:layout_
                    android:layout_
                   />
            </RelativeLayout>
        </RelativeLayout>

    </android.support.design.widget.CoordinatorLayout>

片段视图使用

fragment_tab.xml

这里使用工具栏中的 app:layout_scrollFlags="scroll|enterAlways" 使其可滚动

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/coordinator"
        android:layout_
        android:layout_>

        <android.support.design.widget.AppBarLayout
            android:layout_
            android:layout_
            android:theme="@style/ThemeOverlay.AppCompat.Dark">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_
                android:layout_
                app:tabIndicatorColor="@color/white"
                app:tabIndicatorHeight="@dimen/profile_tablayout_indicator_height"
                android:background="?attr/colorPrimary"
                app:tabGravity="fill"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_
            android:layout_
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </android.support.design.widget.CoordinatorLayout>

FragmentTabs.java

 public class FragmentTabs extends BaseFragment

        private View rootView;
        private ViewPager viewPager;
        private TabLayout tabLayout;
        private Toolbar toolbar;
        private ViewPagerAdapter viewPagerAdapter;

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup viewGroupContainer, Bundle savedInstanceState) 
            rootViewSearch = inflater.inflate(R.layout.fragment_tab, viewGroupContainer, false);
            initializeLayout();
            setUpActionBar();
            setUpFragmentObjects();

            return rootView;
        


        private void initializeLayout() 
            toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);
            viewPager = (ViewPager) rootView.findViewById(R.id.viewpager);
            tabLayout = (TabLayout) rootView.findViewById(R.id.tablayout);
        


        private void setUpActionBar() 
            getApplicationContext().setSupportActionBar(toolbarSearch);
            ActionBar actionBar = getApplicationContext().getSupportActionBar();
            if(actionBar != null)
                actionBar.setTitle(Constants.BLANK);
            
        


        private void setUpFragmentObjects() 
            viewPagerAdapter = new ViewPagerAdapter(getApplicationContext(), getChildFragmentManager());
            viewPager.setAdapter(searchViewPagerAdapter);
            tabLayout.setupWithViewPager(viewPager);
        
    

ViewPagerAdapter.java

public class ViewPagerAdapter extends FragmentPagerAdapter 

    public ViewPagerAdapter(Activity activity, FragmentManager fragmentManager) 
        super(fragmentManager);
    


    @Override
    public Fragment getItem(int position) 
        Bundle bundle;
        switch (position) 
            case 0: // For Tab 1
               // use fragment for tab 1
                return fragment1;
            case 1: // For Tab 2
                // use fragment for tab 2
                return fragment2;
            case 2: // For Tab 3
                // use fragment for tab 3
                return fragment3;
            default:
                return null;
        
    

    @Override
    public int getCount() 
        return 3; // no. of Tabs
    

    @Override
    public CharSequence getPageTitle(int position) 
        switch (position) 
            case 0: // Title For Tab1
                return "Tab1";
            case 1: // Title For Tab2
                return "Tab2";
            case 2: // Title For Tab3
                return "Tab3";
            default:
                return null;
        
    

【讨论】:

【参考方案3】:

您可以尝试在工具栏上添加类似这样的 collapseMode。

你的 appBarLayout 看起来不错

我建议你看看这个链接:Handling Scrolls with CoordinatorLayout

<android.support.design.widget.AppBarLayout
        android:layout_
        android:layout_
        android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_
        android:layout_
        android:background="@android:color/holo_blue_light"
        android:fitsSystemWindows="true"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            app:layout_collapseMode="pin"
            android:layout_
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_
            android:layout_
            app:tabIndicatorColor="@color/white"
          app:tabIndicatorHeight="@dimen/profile_tablayout_indicator_height"
            android:background="?attr/colorPrimary"
            app:tabGravity="fill"/>

    </android.support.design.widget.CollapsingToolbarLayout>

【讨论】:

【参考方案4】:

我遇到了同样的问题这是对我有用的方法

删除AppBarLayout layout_behavior 使其固定在顶部。将FrameLayout layout_behavior 定义为app:layout_behavior="@string/appbar_scrolling_view_behavior",以便在AppBarLayout 下方调整FrameLayout。这样,您的框架布局内容将滚动,但工具栏不会滚动。 CoordinatorLayout布局如下

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_
    android:layout_
    android:fitsSystemWindows="true"
    tools:context="com.next_tech.teebox.GridView">

    <android.support.design.widget.AppBarLayout
        android:layout_
        android:layout_>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:background="?attr/colorPrimary"
            app:titleTextColor="@android:color/white" />

    </android.support.design.widget.AppBarLayout>
<FrameLayout
    android:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


</FrameLayout>


</android.support.design.widget.CoordinatorLayout>

这是您的片段布局的 XML,您的 recyclerView 滚动而不影响您的 TabLayout 和底部线性布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:orientation="vertical"
    >
    <android.support.design.widget.TabLayout
        android:id="@+id/toolbarfilter"
        android:layout_
        android:background="@color/colorPrimary"
        app:tabMode="fixed"
        app:tabMaxWidth="0dp"
        android:elevation="4dp"
        app:tabIndicatorColor="@color/btnBackground"
        android:layout_
        />

    <android.support.v4.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swipeContainer"
        android:layout_
        android:layout_
        android:layout_weight="1">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/list"
            android:layout_
            android:layout_/>
    </android.support.v4.widget.SwipeRefreshLayout>

    <LinearLayout
        android:id="@+id/toolbarselection"
        android:layout_
        android:layout_
        android:orientation="horizontal"
        android:background="@color/colorPrimary"
        android:layout_gravity="bottom"
        android:elevation="4dp"
        android:visibility="visible"
        >
        <ImageView
            android:id="@+id/delete"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/ic_menu_delete" />
        <ImageView
            android:id="@+id/select"
            android:layout_
            android:layout_
            android:layout_gravity="center"
            android:layout_weight="1"
            app:srcCompat="@drawable/white_arrow" />

        <ImageView
            android:id="@+id/send"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:layout_gravity="center"
            app:srcCompat="@drawable/ic_send_holo_dark" />

    </LinearLayout>

</LinearLayout>

希望对大家有帮助,谢谢

更多信息 - Scrolling Behavior for Appbars in Android

【讨论】:

【参考方案5】:

您不能在 coordinatorlayout 中执行此操作。所以使用RelativeLayout并在它的设计中你自己的布局

【讨论】:

【参考方案6】:

试试这个布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_
    android:layout_
    android:id="@+id/container">

    <ScrollView
        android:layout_
        android:layout_
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true">

        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical">
        <android.support.v7.widget.CardView
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/card_view"
            android:layout_
            android:layout_margin="10dp"
            android:layout_
            android:padding="15dp"
            card_view:cardElevation="2dp"
            card_view:cardCornerRadius="4dp">

            <TextView
                android:layout_
                android:layout_
                android:text="Test" />

        </android.support.v7.widget.CardView>


        <android.support.v7.widget.CardView
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/card_view1"
            android:layout_
            android:layout_margin="10dp"
            android:layout_
            android:padding="15dp"
            card_view:cardElevation="2dp"
            card_view:cardCornerRadius="4dp">

            <TextView
                android:layout_
                android:layout_
                android:text="Test" />

        </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/card_view3"
                android:layout_
                android:layout_margin="10dp"
                android:layout_
                android:padding="15dp"
                card_view:cardElevation="2dp"
                card_view:cardCornerRadius="4dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:text="Test" />

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/card_view4"
                android:layout_
                android:layout_margin="10dp"
                android:layout_
                android:padding="15dp"
                card_view:cardElevation="2dp"
                card_view:cardCornerRadius="4dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:text="Test" />

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/card_view5"
                android:layout_
                android:layout_margin="10dp"
                android:layout_
                android:padding="15dp"
                card_view:cardElevation="2dp"
                card_view:cardCornerRadius="4dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:text="Test" />

            </android.support.v7.widget.CardView>
        </LinearLayout>
    </ScrollView>


    <RelativeLayout
        android:layout_
        android:layout_
        android:layout_gravity="bottom"
        android:gravity="bottom">

        <android.support.design.widget.BottomNavigationView
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:foregroundGravity="bottom"
            android:background="@color/green"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            android:id="@+id/bottomnav"
            app:menu="@menu/main">


        </android.support.design.widget.BottomNavigationView>

    </RelativeLayout>



</android.support.design.widget.CoordinatorLayout>

【讨论】:

对于未来的读者,RelativeLayout 在现代 Android 应用程序中是非常不鼓励的 你知道,CoordinatorLayout 不允许孩子使用gravity 所以它不起作用【参考方案7】:

试试这个

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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/container"
    android:layout_
    android:layout_>

    <ScrollView
        android:layout_
        android:layout_
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true">

        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_
                    android:layout_
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </ScrollView>

    <RelativeLayout
        android:layout_
        android:layout_
        android:layout_gravity="bottom"
        android:gravity="bottom">

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomnav"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:background="@color/green"
            android:foregroundGravity="bottom"
            app:itemIconTint="@color/lightWhite"
            app:itemTextColor="@color/lightWhite"
            app:menu="@menu/menu"/>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

结果

【讨论】:

BottomNavigationView 与 ScrollView 重叠。需要预期的利润。【参考方案8】:

最好的解决方案是建立这种层次结构

<ConstraintLayout>
    <CoordinatorLayout>
        <AppBarLayout>
           <ToolBar>
           <TabLayout>
        </AppBarLayout>
        <Inlude>
           Put the Main Content here.
        </Include>
    </CoordinatorLayout>

 
   Other Widgets that you want to be placed at a fixed position.

</ConstraintLayout>

别忘了添加

app:layout_behavior="@string/appbar_scrolling_view_behavior"

上面的行到你包含的布局父视图组中

让我们举一个我正在谈论的方法的例子

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_
    android:layout_>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@id/container"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:context=".activity.Dashboard">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_
            android:layout_
            android:theme="@style/AppTheme.AppBarOverlay"
            app:elevation="0dp"
            app:layout_constraintBottom_toTopOf="@+id/container"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                android:background="@color/background"
                android:elevation="0dp"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:titleTextColor="#000000" />

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_
                android:layout_
                app:tabBackground="@color/background"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/black"
                app:tabTextColor="@color/black" />

        </com.google.android.material.appbar.AppBarLayout>

        <include
            android:id="@+id/include"
            layout="@layout/content_main" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <RelativeLayout
        android:id="@+id/btSend"
        android:layout_
        android:layout_
        android:layout_marginRight="@dimen/_50sdp"
        android:visibility="gone"
        app:layout_constraintBottom_toTopOf="@id/container"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btReceive">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fbSend"
            android:layout_
            android:layout_
            android:layout_marginBottom="@dimen/_30sdp"
            android:background="@color/colorAccent"
            android:src="@drawable/ic_upload"
            app:rippleColor="@color/colorAccent" />

        <TextView
            android:layout_
            android:layout_
            android:layout_alignLeft="@id/fbSend"
            android:layout_alignRight="@id/fbSend"
            android:layout_alignBottom="@id/fbSend"
            android:layout_marginBottom="@dimen/_3sdp"
            android:elevation="@dimen/_10sdp"
            android:gravity="center"
            android:text="SEND"
            android:textColor="@color/white"
            android:textSize="@dimen/_8sdp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/btReceive"
        android:layout_
        android:layout_
        android:layout_marginLeft="@dimen/_50sdp"
        android:visibility="gone"
        app:layout_constraintBottom_toTopOf="@id/container"
        app:layout_constraintEnd_toStartOf="@+id/btSend"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fbReceive"
            android:layout_
            android:layout_
            android:layout_marginBottom="@dimen/_30sdp"
            android:background="@color/colorAccent"
            android:src="@drawable/ic_download"
            app:rippleColor="@color/colorAccent" />

        <TextView
            android:layout_
            android:layout_
            android:layout_alignLeft="@id/fbReceive"
            android:layout_alignRight="@id/fbReceive"
            android:layout_alignBottom="@id/fbReceive"
            android:layout_marginBottom="@dimen/_3sdp"
            android:elevation="@dimen/_10sdp"
            android:gravity="center"
            android:text="RECEIVE"
            android:textColor="@color/white"
            android:textSize="@dimen/_8sdp" />
    </RelativeLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/container"
        android:layout_
        android:layout_
        android:layout_margin="@dimen/_7sdp"
        android:background="@drawable/bottom_bar_corner"
        android:padding="@dimen/_5sdp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <Button
            android:layout_
            android:layout_
            android:background="@drawable/ic_upload_download"
            android:minHeight="0dp"
            android:paddingTop="@dimen/_6sdp"
            android:paddingBottom="@dimen/_6sdp"
            android:textSize="@dimen/_13sdp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

到目前为止一切顺利。让我们看看结果

【讨论】:

【参考方案9】:

2021 年更新: 修复BottomNavBar,滚动时工具栏隐藏。

在activity_main.xml中 我们有 3 样东西 -

    工具栏 片段容器视图 底部导航视图

以 Rishabh Dhiman 的解决方案为基础 https://***.com/a/64896704/15392387

<ConstraintLayout>
    <CoordinatorLayout>
        <AppBarLayout>
           <ToolBar>
        </AppBarLayout>
        <FragmentContainerView>
    </CoordinatorLayout>
    <BottomNavigationView>
</ConstraintLayout>

这是一个对我有用的例子-

<androidx.constraintlayout.widget.ConstraintLayout 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:layout_
    android:layout_
    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayoutMain"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_
            android:layout_
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                app:layout_scrollFlags="scroll|enterAlways|snap" />

        </com.google.android.material.appbar.AppBarLayout>


        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"

            android:layout_
            android:layout_

            app:defaultNavHost="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:navGraph="@navigation/nav_graph"

            tools:layout="@layout/fragment_home" />


    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_
        android:layout_
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

注意:如果 FragmentContainerView 中的 Fragment 是可滚动的,这很有效。否则,片段的底部将隐藏在 BottomNavigationView 后面。

【讨论】:

不适合我。 BottomNavigationView 在 FragmentContainerView 中重叠内容,当我转到下一页时,工具栏将内容推到底部使它们消失 @Patrick - 要解决重叠内容问题,请更改 CoordinatorLayout。设置高度和宽度以匹配约束并添加 -app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"。让我知道它是否有效(y) 没什么...我已经尝试了 3 天来拥有一个带有自定义工具栏的底部导航视图,该工具栏可以隐藏,但我做不到。总是在上方或下方重叠 你能分享你的代码吗?能够更好地提供帮助...... ***.com/questions/69513412/… 使用您的解决方案,底部导航视图与我的视图重叠。此外,如果在稍后的片段中我放置了一个相对于底部有 20 边距的按钮,它会被底部导航视图覆盖,当我隐藏工具栏时,它会显示在那里,因为按钮向上

以上是关于修复 CoordinatorLayout 中的底栏的主要内容,如果未能解决你的问题,请参考以下文章

基于导航控制器的视图的底栏是啥?

如何使列表内容通过带有材质背景的底栏显示

CSS3--Flex弹性盒子布局: 实例篇-固定的底栏 & 流式布局

Lua部件实现-底栏①

ios xcode底栏始终是tab项

ListView 与 CoordinatorLayout 中的 SearchView 重叠