修复 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】:
当从属视图(RecyclerView
,NestedScrollView
)中滚动内容小于视图高度时,此行为基本上从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 中的底栏的主要内容,如果未能解决你的问题,请参考以下文章