Toolbar渐变效果实践-优快云博客

本文介绍如何使用Toolbar实现随ScrollView滚动渐变的效果。通过自定义TranslucentScrollView监听滑动事件，调整Toolbar背景颜色及透明度，同时改变标题颜色，实现从全透明到完全显示的过渡。

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

Material Design:一种界面设计语言

这里写图片描述

之前没怎么用过toolbar，最近看书看到，toolbar挺实用的，而且官方推荐实用的。有必要详细了解下了。

对比优点：

Actionbar：只能位于活动的顶部
Toolbar：继承了Actionbar的所有功能，但更灵活，可以配合其他控件来完成一些Material Design的效果。

具体学习

主题AppTheme指定为不带ActionBar的：

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Theme.AppCompat.NoActionBar：深色主题：主题色为深色，陪衬色设为淡色

这里写图片描述

Theme.AppCompat.Light.NoActionBar：淡色主题：主题色为淡色，陪衬色设为深色

这里写图片描述

页面写法：
使用app命名空间是为了兼容低版本。

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
    <!--actionbar的高度-->
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    <!--单独使用深色主题-->
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    <!--弹窗使用浅色主题-->
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    />

写一个toolbar随ScrollView渐变效果

参考文章：https://www.cnblogs.com/wjtaigwh/p/5818371.html

这里写图片描述

activity.xml

这里写图片描述

1.toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="22dp"
    android:paddingBottom="4dp"
    >

    <!--左侧按钮-->
    <ImageView
        android:id="@+id/headLeftImg"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:padding="10dp"
        android:scaleType="center"
        android:src="@mipmap/goodsback"
        />

    <!--标题-->
    <TextView
        android:id="@+id/headTitleTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:tag="50"
        android:text="@string/app_name"
        android:textColor="#00000000"/>

</android.support.v7.widget.Toolbar>

2.TranslucentScrollView.java


import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

/**
 * 自定义ScrollView，监听滑动
 * @author liyuanli
 * @data 2017/11/17
 */

public class TranslucentScrollView extends ScrollView {

    private OnScrollChangedListener mOnScrollChangedListenner;

    public interface OnScrollChangedListener {
        void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);
    }

    public void setOnScrollChangedListenner(OnScrollChangedListener onScrollChangedListenner) {
        mOnScrollChangedListenner = onScrollChangedListenner;
    }


    public TranslucentScrollView(Context context) {
        super(context);
    }

    public TranslucentScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TranslucentScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnScrollChangedListenner != null) {
            mOnScrollChangedListenner.onScrollChanged(this, l, t, oldl, oldt);
        }
    }

}

3.Activity.java

    private float headerHeight;//顶部高度
    private float minHeaderHeight;//顶部最低高度，即Bar的高度

    @Override
    public void initView(Bundle savedInstanceState) {
        scrollview.setOnScrollChangedListenner(this);

        headerHeight = getResources().getDimension(R.dimen.dimen_900);
        minHeaderHeight = getResources().getDimension(R.dimen.abc_action_bar_default_height_material);

    }

    @Override
    public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {
        //y轴偏移量
        float scrollY = who.getScrollY();
        //变化率
        float headerBarOffsetY = headerHeight - minHeaderHeight;
        float offset = 1 - Math.max((headerBarOffsetY - scrollY) / headerBarOffsetY, 0f);

        if (offset <= 0.1) {
            headLeftImg.setImageResource(R.mipmap.goodsback);
            iv_totop.setVisibility(View.GONE);
        } else {
            headLeftImg.setImageResource(R.mipmap.back);
            iv_totop.setVisibility(View.VISIBLE);
        }
        headTitleTv.setTextColor(Color.argb((int) (offset * 255), 0, 0, 0));
        //Toolbar背景色透明度goodsback
        toolbar.setBackgroundColor(Color.argb((int) (offset * 255), 255, 255, 255));
    }