AppBarLayout嵌套CollapsingToolbarLayout实现折叠屏去除阴影

原创 于 2021-01-22 17:35:54 发布 · 1.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android

本文介绍如何在Android中为AppBarLayout设置阴影效果，包括使用StateListAnimator和ObjectAnimator的方法，以及在XML中设置阴影的具体步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图：

代码：


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_F7F7F7"
    android:orientation="vertical">

    <include layout="@layout/fragment_home_top"
      />

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/smartRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="44dp">

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/coordinator"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:stateListAnimator="@drawable/selector_appbar">

                <android.support.design.widget.CollapsingToolbarLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">


                        <android.support.constraint.ConstraintLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content">

                            <com.newland.satrpos.starposmanager.widget.TextDrawable

                                android:id="@+id/td_search_trans"
                                style="@style/tv_content_white"
                                android:layout_marginTop="@dimen/dp_35"
                                android:drawablePadding="@dimen/dp_8"
                                android:gravity="center"
                                android:text="交易查询"
                                app:layout_constraintHorizontal_chainStyle="spread"
                                app:layout_constraintLeft_toLeftOf="parent"
                                app:layout_constraintRight_toLeftOf="@+id/td_search_settle"
                                app:layout_constraintTop_toTopOf="parent"
                                app:topDrawable="@mipmap/home_icon_jxcx"
                                app:topDrawableHeight="@dimen/dp_30"
                                app:topDrawableWidth="@dimen/dp_30" />

                            <com.newland.satrpos.starposmanager.widget.TextDrawable
                                android:id="@+id/td_search_settle"
                                style="@style/tv_content_white"
                                android:drawablePadding="@dimen/dp_8"
                                android:gravity="center"
                                android:text="结算查询"
                                app:layout_constraintLeft_toRightOf="@+id/td_search_trans"
                                app:layout_constraintRight_toLeftOf="@+id/td_search_refund"
                                app:layout_constraintTop_toTopOf="@id/td_search_trans"
                                app:topDrawable="@mipmap/home_icon_jscx"
                                app:topDrawableHeight="@dimen/dp_30"
                                app:topDrawableWidth="@dimen/dp_30" />

                            <com.newland.satrpos.starposmanager.widget.TextDrawable
                                android:id="@+id/td_search_refund"
                                style="@style/tv_content_white"
                                android:drawablePadding="@dimen/dp_8"
                                android:gravity="center"
                                android:text="退款查询"
                                app:layout_constraintLeft_toRightOf="@+id/td_search_settle"
                                app:layout_constraintRight_toLeftOf="@+id/td_order_manager"
                                app:layout_constraintTop_toTopOf="@id/td_search_trans"
                                app:topDrawable="@mipmap/home_icon_tkcx"
                                app:topDrawableHeight="@dimen/dp_30"
                                app:topDrawableWidth="@dimen/dp_30" />

                            <com.newland.satrpos.starposmanager.widget.TextDrawable
                                android:id="@+id/td_order_manager"
                                style="@style/tv_content_white"
                                android:drawablePadding="@dimen/dp_8"
                                android:gravity="center"
                                android:text="订单管理"
                                app:layout_constraintLeft_toRightOf="@id/td_search_refund"
                                app:layout_constraintRight_toRightOf="parent"
                                app:layout_constraintTop_toTopOf="@id/td_search_trans"
                                app:topDrawable="@mipmap/home_icon_ddgl"
                                app:topDrawableHeight="@dimen/dp_30"
                                app:topDrawableWidth="@dimen/dp_30" />
                        </android.support.constraint.ConstraintLayout>


                        <RelativeLayout
                            android:id="@+id/home_miniads_rl"
                            android:layout_width="match_parent"
                            android:layout_height="150dp"
                            android:layout_marginLeft="@dimen/dp_15"
                            android:layout_marginRight="@dimen/dp_15"
                            android:layout_marginTop="@dimen/dp_15"
                            android:layout_marginBottom="@dimen/dp_10"
                            android:visibility="gone">

                            <com.newland.satrpos.starposmanager.widget.MiniPagerContainer
                                android:id="@+id/miniPagecontainer"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:background="@android:color/transparent">

                                <com.newland.satrpos.starposmanager.widget.MyViewPager
                                    android:id="@+id/home_miniads_vp"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent" />
                            </com.newland.satrpos.starposmanager.widget.MiniPagerContainer>

                            <com.newland.satrpos.starposmanager.widget.ViewPagerIndicator
                                android:id="@+id/viewPagerIndicator"
                                android:layout_width="30dp"
                                android:layout_height="4dp"
                                android:layout_alignParentBottom="true"
                                android:layout_marginStart="30dp"
                                android:layout_marginBottom="10dp"
                                app:default_color="@color/blue_25A2F2"
                                app:distance="8dp"
                                app:distanceType="BY_DISTANCE"
                                app:indicatorType="CIRCLE_LINE"
                                app:length="15dp"
                                app:vpi_radius="2dp" />
                        </RelativeLayout>

                        <android.support.constraint.ConstraintLayout
                            android:layout_width="match_parent"
                            android:id="@+id/cl_trans_notice"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="@dimen/dp_15"
                            android:layout_marginTop="@dimen/dp_10"
                            android:layout_marginRight="@dimen/dp_15"
                            android:background="@drawable/shape_dialog_bg">

                            <ImageView
                                android:id="@+id/iv_tip_icon"
                                android:layout_width="@dimen/dp_30"
                                android:layout_height="@dimen/dp_30"
                                android:layout_marginLeft="@dimen/dp_10"
                                android:layout_marginTop="@dimen/dp_8"
                                android:layout_marginBottom="@dimen/dp_10"
                                android:background="@mipmap/home_icon_trans_tip"
                                app:layout_constraintBottom_toBottomOf="parent"
                                app:layout_constraintLeft_toLeftOf="parent"
                                app:layout_constraintTop_toTopOf="parent" />

                            <TextView
                                android:id="@+id/tv_tip_title"
                                style="@style/tv_content_333"
                                android:layout_marginLeft="@dimen/dp_10"
                                android:text="交易提醒："
                                android:textColor="@color/color_2E2F30"
                                android:textSize="@dimen/sp_14"
                                app:layout_constraintBottom_toBottomOf="@id/iv_tip_icon"
                                app:layout_constraintLeft_toRightOf="@id/iv_tip_icon"
                                app:layout_constraintTop_toTopOf="@id/iv_tip_icon" />

                            <TextView
                                android:id="@+id/tv_tip_content"
                                style="@style/tv_content_333"
                                android:textColor="@color/color_5D6368"
                                android:textSize="@dimen/sp_14"
                                app:layout_constraintBottom_toBottomOf="@id/iv_tip_icon"
                                app:layout_constraintLeft_toRightOf="@id/tv_tip_title"
                                app:layout_constraintTop_toTopOf="@id/iv_tip_icon"
                                tools:text="支付宝收款 8.88元。" />

                            <ImageView
                                android:layout_width="9dp"
                                android:layout_height="15dp"
                                android:layout_marginRight="@dimen/dp_19"
                                android:src="@mipmap/ic_back"
                                app:layout_constraintBottom_toBottomOf="@id/iv_tip_icon"
                                app:layout_constraintRight_toRightOf="parent"
                                app:layout_constraintTop_toTopOf="@id/iv_tip_icon" />
                        </android.support.constraint.ConstraintLayout>
                    </LinearLayout>

                </android.support.design.widget.CollapsingToolbarLayout>


                <com.newland.satrpos.starposmanager.widget.ModuleTabLayout
                    android:layout_width="match_parent"
                    android:id="@+id/my_tab_layout"
                    android:layout_height="wrap_content" />

            </android.support.design.widget.AppBarLayout>


            <com.newland.satrpos.starposmanager.widget.HomeModuleScrollView
                android:id="@+id/nsv_child"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <include layout="@layout/include_home_module" />
            </com.newland.satrpos.starposmanager.widget.HomeModuleScrollView>
        </android.support.design.widget.CoordinatorLayout>
    </com.scwang.smartrefresh.layout.SmartRefreshLayout>


    <com.airbnb.lottie.LottieAnimationView
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:id="@+id/lav_float"
        android:layout_width="86dp"
        android:layout_height="76dp"
        android:layout_marginEnd="@dimen/dp_8"
        android:layout_marginBottom="52dp"
        android:visibility="gone" />

    <ImageView
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:id="@+id/iv_float"
        android:layout_width="86dp"
        android:layout_height="76dp"
        android:layout_marginEnd="@dimen/dp_8"
        android:layout_marginBottom="52dp"
        android:visibility="gone" />
