首先这个效果需要引入design:compile 'com.android.support:design:26.+'
在布局文件中:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="100dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolBarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
app:expandedTitleMargin="16dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="这不是标题" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nest_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
app:menu="@menu/navigation"
android:background="@color/colorPrimary"
android:layout_gravity="start"
android:layout_alignParentBottom="true"
android:fitsSystemWindows="true"
android:layout_height="100dp" />
</RelativeLayout>
注意:在使用BottomNavigationView的时候会有个默认的动画位移效果,一般我们是不需要这个效果的,所以我们就要去掉;
BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);
public class BottomNavigationViewHelper {
public static void disableShiftMode(BottomNavigationView view) {
BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
try {
Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
shiftingMode.setAccessible(true);
shiftingMode.setBoolean(menuView, false);
shiftingMode.setAccessible(false);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
//noinspection RestrictedApi
item.setShiftingMode(false);
// set once again checked value, so view will be updated
//noinspection RestrictedApi
item.setChecked(item.getItemData().isChecked());
}
} catch (NoSuchFieldException e) {
Log.e("BNVHelper", "Unable to get shift mode field", e);
} catch (IllegalAccessException e) {
Log.e("BNVHelper", "Unable to change value of shift mode", e);
}
}
}
接下来就要监听NestedScrollView的滚动状态从而来设置底部的导航的隐藏和显示
nestView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int
oldScrollX, int oldScrollY) {
//上滑 并且 正在显示底部栏
if (scrollY - oldScrollY > 0 && isBottomShow) {
isBottomShow = false;
//将Y属性变为底部栏高度 (相当于隐藏了)
navigation.animate().translationY(navigation.getHeight());
} else if (scrollY - oldScrollY < 0 && !isBottomShow) {
isBottomShow = true;
navigation.animate().translationY(0);
}
}
});
资源下载:https://download.csdn.net/download/m0_37177456/103777
效果图: