AppBarLayout和CollapsingToolbarLa

作者: JasonChen8888 | 来源:发表于2019-10-16 14:34 被阅读0次

    背景

    自从google的design出来之后,很多控件效果实现起来已经不需要再像以前那样写自定义控件了,最近有个需求是要到页面头部标题栏的折叠效果,因此,想想用CollapsingToolbarLayout

    了解

    CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器,对容器中的不同View设置layout_collapseMode折叠模式,来达到不同的折叠效果。通常CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout的搭配使用折叠的效果目前已经很常见了,在网上有很多的例子和文章,小编整理了一下知识点。

    属性ScrollFlags

    这个标志大家都很熟悉,滚动属性,主要有五个值

    • scroll: Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点:第一点,如果使用了其他值,必定要使用这个值才能起作用;第二点:如果在这个child View前面的任何其他Child View没有设置这个值,那么这个Child View的设置将失去作用
    • enterAlways:快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scroll和scroll | enterAlways设置,发生向下滚动事件时,前者优先滚动Scrolling View,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动。
    • enterAlwaysCollapsed:enterAlways的附加值。这里涉及到Child View的高度和最小高度,向下滚动时,Child View先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界时,Child View再向下滚动,直至显示完全。
    • exitUntilCollapsed:这里也涉及到最小高度。发生向上滚动事件时,Child View向上滚动退出直至最小高度,然后Scrolling View开始滚动。也就是,Child View不会完全退出屏幕。
    • snap:简单理解,就是Child View滚动比例的一个吸附效果。也就是说,Child View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指时,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕,有点类似ViewPager的左右滑动。

    属性contentScrim

    • 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

    属性expandedTitleMarginStart

    • 设置扩张时候(还没有收缩时)title向左填充的距离。

    属性scrimAnimationDuration

    • 设置控制Toolbar收缩时,颜色变化持续时间

    属性 layout_collapseMode

    折叠模式,有两个值

    • pin:固定模式,在折叠的时候最后固定在顶端。
    • parallax:视差模式,在折叠的时候会有个视差折叠的效果。在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用

    属性layout_collapseParallaxMultiplier

    • 设置视差的系数,介于0.0-1.0之间

    属性contentInsetStart

    • Toolbar自身的边上文字到左边的距离

    实现

    • 布局代码
    <?xml version="1.0" encoding="utf-8"?>
    <com.xxxx.views.ProgressLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/progress_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/coordinator_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/ll_bottom_layout">
    
            <android.support.design.widget.AppBarLayout
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:fitsSystemWindows="true">
    
                <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapsing_toolbar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:contentScrim="@color/base_color"
                    app:expandedTitleMarginStart="48dp"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
    
                    <ImageView
                        android:id="@+id/iv_header_bg"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop"
                        android:src="@drawable/bg_personal_homepage_head"
                        app:layout_collapseMode="parallax"
                        app:layout_collapseParallaxMultiplier="0.7" />
    
                    <RelativeLayout
                        android:id="@+id/rl_album_bg_layout"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:src="@drawable/bg_personal_homepage_head"
                        app:layout_collapseMode="parallax"
                        app:layout_collapseParallaxMultiplier="0.7">
    
                        <TextView
                            android:id="@+id/tv_album_title"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="@dimen/space_10"
                            android:layout_marginRight="@dimen/space_10"
                            android:layout_marginBottom="@dimen/space_10"
                            android:layout_above="@+id/tv_tag_1"
                            android:textColor="@color/white"
                            android:textSize="@dimen/font_size_16"
                            android:textStyle="bold" />
    
                        <TextView
                            android:id="@+id/tv_tag_1"
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/space_20"
                            android:layout_alignParentBottom="true"
                            android:layout_marginBottom="@dimen/space_15"
                            android:layout_marginLeft="@dimen/space_10"
                            android:background="@drawable/bg_white_album_tag"
                            android:gravity="center"
                            android:textColor="@color/white"
                            android:textSize="@dimen/font_size_11" />
    
                        <TextView
                            android:id="@+id/tv_tag_2"
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/space_20"
                            android:layout_alignParentBottom="true"
                            android:layout_marginBottom="@dimen/space_15"
                            android:layout_marginLeft="@dimen/space_10"
                            android:layout_toRightOf="@+id/tv_tag_1"
                            android:background="@drawable/bg_white_album_tag"
                            android:gravity="center"
                            android:textColor="@color/white"
                            android:textSize="@dimen/font_size_11" />
    
                        <TextView
                            android:id="@+id/tv_tag_3"
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/space_20"
                            android:layout_alignParentBottom="true"
                            android:layout_marginBottom="@dimen/space_15"
                            android:layout_marginLeft="@dimen/space_10"
                            android:layout_toRightOf="@+id/tv_tag_2"
                            android:background="@drawable/bg_white_album_tag"
                            android:gravity="center"
                            android:textColor="@color/white"
                            android:textSize="@dimen/font_size_11" />
    
                        <TextView
                            android:id="@+id/tv_browse_count"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentBottom="true"
                            android:layout_alignParentRight="true"
                            android:layout_marginBottom="@dimen/space_20"
                            android:layout_marginRight="@dimen/space_10"
                            android:drawableLeft="@drawable/icon_album_detail_browse"
                            android:drawablePadding="@dimen/space_5"
                            android:textColor="@color/white"
                            android:textSize="@dimen/font_size_11" />
                    </RelativeLayout>
    
                    <!-- 这边必须使用ToolBar -->
                    <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="48dp"
                        app:contentInsetStart="0dp"
                        app:contentScrim="@color/base_color"
                        app:layout_collapseMode="pin"
                        app:theme="@style/ToolbarTheme">
    
                        <com.xxxx.views.TitleBar
                            android:id="@+id/action_topbar"
                            android:layout_width="match_parent"
                            android:layout_height="48dp"
                            android:background="@color/transparent" />
                    </android.support.v7.widget.Toolbar>
    
                </android.support.design.widget.CollapsingToolbarLayout>
            </android.support.design.widget.AppBarLayout>
    
            <com.xxxx.views.MySwipeRefreshLayout
                android:id="@+id/swipe_refresh"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
                <com.xxxx.views.LoadMoreRecyclerView
                    android:id="@+id/lv_gamelist"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/white"
                    android:clipToPadding="false"
                    android:overScrollMode="never"
                    android:scrollbars="none" />
            </com.xxxx.views.MySwipeRefreshLayout>
        </android.support.design.widget.CoordinatorLayout>
    
        <LinearLayout
            android:id="@+id/ll_bottom_layout"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentBottom="true"
            android:background="@color/white">
    
            <RelativeLayout
                android:id="@+id/rl_album_support"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/white_item_selector">
    
                <TextView
                    android:id="@+id/tv_album_support"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:drawableLeft="@drawable/icon_album_flower"
                    android:drawablePadding="@dimen/space_8"
                    android:gravity="center"
                    android:textColor="@color/font_gray"
                    android:textSize="@dimen/font_size_11" />
            </RelativeLayout>
    
            <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:layout_marginBottom="9dp"
                android:layout_marginTop="9dp"
                android:background="@color/album_line_color" />
    
            <RelativeLayout
                android:id="@+id/rl_album_collect"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/white_item_selector">
    
                <TextView
                    android:id="@+id/tv_album_collect"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:drawableLeft="@drawable/icon_collect_selector"
                    android:drawablePadding="@dimen/space_8"
                    android:gravity="center"
                    android:textColor="@color/font_gray"
                    android:textSize="@dimen/font_size_11" />
            </RelativeLayout>
    
            <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:layout_marginBottom="9dp"
                android:layout_marginTop="9dp"
                android:background="@color/album_line_color" />
    
            <RelativeLayout
                android:id="@+id/rl_album_comment"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/white_item_selector">
    
                <TextView
                    android:id="@+id/tv_album_comment"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:drawableLeft="@drawable/icon_album_detail_comment"
                    android:drawablePadding="@dimen/space_8"
                    android:gravity="center"
                    android:textColor="@color/font_gray"
                    android:textSize="@dimen/font_size_11" />
            </RelativeLayout>
        </LinearLayout>
    
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="48dp"
            android:background="@color/album_detail_line" />
    </com.xxxx.views.ProgressLayout>
    
    • 设置折叠收起和展开的监听 通过appBarLayout的OnOffsetChangedListener 的监听
    appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
                @Override
                public void onStateChanged(AppBarLayout appBarLayout, State state) {
                    if( state == AppBarStateChangeListener.State.EXPANDED ) {
                        //展开状态
                        mTopBar.setTitle("");
                    }else if(state == State.COLLAPSED){
                        //折叠状态
                        mTopBar.setTitle(mAlbumName);
                    }else {
                        //中间状态
                        mTopBar.setTitle("");
                    }
                }
            });
    
    • 自定义的监听
    import android.support.design.widget.AppBarLayout;
    
    public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
    
        private State mCurrentState = State.IDLE;
    
        @Override
        public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
            if (i == 0) {
                if (mCurrentState != State.EXPANDED) {
                    onStateChanged(appBarLayout, State.EXPANDED);
                }
                mCurrentState = State.EXPANDED;
            } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
                if (mCurrentState != State.COLLAPSED) {
                    onStateChanged(appBarLayout, State.COLLAPSED);
                }
                mCurrentState = State.COLLAPSED;
            } else {
                if (mCurrentState != State.IDLE) {
                    onStateChanged(appBarLayout, State.IDLE);
                }
                mCurrentState = State.IDLE;
            }
        }
    
        public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
    
        public static enum State {
            EXPANDED,
            COLLAPSED,
            IDLE
        }
    
    }
    

    相关文章

      网友评论

        本文标题:AppBarLayout和CollapsingToolbarLa

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