</android.support.constraint.ConstraintLayout>

原理: Elevation这个属性需要通过StateListAnimator的方式来设置

 /**
     * Creates and sets a {@link StateListAnimator} with a custom elevation value
     */
    static void setDefaultAppBarLayoutStateListAnimator(final View view, final float elevation) {
        final int dur = view.getResources().getInteger(R.integer.app_bar_elevation_anim_duration);

        final StateListAnimator sla = new StateListAnimator();
        // 可用并且可折叠但未折叠（展开）状态下去掉阴影
        // Enabled and collapsible, but not collapsed means not elevated
        sla.addState(new int[]{android.R.attr.enabled, R.attr.state_collapsible,
                        -R.attr.state_collapsed},
                ObjectAnimator.ofFloat(view, "elevation", 0f).setDuration(dur));
        // 可用状态下加上阴影
        // Default enabled state
        sla.addState(new int[]{android.R.attr.enabled},
                ObjectAnimator.ofFloat(view, "elevation", elevation).setDuration(dur));
        // 其他状态下去掉阴影
        // Disabled state
        sla.addState(new int[0],
                ObjectAnimator.ofFloat(view, "elevation", 0).setDuration(0));

        view.setStateListAnimator(sla);
    }

解决方法: 

通过5.0后推荐的ObjectAnimator方式添加阴影，如果要在xml中设置的话，就需要新建一个Drawable资源（这里名叫appbar_elevation.xml）：

<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <!--折叠状态下的阴影-->
    <item app:state_collapsed="true">
        <objectAnimator 
            android:propertyName="elevation" 
            android:valueTo="5dp" 
            android:valueType="floatType" />
    </item>
    <!--展开状态下的阴影-->
    <item app:state_collapsed="false">
        <objectAnimator 
            android:propertyName="elevation" 
            android:valueTo="0dp" 
            android:valueType="floatType" />
    </item>
</selector>

然后为AppBarLayout设置stateListAnimator属性：

 <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="#FFFFFFFF"
        android:stateListAnimator="@drawable/appbar_elevation">

 

w1025773984
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值