Show/hide BottomNavigationView 在带有 AppBarLayout 的 CoordinatorLayout 中滚动
Show/hide BottomNavigationView on scroll in CoordinatorLayout with AppBarLayout
我正在尝试在单个 CoordinatorLayout
中同时使用 AppBarLayout
和 BottomNavigationLayout
,但我很难按照 [=19] 的要求隐藏 BottomNavigationLayout
=].
我的意思是这样的:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_insetEdge="top"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:menu="@menu/menu_bottom_navigation"/>
<FrameLayout
android:id="@+id/content_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
如您所见,我还有一个 FrameLayout
用于包含具有实际内容的片段。当前 BottomNavigationView
没有 default/built-in 行为——无论是视图本身,还是它的兄弟。现有的 appbar_scrolling_view_behavior
与应用栏协调处理内容视图,但忽略其他兄弟。
我正在寻找一种在滚动时隐藏和显示应用栏和底部导航视图的解决方案。
经过一两天的搜索,我确定了附加到 BottomNavigationView
的自定义 Behavior
。它的主要思想是检测 BottomNavigationView 的兄弟何时滚动,以便它可以隐藏 BottomNavigationView。像这样:
public class BottomNavigationBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> {
public BottomNavigationBehavior() {
super();
}
public BottomNavigationBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, BottomNavigationView child, View dependency) {
boolean dependsOn = dependency instanceof FrameLayout;
return dependsOn;
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, BottomNavigationView child, View directTargetChild, View target, int nestedScrollAxes) {
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
}
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, BottomNavigationView child, View target, int dx, int dy, int[] consumed) {
if(dy < 0) {
showBottomNavigationView(child);
}
else if(dy > 0) {
hideBottomNavigationView(child);
}
}
private void hideBottomNavigationView(BottomNavigationView view) {
view.animate().translationY(view.getHeight());
}
private void showBottomNavigationView(BottomNavigationView view) {
view.animate().translationY(0);
}
}
如您所见,我使用的是简单的 ViewPropertyAnimator
, obtained using the child views's animate
方法。这导致了一个简单的动画,它与 AppBarLayout
的行为并不真正匹配,但它足够体面,看起来不错,同时它也很容易实现。
我预计 Android 团队会在支持库中为 BottomNavigationView 添加默认行为,因此我认为投入更多时间来完全复制 AppBarLayout 的行为是不合理的.
edit(2018 年 4 月):请参阅评论部分,了解有关 onStartNestedScroll
和 onNestedPreScroll
及其新版本的细微说明。
您也可以使用HideBottomViewOnScrollBehavior。此行为的工作方式基本相同,但还可以处理取消任何现有的 运行 动画,这对性能来说应该更好。
我正在尝试在单个 CoordinatorLayout
中同时使用 AppBarLayout
和 BottomNavigationLayout
,但我很难按照 [=19] 的要求隐藏 BottomNavigationLayout
=].
我的意思是这样的:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_insetEdge="top"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:menu="@menu/menu_bottom_navigation"/>
<FrameLayout
android:id="@+id/content_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
如您所见,我还有一个 FrameLayout
用于包含具有实际内容的片段。当前 BottomNavigationView
没有 default/built-in 行为——无论是视图本身,还是它的兄弟。现有的 appbar_scrolling_view_behavior
与应用栏协调处理内容视图,但忽略其他兄弟。
我正在寻找一种在滚动时隐藏和显示应用栏和底部导航视图的解决方案。
经过一两天的搜索,我确定了附加到 BottomNavigationView
的自定义 Behavior
。它的主要思想是检测 BottomNavigationView 的兄弟何时滚动,以便它可以隐藏 BottomNavigationView。像这样:
public class BottomNavigationBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> {
public BottomNavigationBehavior() {
super();
}
public BottomNavigationBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, BottomNavigationView child, View dependency) {
boolean dependsOn = dependency instanceof FrameLayout;
return dependsOn;
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, BottomNavigationView child, View directTargetChild, View target, int nestedScrollAxes) {
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
}
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, BottomNavigationView child, View target, int dx, int dy, int[] consumed) {
if(dy < 0) {
showBottomNavigationView(child);
}
else if(dy > 0) {
hideBottomNavigationView(child);
}
}
private void hideBottomNavigationView(BottomNavigationView view) {
view.animate().translationY(view.getHeight());
}
private void showBottomNavigationView(BottomNavigationView view) {
view.animate().translationY(0);
}
}
如您所见,我使用的是简单的 ViewPropertyAnimator
, obtained using the child views's animate
方法。这导致了一个简单的动画,它与 AppBarLayout
的行为并不真正匹配,但它足够体面,看起来不错,同时它也很容易实现。
我预计 Android 团队会在支持库中为 BottomNavigationView 添加默认行为,因此我认为投入更多时间来完全复制 AppBarLayout 的行为是不合理的.
edit(2018 年 4 月):请参阅评论部分,了解有关 onStartNestedScroll
和 onNestedPreScroll
及其新版本的细微说明。
您也可以使用HideBottomViewOnScrollBehavior。此行为的工作方式基本相同,但还可以处理取消任何现有的 运行 动画,这对性能来说应该更好。