Andorid高仿淘宝商品详情滑动渐变标题栏

效果展示

思路

先看结构图,根据滑动距离计算alpha

1. 最外层是一个 NestedScrollView，监听Y轴滑动距离。
2. 长的是一个titleBar，背景为透明色,滑动过程中由透明色变为白色
3. 两边的是功能按钮，由一个白色的图标和一个黑色半透明的圆形背景组成：图标由白色变为黑色，背景由黑色半透明变为白色透明
4. 中间的标题文字由透明色变为黑色

代码

  scrollHeight = banner.getLayoutParams().height;
  scrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
             @Override
             public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                 if (scrollY <= scrollHeight) {
                     scrollScale = (float) scrollY / scrollHeight;
                     scrollAlpha = (int) (255 * scrollScale);

                     //文字由透明变为黑色
                     txTitle.setTextColor(Color.argb(scrollAlpha, 0, 0, 0));

                     //背景由透明变为白色
                     topView.setBackgroundColor(Color.argb(scrollAlpha, 255, 255, 255));

                     //按钮背景由黑变白
                     btnLeft.setColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
                     btnRight.setColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));

                     //按钮文字由白变黑
                     scrollAlpha = 255 - scrollAlpha;
                     btnRightIcon.setTextColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
                     btnLeftIcon.setTextColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
                 }
             }
         });

然后运行，看效果，缓慢滑动没有问题，快速滑动，功能按钮的背景没有消失~~~

修正代码

scrollHeight = banner.getLayoutParams().height;
scrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if (scrollY <= scrollHeight) {
                    //开启滑动过快
                    isCommitColor = false;

                    scrollScale = (float) scrollY / scrollHeight;
                    scrollAlpha = (int) (255 * scrollScale);

                    //文字由透明变为黑色
                    txTitle.setTextColor(Color.argb(scrollAlpha, 0, 0, 0));

                    //背景由透明变为白色
                    topView.setBackgroundColor(Color.argb(scrollAlpha, 255, 255, 255));

                    //按钮背景由黑变白
                    btnLeft.setColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
                    btnRight.setColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));

                    //按钮文字由白变黑
                    scrollAlpha = 255 - scrollAlpha;
                    btnRightIcon.setTextColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
                    btnLeftIcon.setTextColor(Color.argb(255, scrollAlpha, scrollAlpha, scrollAlpha));
                } else {
                    if (!isCommitColor) {
                        //防止滑动过快bug
                        isCommitColor = true;

                        //文字由透明变为黑色
                        txTitle.setTextColor(Color.BLACK);
                        //背景由透明变为白色
                        topView.setBackgroundColor(Color.WHITE);

                        //按钮背景由黑变白
                        btnLeft.setColor(Color.WHITE);
                        btnRight.setColor(Color.WHITE);

                        //按钮文字由白变黑
                        btnRightIcon.setTextColor(Color.BLACK);
                        btnLeftIcon.setTextColor(Color.BLACK);
                    }
                }
            }
        });

当滑动距离超过参照物的高度scrollHeight就强制设置为想要的效果

加上一个boolean isCommitColor为了节约内存

Library

• 沉浸式状态栏：Sofia

注意

• theme要设置成全屏

• 使用Sofia设置沉浸式效果

 Sofia.with(this)
                .statusBarDarkFont()
                .invasionStatusBar()
                .fitsSystemWindowView(topView)
                .navigationBarBackground(Color.BLACK);

• 什么是IconFont？
  
  阿里的字体图标，可以动态改变颜色，具体用法自行百度

• 华为的虚拟按键可能有问题，Sofia还没有兼容好

GitHub

下载不要积分，求Star！！！