状态栏随着滑动颜色渐变的实现

最新推荐文章于 2021-06-18 11:39:22 发布

一个在程序员路上前进的码农

最新推荐文章于 2021-06-18 11:39:22 发布

阅读量1.3k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_22060403/article/details/84393212

版权

这篇博客介绍了如何实现类似QQ好友动态页面中，随着滚动状态栏颜色渐变的效果。首先，需要了解沉浸式状态栏的实现，然后通过自定义ScrollView并添加滚动监听接口，动态调整标题栏的透明度来达到颜色变化的目的。

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

类似qq好友动态页面那样

发现随着滚动上面的状态栏颜色发生变化

当然你必须知道沉浸式状态的实现方式才能这样做

下面是我总结的沉浸式状态栏实现

https://blog.youkuaiyun.com/qq_22060403/article/details/80665650

废话稍多接下来回归主题状态栏颜色渐变

首先我们需要自定义一个scrollview

public class MyNestedScrollView extends NestedScrollView {

    private int downX;

    private int downY;
    private int mTouchSlop;
    private ScrollViewListener scrollViewListener = null;

    public MyNestedScrollView(Context context) {
        super(context);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
    }

    public MyNestedScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
    }

    public MyNestedScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
    }


    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent e) {
        int action = e.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                downX = (int) e.getRawX();
                downY = (int) e.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                int moveY = (int) e.getRawY();
                if (Math.abs(moveY - downY) > mTouchSlop) {
                    return true;
                }
        }
        return super.onInterceptTouchEvent(e);
    }

    public interface ScrollViewListener {
        void onScrollChanged(MyNestedScrollView scrollView, int x, int y, int oldx, int oldy);

    }

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

关键代码是里面的自定义的接口

public interface ScrollViewListener { void onScrollChanged(MyNestedScrollView scrollView, int x, int y, int oldx, int oldy); }

这里面我们重写当滚动发生改变的方法

在activity里面的代码

private void initListeners() {
    ViewTreeObserver viewTreeObserver = imgTop.getViewTreeObserver();
    viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            toolbar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            height = imgTop.getHeight();
            scrollView.setScrollViewListener(MyVideoActivity.this);
        }
    });


}

这个方法是获取上面图片的高度获取高度的目的是为了在滑动过程中根据滑动的距离我们给标题栏设置透明度

在activity里面我们实现刚才我们自定义的接口

implements MyVideoContract.View, MyNestedScrollView.ScrollViewListener {

然后我们重写里面的方法

@Override
public void onScrollChanged(MyNestedScrollView scrollView, int x, int y, int oldx, int oldy) {
    if (y <= 0) {   //设置标题的背景颜色
        toolbar.setBackgroundColor(Color.argb((int) 0, 239, 86, 112));
    } else if (y > 0 && y <= height) { //滑动距离小于banner图的高度时，设置背景和字体颜色颜色透明度渐变
        float scale = (float) y / height;
        float alpha = (255 * scale);
        toolbar.setBackgroundColor(Color.argb((int) alpha, 239, 86, 112));
    } else {    //滑动到banner下面设置普通颜色
        toolbar.setBackgroundColor(Color.argb((int) 255, 239, 86, 112));
    }
}

这样我们就能根据滑动的距离动态设置标题栏的颜色