如何 show/hide 滚动列表视图上的底部导航视图?
How to show/hide bottom navigation view on scroll listview?
更新:
我正在实现的底部导航视图仅适用于单个片段,不在任何 activity 内,以便在片段之间切换。 bottomnavigation 的目的是为列表视图的滚动行为提供排序功能;类似于 flipkart/paytm.
中发生的情况
我在一个片段中有一个列表视图,我想要一个 bottomnavigationview,它应该表现为:
1.Initially,加载listview时,bottomnavigationview应该出现在fragment的底部。
- 向上滚动列表时,导航视图应该消失。
- 向下滚动列表时,它应该会消失。
我已经参考了 Whosebug 上的答案并尝试了他们的代码,但是 none 它们适用于 me.Can 有人向我介绍一下吗?
如果有更好的实现方法,请告诉我。
我也怀疑这个抽屉布局是否必要?
这是我的片段代码:
<?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="wrap_content"-->
<!--android:layout_height="match_parent"-->
<!--tools:context=".AvailableFood">-->
<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/coordinator_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AvailableFood">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<customfonts.MyEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16dp"
android:id="@+id/food_req"
android:hint="Your requirement(kg) today?"
android:textColorHint="#000000"
android:textColor="#000000"
android:background="@drawable/button_background"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:drawableRight="@drawable/ic_local_dining_black_24dp"
android:padding="16dp"
/>
<ListView
android:id="@+id/list_avl_food"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:listSelector="@drawable/list_selector" />
</LinearLayout>
<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.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_menu" />
</android.support.design.widget.CoordinatorLayout>
<!--</android.support.v4.widget.DrawerLayout>-->
下面是我如何应用导航视图行为:
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
rootview = inflater.inflate(R.layout.fragment_available_food, container, false);
mBottomNavigationView = rootview.findViewById(R.id.bottom_nav);
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) mBottomNavigationView.getLayoutParams();
layoutParams.setBehavior(new BottomNavigationBehavior());
}
BottomNavigationBehavior.java:
package com.example.student.doneate;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;
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);
}
}
编辑 1:
底部导航视图:
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_gravity="bottom"
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_menu" />
在坐标布局中你必须使用app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
在你的 BottomNavigationView
无需在 java 代码中为 hiding/showing BottomNavigationView
做额外的工作
我不知道为什么,但在没有任何帮助之后,我找到了自己的逃避。
使用 ListView 上的 onscrollListener 设置 bottomnavigation 视图的可见性 属性,它工作得很好。
更新:
我正在实现的底部导航视图仅适用于单个片段,不在任何 activity 内,以便在片段之间切换。 bottomnavigation 的目的是为列表视图的滚动行为提供排序功能;类似于 flipkart/paytm.
中发生的情况我在一个片段中有一个列表视图,我想要一个 bottomnavigationview,它应该表现为:
1.Initially,加载listview时,bottomnavigationview应该出现在fragment的底部。
- 向上滚动列表时,导航视图应该消失。
- 向下滚动列表时,它应该会消失。
我已经参考了 Whosebug 上的答案并尝试了他们的代码,但是 none 它们适用于 me.Can 有人向我介绍一下吗?
如果有更好的实现方法,请告诉我。 我也怀疑这个抽屉布局是否必要?
这是我的片段代码:
<?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="wrap_content"-->
<!--android:layout_height="match_parent"-->
<!--tools:context=".AvailableFood">-->
<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/coordinator_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AvailableFood">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<customfonts.MyEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16dp"
android:id="@+id/food_req"
android:hint="Your requirement(kg) today?"
android:textColorHint="#000000"
android:textColor="#000000"
android:background="@drawable/button_background"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:drawableRight="@drawable/ic_local_dining_black_24dp"
android:padding="16dp"
/>
<ListView
android:id="@+id/list_avl_food"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:listSelector="@drawable/list_selector" />
</LinearLayout>
<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.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_menu" />
</android.support.design.widget.CoordinatorLayout>
<!--</android.support.v4.widget.DrawerLayout>-->
下面是我如何应用导航视图行为:
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
rootview = inflater.inflate(R.layout.fragment_available_food, container, false);
mBottomNavigationView = rootview.findViewById(R.id.bottom_nav);
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) mBottomNavigationView.getLayoutParams();
layoutParams.setBehavior(new BottomNavigationBehavior());
}
BottomNavigationBehavior.java:
package com.example.student.doneate;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;
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);
}
}
编辑 1: 底部导航视图:
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_gravity="bottom"
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_menu" />
在坐标布局中你必须使用app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
在你的 BottomNavigationView
无需在 java 代码中为 hiding/showing BottomNavigationView
我不知道为什么,但在没有任何帮助之后,我找到了自己的逃避。
使用 ListView 上的 onscrollListener 设置 bottomnavigation 视图的可见性 属性,它工作得很好。