android 轻松搞定标题随scrollview滑动变色

￡神魔★判官ぃ 2022-08-20 10:26 186阅读 0赞

要实现某个view的背景透明度跟随scrollview滑动而改变需要重新scrollview的onOverScrolled方法，该方法随着滑动变化（包括手指滑动、手指移开惯性滑动）而响应，所以最适合做变色处理。

# step1:设定布局 #

由于我们要实现的是滑动时标题的背景透明度改变，固定顶部的标题view不能在srcollview里面跟随滑动，所以需要这样布局:

# step2:添加需要用到的方法 #

滑动时，某个view要变色，重新scrollview后，添加方法让其知道该view需要变色

private View mTitleView;
        /** * 变色标题view * @param view */
        public void setupTitleView (View view) {
            this.mTitleView = view;
        }

滑动时变色需要参考scrollview里面的某个子view的滑动高度，如果该子view上划完全划出屏幕，则标题view背景透明为0：

private View mByWhichView;
        /** * 跟随的view * @param view */
        public void setupByWhichView(View view) {
            mByWhichView = view;
        }

再添加一个设置，如果不要背景透明度渐变：

private boolean shouldSlowlyChange;
        public void setShouldSlowlyChange(boolean slowlyChange) {
            this.shouldSlowlyChange = slowlyChange;
        }

# step3:代码实现 #

**
     * 滑动时标题变色view
     * Created by george.yang on 16/2/21.
     */
    public class ScrollChangeScrollView extends ScrollView { 
        private View mByWhichView;
        private View mTitleView;
        private boolean shouldSlowlyChange = true;
    
        public ScrollChangeScrollView(Context context) {
            super(context);
        }
    
        public ScrollChangeScrollView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public ScrollChangeScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        public ScrollChangeScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
        }
    
    
        @Override
        public void scrollTo(int x, int y) {
            //这是为了修复noScrllListView嵌套在srcollview时就自动滑动到noscrolllistview的顶部的bug，不影响使用
            if (x == 0 && y == 0 || y <= 0) {
                super.scrollTo(x, y);
            }
        }
    
        public void setListener(OnScrollListener listener){
            this.mListener = listener;
        }
    
        public void setShouldSlowlyChange(boolean slowlyChange) {
            this.shouldSlowlyChange = slowlyChange;
        }
    
        /** * 设置透明度渐变的标题view * @param view */
        public void setupTitleView (View view) {
            this.mTitleView = view;
        }
    
        /** * 跟随的view * @param view */
        public void setupByWhichView(View view) {
            mByWhichView = view;
        }
    
        @Override
        protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX,
                                      boolean clampedY) {
            super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
    
            if (scrollY >= mByWhichView.getTop() + mByWhichView.getMeasuredHeight()) {
                mTitleView.setBackgroundColor(Color.BLACK);
            } else if (scrollY>=0) {
                if (!shouldSlowlyChange) {
                    mTitleView.setBackgroundColor(Color.TRANSPARENT);
                } else {
                    float persent = scrollY * 1f / (mByWhichView.getTop() + mByWhichView.getMeasuredHeight());
                    int alpha = (int) (255 * persent);
                    int color = Color.argb(alpha,0,0,0);
                    mTitleView.setBackgroundColor(color);
                }
            }
    
            if (mListener!=null) {
                mListener.onScroll(scrollX, scrollY);
            }
        }
    }

# 效果如下: #

![滑动前][20160223155014970]

![滑动变色中][20160223155025017]

![参考的view超出屏幕后][view]

[20160223155014970]: /images/20220731/2b54b63d66e049e39598b3f459a5d320.png
[20160223155025017]: /images/20220731/f165414f2a9345f3a8a320b8e1ac574c.png
[view]: /images/20220731/78a24ff4d5cf4793806251943a478b59.png