美文网首页Android进阶之路自定义控件Android开发经验谈
手把手教你用CoordinatorLayout实现折叠效果

手把手教你用CoordinatorLayout实现折叠效果

作者: 的一幕 | 来源:发表于2019-07-28 16:43 被阅读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

    想要看完整的代码,点这里

    相关文章

      网友评论

        本文标题:手把手教你用CoordinatorLayout实现折叠效果

        本文链接:https://www.haomeiwen.com/subject/ovpyrctx.html