手把手教你用CoordinatorLayout实现折叠效果
2019-07-28 本文已影响24人
的一幕
其实在很早之前有用到过CoordinatorLayout，因为自己也看过相关的源码，主要是利用了behavior来通过下面的view来滑动上面的view，很大程度上方便了开发者来实现折叠的效果，废话不多说，咱们今天拿实际项目的案例，打造一个折叠的效果:
simple.gif
书架里面的签到部分是受下面一部分拖拽控制的，这也是
CoordinatorLayout的特性，通过下面能滑动的view来实现上面一部分的view滑动。咱们看看该效果是怎么实现的：将项目的style设置如下:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
将activity设置如下模式，用到了statusbar库
StatusBarUtil.setTranslucentForImageViewInFragment(MainActivity.this, 0, null);
主要看看BookShelfFragment代码
- 布局:
<?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.support.design.widget.CoordinatorLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<android.support.design.widget.AppBarLayout
android:id="@+id/AppFragment_AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:elevation="0dp">
<!--需要折叠的CollapsingToolbarLayout部分-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="@+id/linear"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_154"
android:background="@mipmap/shelf_back"
android:orientation="horizontal"
app:layout_collapseMode="parallax"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:id="@+id/shelf_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/dp_24"
android:orientation="vertical">
<TextView
android:id="@+id/readTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowDx="5"
android:shadowDy="5"
android:shadowRadius="5"
android:text="12"
android:textColor="@color/color0B192D"
android:textSize="@dimen/text_35" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/read_tips"
android:textColor="#ff5d636f"
android:textSize="@dimen/text_13" />
</LinearLayout>
<TextView
android:id="@+id/signin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/dp_24"
android:background="@drawable/sign_back"
android:drawableLeft="@mipmap/signin"
android:drawablePadding="@dimen/dp_5"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_3"
android:paddingTop="@dimen/dp_3"
android:paddingRight="@dimen/dp_12"
android:paddingBottom="@dimen/dp_3"
android:text="@string/check_in"
android:textColor="@color/colorFF448BFF" />
</RelativeLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/t_toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_45"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<View
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="0.05dp"
android:background="@color/colorCCCCCC" />
</android.support.design.widget.AppBarLayout>
<!--appbar_scrolling_view_behavior:该属性其实用的是appbarLayout中的behavior:AppBarLayout$ScrollingViewBehavior-->
<android.support.v7.widget.RecyclerView
android:id="@+id/show_shelf"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/dp_12"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<ProgressBar
android:id="@+id/progress"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_centerInParent="true" />
</RelativeLayout>
主要注意下面recyclerview用到的app:layout_behavior属性，需要折叠的部分放到android.support.design.widget.CollapsingToolbarLayout中，
android.support.v7.widget.Toolbar用到了一个app:layout_collapseMode="pin"属性，表示不让一起整体滑动。
在fragment中主要有如下设置的代码:
/**
* 设置CoordinatorLayout部分
*/
private void initCoordinator() {
//不采用系统的toolbar，将自己的toolbar放到其中
toolbar.removeAllViews();
Toolbar.LayoutParams lps = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
View view = getLayoutInflater().inflate(R.layout.toolbar_book_shelf, null);
toolbar.addView(view, ops);
//由于咱们用了statusbarUtils中状态栏沉浸式，因此下面的toolbar需要下移，距离是statusBar的高度
CollapsingToolbarLayout.LayoutParams layoutParams = (CollapsingToolbarLayout.LayoutParams) toolbar.getLayoutParams();
layoutParams.topMargin = StatusBarUtil.getStatusBarHeight(getContext());
toolbar.setLayoutParams(layoutParams);
//shelfContent是咋们的签到部分，移动距离是toolbar的高度+statusbar的高度
RelativeLayout.LayoutParams shelfContentLp = (RelativeLayout.LayoutParams) shelfContent.getLayoutParams();
shelfContentLp.topMargin = (int) (getResources().getDimension(R.dimen.dp_45) + StatusBarUtil.getStatusBarHeight(getContext()));
shelfContent.setLayoutParams(shelfContentLp);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//设置toolbar渐变的效果，主要是监听appbarlayout滑动的距离,getTotalScrollRange:是appbarLayout可滑动的最大距离
toolbar.setBackgroundColor(CoordinatorUtils.changeAlpha(getResources().getColor(R.color.white), Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));
//分割线也采用渐变效果，在折叠的时候，完全显示分割线
line.setAlpha(Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange());
}
});
}
里面用到了一个InContentAnim动画库，该动画一般都是放在base...类里面去设置的。最后再看下整理出来的效果:
simple1.gif
想要看完整的代码，点这里
