协调者布局CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现标题渐变效果

原创 于 2019-08-24 11:00:37 发布 · 956 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#toolbar渐变效果

本文详细展示了Android应用中布局代码的实例，包括CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout等组件的使用，以及如何通过监听AppBarLayout的滚动事件实现Toolbar背景渐变效果。

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

一、布局部分代码
<android.support.design.widget.CoordinatorLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
xmlns:app=“http://schemas.android.com/apk/res-auto”
android:layout_width=“750dp”
android:layout_height=“match_parent”>

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="750dp"
        android:layout_height="wrap_content"
        app:layout_behavior="com.changdao.weGood.widget.FlingBehavior">

    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:layout_height="wrap_content">
        <!-- app:layout_collapseMode="pin"设置收起来样式-->
        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="pin"
                android:background="@color/bgGray">
            <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="600dp"
                    android:scaleType="fitXY"
                    android:src="@mipmap/shangbeijing"/>
            <TextView
                    android:id="@+id/tvMy"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:alpha="0.7"
                    android:text="我的余额"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="170dp"
                    android:textColor="@color/white"
                    android:textSize="18sp"/>
            <TextView
                    android:id="@+id/tv_balabce"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tvMy"
                    android:text="65699.55"
                    android:textStyle="bold"
                    android:layout_marginLeft="30dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"/>
            <TextView
                    android:layout_width="188dp"
                    android:layout_height="140dp"
                    android:text="体现"
                    android:textSize="14sp"
                    android:gravity="center"
                    android:textColor="@color/redff1f44"
                    android:layout_alignParentRight="true"
                    android:layout_marginTop="210dp"
                    android:background="@mipmap/angniu"/>
            <TextView
                    android:id="@+id/tv_yesterdayMoney"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_balabce"
                    android:alpha="0.7"
                    android:text="昨日收入(元)  789.30"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:textColor="@color/white"
                    android:textSize="10sp"/>
            <TextView
                    android:id="@+id/tv_lastMonthMoney"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_balabce"
                    android:layout_toRightOf="@+id/tv_yesterdayMoney"
                    android:alpha="0.7"
                    android:text="上月收入(元)  3789.30"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="5dp"
                    android:textColor="@color/white"
                    android:textSize="10sp"/>
            <LinearLayout
                    android:id="@+id/ll_money"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="30dp"
                    android:layout_marginTop="50dp"
                    android:layout_below="@+id/tv_yesterdayMoney"
                    android:orientation="vertical">
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:alpha="0.7"
                        android:text="今日收入(元)"
                        android:textColor="@color/white"
                        android:textSize="12sp"/>
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:text="836.3"
                        android:textColor="@color/white"
                        android:textSize="16sp"/>
            </LinearLayout>
            <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="50dp"
                    android:layout_centerInParent="true"
                    android:layout_below="@+id/tv_yesterdayMoney"
                    android:orientation="vertical">
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:alpha="0.7"
                        android:text="结算中收入(元)"
                        android:textColor="@color/white"
                        android:textSize="12sp"/>
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:text="836.3"
                        android:textColor="@color/white"
                        android:textSize="16sp"/>
            </LinearLayout>
            <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="30dp"
                    android:layout_marginTop="50dp"
                    android:layout_alignParentRight="true"
                    android:layout_below="@+id/tv_yesterdayMoney"
                    android:orientation="vertical">
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:alpha="0.7"
                        android:text="累计收入(元)"
                        android:textColor="@color/white"
                        android:textSize="12sp"/>
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:text="836.3"
                        android:textColor="@color/white"
                        android:textSize="16sp"/>
            </LinearLayout>
            <!--添加银行卡-->
            <RelativeLayout
                    android:layout_width="700dp"
                    android:layout_height="200dp"
                    android:layout_below="@+id/ll_money"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="30dp"
                    android:background="@drawable/bg_20dp_gradient_blue">
                <!--未绑定卡状态-->
                <RelativeLayout
                        android:id="@+id/rl_bindZhiFuBao"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:visibility="visible">
                    <ImageView
                            android:id="@+id/tv_add"
                            android:layout_width="72dp"
                            android:layout_height="72dp"
                            android:scaleType="fitXY"
                            android:layout_margin="20dp"
                            android:layout_centerVertical="true"
                            android:src="@mipmap/tianjia"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_toRightOf="@+id/tv_add"
                            android:layout_centerVertical="true"
                            android:text="添加支付宝"
                            android:textStyle="bold"
                            android:textColor="@color/white"
                            android:textSize="16sp"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_centerVertical="true"
                            android:layout_marginRight="20dp"
                            android:paddingTop="5dp"
                            android:paddingBottom="5dp"
                            android:paddingLeft="20dp"
                            android:paddingRight="20dp"
                            android:background="@drawable/bg_50dp_solid_buleeef7ff"
                            android:text="立即绑定"
                            android:textStyle="bold"
                            android:textColor="@color/blue1b82dd"
                            android:textSize="12sp"/>
                    <ImageView
                            android:layout_width="200dp"
                            android:layout_height="50dp"
                            android:scaleType="fitXY"
                            android:layout_alignParentBottom="true"
                            android:src="@mipmap/zuobolan"/>
                    <ImageView
                            android:layout_width="220dp"
                            android:layout_height="54dp"
                            android:scaleType="fitXY"
                            android:layout_alignParentRight="true"
                            android:src="@mipmap/youbolan"/>

                </RelativeLayout>
                <!--已绑定卡状态-->
                <RelativeLayout
                        android:layout_width="match_parent"
                        android:visibility="gone"
                        android:layout_height="match_parent">
                    <ImageView
                            android:id="@+id/tv_label"
                            android:layout_width="40dp"
                            android:layout_height="40dp"
                            android:scaleType="fitXY"
                            android:layout_marginLeft="20dp"
                            android:layout_marginTop="30dp"
                            android:src="@mipmap/zhifubao"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="40dp"
                            android:gravity="center"
                            android:layout_toRightOf="@+id/tv_label"
                            android:text="支付宝"
                            android:layout_marginLeft="8dp"
                            android:layout_marginTop="27dp"
                            android:textStyle="bold"
                            android:textColor="@color/white"
                            android:textSize="16sp"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true"
                            android:text="134****8206"
                            android:layout_marginLeft="20dp"
                            android:textStyle="bold"
                            android:textColor="@color/white"
                            android:textSize="16sp"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_marginRight="20dp"
                            android:layout_marginTop="32dp"
                            android:alpha="0.5"
                            android:paddingTop="5dp"
                            android:paddingBottom="5dp"
                            android:paddingLeft="20dp"
                            android:paddingRight="20dp"
                            android:background="@drawable/bg_50dp_white_shape"
                            android:text="取消绑定"
                            android:textColor="@color/white"
                            android:textSize="10sp"/>
                    <ImageView
                            android:layout_width="88dp"
                            android:layout_height="66dp"
                            android:scaleType="fitXY"
                            android:layout_alignParentRight="true"
                            android:layout_alignParentBottom="true"
                            android:layout_marginRight="20dp"
                            android:layout_marginBottom="16dp"
                            android:src="@mipmap/zhi"/>
                    <View
                            android:layout_width="match_parent"
                            android:layout_height="50dp"
                            android:alpha="0.06"
                            android:layout_alignParentBottom="true"
                            android:background="@color/white"/>
                    <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="50dp"
                            android:layout_centerVertical="true"
                            android:layout_alignParentBottom="true"
                            android:text="到账时间以支付宝为准"
                            android:layout_marginLeft="20dp"
                            android:alpha="0.2"
                            android:gravity="center_vertical"
                            android:textColor="@color/white"
                            android:textSize="10sp"/>

                </RelativeLayout>
            </RelativeLayout>
        </RelativeLayout>
        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="130dp"
                app:contentInsetStart="0dp"
                android:background="@drawable/bg_gradient_theme"
                app:layout_collapseMode="pin">

            <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="130dp">

                <ImageView
                        android:id="@+id/iv_back"
                        android:layout_width="80dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="50dp"
                        android:padding="20dp"
                        android:src="@mipmap/fanhui_white"/>
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="80dp"
                        android:text="收入明细"
                        android:layout_marginTop="50dp"
                        android:gravity="center"
                        android:layout_centerHorizontal="true"
                        android:textColor="@color/white"
                        android:textSize="18sp"/>
                <ImageView
                        android:id="@+id/iv_gengDuo"
                        android:layout_width="80dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="50dp"
                        android:layout_alignParentRight="true"
                        android:padding="20dp"
                        android:src="@mipmap/more_white"/>
                <ImageView
                        android:id="@+id/iv_question"
                        android:layout_width="80dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="50dp"
                        android:layout_toLeftOf="@+id/iv_gengDuo"
                        android:padding="20dp"
                        android:src="@mipmap/wenti"/>
            </RelativeLayout>
        </android.support.v7.widget.Toolbar>

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

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="10dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:orientation="vertical">
    <LinearLayout
            android:layout_width="600dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:paddingLeft="10dp">

        <android.support.design.widget.TabLayout
                android:id="@+id/tab_ATM"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:tabBackground="@android:color/transparent"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/themeColor"
                app:tabMode="fixed"
                app:tabIndicatorHeight="4dp"
                app:tabMinWidth="200dp"
                app:tabRippleColor="@android:color/transparent"
                app:tabSelectedTextColor="@color/themeColor"
                app:tabTextAppearance="@style/TextAppearanceBig2"/>

    </LinearLayout>
    <android.support.v4.view.ViewPager
            android:id="@+id/vp_ATM"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"/>
</LinearLayout>

二、通过AppBarLayout的监听事件设置自定义Toolbar背景渐变
代码如何下：
/**

  • 渐变toolbar背景
    /
    private void setAvatorChange() {
    appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    //verticalOffset始终为0以下的负数
    float percent = (Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange());
    //toolbar渐变效果：
    toolbar.getBackground().setAlpha(Math.round(255    percent));
    //toolbar渐变效果：如果使用这种方式，还没开始滑动时出现看不见toolbar内容
    //toolbar.setAlpha(percent);
    }
    });
    }

在这里插入图片描述

**注意：**如果直接使用toolbar.setAlpha(percent);方法设置透明度，会出现开始时看不到toolbar内容，滑动之后才会出现

宗经
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值