自定义ScrollView实现Toolbar（标题栏）渐变

当下，越来越多的页面Toolbar都会随着界面的滑动呈现不同的透明状态。

如图：

要做成这样的效果有很多种，这篇文章就说一下我今天用到的一种（较为简洁，不喜勿喷）。

先把我的编程思想告诉各位，因为我觉得思想才是最重要的。

1、自定义一个类，继承自ScrollView，并重写它的 onScrollChanged 方法；

2、在 onScrollChanged 中获取 ScrollView 在Y轴的移动距离，并根据此距离改变 Toolbar(标题栏) 的透明度。

直接晒代码:

package com.test.widget;

import android.content.Context;
import android.graphics.Color;
import android.support.annotation.ColorInt;
import android.support.v4.graphics.ColorUtils;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ScrollView;

/**
 * Created by 晖仔(Milo) on 2016/12/26.
 * email:303767416@qq.com
 */

public class TranslucentScrollView extends ScrollView {

    //渐变的视图
    private View transView;
    //渐变颜色
    private int transColor = Color.WHITE;
    //渐变视图高度
    private int transViewHeight = 0;
    //渐变结束位置
    private int transEndY = 0;

    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);
    }

    /**
     * 设置渐变视图
     *
     * @param transView       渐变的视图
     * @param transColor      渐变颜色
     * @param transViewHeight 渐变视图高度
     * @param transEndY       渐变结束位置
     */
    public void setTransView(View transView, @ColorInt int transColor, int transViewHeight, int transEndY) {
        this.transView = transView;
        //初始视图-透明
        this.transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, 0));
        this.transViewHeight = transViewHeight;
        this.transEndY = transEndY;
        this.transColor = transColor;
        if (transViewHeight > transEndY) {
            throw new RuntimeException("transViewHeight 不得大于 transEndY .. ");
        }
    }

    /**
     * 获取透明度
     *
     * @return
     */
    private int getTransAlpha() {
        float scrollY = getScrollY();
        float viewOffsetY = transEndY - transViewHeight;
        float offset = 1 - Math.max((viewOffsetY - scrollY) / viewOffsetY, 0f);

        //透明度
        return Math.abs((int) (offset * 255));
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (transView != null) {
            transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, getTransAlpha()));
        }
    }

}

再附上引用的代码：

package com.test;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import com.test.utils.SizeUtils;
import com.test.widget.TranslucentScrollView;

/**
 * Created by Administrator on 2016/12/16.
 * email:303767416@qq.com
 */

public class TestActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TranslucentScrollView scrollView;


    public static Intent createIntent(Context context) {
        Intent intent = new Intent(context, TestActivity.class);
        return intent;
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        init();
    }

    void init() {
        toolbar = (Toolbar) findViewById(R.id.toolbar_test);
        scrollView = (TranslucentScrollView) findViewById(R.id.trans_scrollview);
        scrollView.setTransView(toolbar, getResources().getColor(R.color.colorPrimary), SizeUtils.dip2px(this, 50), SizeUtils.dip2px(this, 300));

        getSupportActionBar().hide();
    }
}

由于代码比较简单，所以不做过多的解释。

源码地址：https://github.com/yanjunhui2014/TranslucentScrollView

如有兼容问题请多多包涵，我会在接下来的版本里，对ListView、RecycleView、WebView等组件进行渐变扩展，希望有小伙伴持续关注 。