标题栏渐变效果

一：效果图

 

二：布局代码就不贴了，最外帧布局嵌套相对布局的都可以（方法很多），有需要可以留言。。。

三:  自定义View，这里面我继承的是Scrollview

public class BoxDetailScrollView extends ScrollView {

    private ScrollViewListener scrollViewListener = null;

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

    public BoxDetailScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

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

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null) {
            if (oldy < y ) {                                            // 手指向上滑动，屏幕内容下滑
                scrollViewListener.onScroll(oldy,y,false);
            } else if (oldy > y ) {                                     // 手指向下滑动，屏幕内容上滑
                scrollViewListener.onScroll(oldy,y,true);
            }
        }
    }

    /**
     * dy Y轴滑动距离，isUp 是否返回顶部
     */
    public  interface ScrollViewListener{//
         void onScroll(int oldy, int dy, boolean isUp);
    }
}

四：将自定义view嵌入到布局中（进行包裹 即可），有需要可留言。。。

五：加载数据代码

       五.1:首先设置标题的监听动画

/**
     * 设置标题监听动画
     */
    private void setTitleListenerAni() {
        final float title_height = getResources().getDimension(R.dimen.title_height);                                       //获取dimen属性中 标题和头部图片的高度
        final float head_height = getResources().getDimension(R.dimen.head_height);
        boxdetail_sv.setOnScrollListener(new BoxDetailScrollView.ScrollViewListener() {
            @Override
            public void onScroll(int oldy, int dy, boolean isUp) {
                float move_distance = head_height - title_height;
                if (!isUp && dy <= move_distance) {                             //手指往上滑,距离未超过200dp
                                                                                //标题栏逐渐从透明变成不透明
                    title_bar.setBackgroundColor(ContextCompat.getColor(BoxDetailActivity.this, R.color.white));
                    TitleAlphaChange(dy, move_distance);                        //标题栏渐变
                    HeaderTranslate(dy);                                        //图片视差平移
                } else if (!isUp && dy > move_distance) {                       //手指往上滑,距离超过200dp
                    TitleAlphaChange(1, 1);                                     //设置不透明百分比为100%，防止因滑动速度过快，导致距离超过200dp,而标题栏透明度却还没变成完全不透的情况。
                    HeaderTranslate(head_height);                               //这里也设置平移，是因为不设置的话，如果滑动速度过快，会导致图片没有完全隐藏。
                    iv_back.setImageResource(R.mipmap.icon_back_black);
                    if (isCollection == true){
                        iv_collection.setImageResource(R.mipmap.content_icon_like_pressed);
                    }else{
                        iv_collection.setImageResource(R.mipmap.icon_like_black);
                    }
                } else if (isUp && dy > move_distance) {                        //返回顶部，但距离头部位置大于200dp
                                                                                //不做处理
                } else if (isUp && dy <= move_distance) {                       //返回顶部，但距离头部位置小于200dp  --白色
                                                                                //标题栏逐渐从不透明变成透明
                    TitleAlphaChange(dy, move_distance);                        //标题栏渐变
                    HeaderTranslate(dy);                                        //图片视差平移
                    iv_back.setImageResource(R.mipmap.icon_back_white);
                    if (isCollection == true){
                        iv_collection.setImageResource(R.mipmap.content_icon_like_pressed);
                    }else{
                        iv_collection.setImageResource(R.mipmap.icon_like_white);
                    }
                }
            }
        });
    }

      五.2:设置标题栏渐变

/**
     * 设置标题栏透明度变化
     * @param dy
     * @param mHeaderHeight_px
     */
    private void TitleAlphaChange(int dy, float mHeaderHeight_px) {
        float percent = (float) Math.abs(dy) / Math.abs(mHeaderHeight_px);
        //如果是设置背景透明度，则传入的参数是int类型，取值范围0-255
        //如果是设置控件透明度，传入的参数是float类型，取值范围0.0-1.0
        //这里我们是设置背景透明度就好，因为设置控件透明度的话，返回ICON等也会变成透明的。
        //alpha 值越小越透明
        int alpha = (int) (percent * 255);
        title_bar.getBackground().setAlpha(alpha);//设置控件背景的透明度，传入int类型的参数（范围0~255）
        rl_back.getBackground().setAlpha(255 - alpha);
        rl_collection.getBackground().setAlpha(255 - alpha);
    }
    private void HeaderTranslate(float distance) {
        rl_imageview.setTranslationY(-distance);
        rl_imageview.setTranslationY(distance/2);
    }

       五.3:针对图片的平移效果

/**
     * 图片平移
     * @param distance
     */
    private void HeaderTranslate(float distance) {
        rl_imageview.setTranslationY(-distance);
        rl_imageview.setTranslationY(distance/2);
    }

ok，打完收工。有需要可留言。。。共同进步，谢谢！