【Android视图效果】仿QQ空间滑动改变标题栏颜色

436 阅读2分钟

前言

最近在倒腾公司之前的项目,发现之前的界面是个白色标题栏,不是很美观,所以做了些改进。

效果图

165815uykp80g8y3goo5vz.gif

思路

整个布局大体上是ScrollView里面包含了一个ImageViewRecyclerView,所以先得到ImageView的高度,当ScrollView向上滑动时,设置标题栏的背景色、文字颜色,当超过ImageView的高度时,设置其背景为白色,字体为黑色。

首先想到的是ScrollViewsetOnScrollChangeListener方法,但是这是6.0之后才可以用

165828fd31156pduyddyze.png

偶尔发现5.0新增的NestedScrollView 可以设置这个滑动监听,看了看源码

165836lnzoa3hszefa5osj.png

原来如此,我们也仿照着写个,先定义一个接口;

 public interface OnScrollChangedListener {
        /**
         * 滑动监听
         *
         * @param scrollView ScrollView控件
         * @param x          x轴坐标
         * @param y          y轴坐标
         * @param oldx       上一个x轴坐标
         * @param oldy       上一个y轴坐标
         */
        void onScrollChanged(ScrollView scrollView, int x, int y, int oldx, int oldy);
    }

然后自定义MyScrollView继承于ScrollView

public class MyScrollView extends ScrollView {
	private OnScrollChangedListener mOnScrollChangedListener;

    public void setmOnScrollChangedListener(OnScrollChangedListener mOnScrollChangedListener) {
        this.mOnScrollChangedListener = mOnScrollChangedListener;
    }
    public MyScrollView(Context context) {
        super(context);
    }

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

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

}

在他的onScrollChanged方法中调下我们刚写的接口

  @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (mOnScrollChangedListener != null) {
            mOnScrollChangedListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }

然后是计算滑动高度,设置颜色

lsv.setmOnScrollChangedListener(new SlideToBottomScrollView.OnScrollChangedListener() {
            @Override
            public void onScrollChanged(ScrollView scrollView, int x, int y, int oldx, int oldy) {

                int minHeight = 50;
                int maxHeight = rl_userhome_top.getMeasuredHeight();
                if (maxHeight == 0) {
                    maxHeight = 500;
                }
                if (scrollView.getScrollY() <= minHeight) {
                    mAlpha = 0;
                } else if (scrollView.getScrollY() > maxHeight) {
                    mAlpha = 255;
                } else {
                    mAlpha = (scrollView.getScrollY() - minHeight) * 255 / (maxHeight - minHeight);
                }

                if (mAlpha <= 0) {
                    tv_title.setTextColor(Color.rgb(255, 255, 255));
                    iconColorFilter(Color.parseColor("#ffffff"));
                    rl_userhome_title.setBackgroundColor(Color.argb(0, 255, 255, 255));

                } else if (mAlpha >= 255) {
                    tv_title.setTextColor(Color.rgb(0, 0, 0));
                    iconColorFilter(Color.parseColor("#000000"));
                    rl_userhome_title.setBackgroundColor(Color.argb(mAlpha, 255, 255, 255));

                } else {
                    tv_title.setTextColor(Color.rgb(255 - mAlpha, 255 - mAlpha, 255 - mAlpha));
                    iconColorFilter(Color.rgb(255 - mAlpha, 255 - mAlpha, 255 - mAlpha));
                    rl_userhome_title.setBackgroundColor(Color.argb(mAlpha, mAlpha, mAlpha, mAlpha));

                }

            }
        });
 /**
     * 标题栏/导航栏icon 颜色改变
     *
     * @param color
     */
    private void iconColorFilter(int color) {
        PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);
        iv_back.setColorFilter(colorFilter);
    }

tip: 标题栏中,返回键是个图片,我们可以使用PorterDuffColorFilter 这个类来改变图片的颜色,其他用法可以自行百度。

总结

平时还是应该多学习Android的源码,从中学习,提升自己。

你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