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

最新推荐文章于 2021-05-26 05:44:33 发布

爱抖腿的飞飞

最新推荐文章于 2021-05-26 05:44:33 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android Android商城开发

本文链接：https://blog.youkuaiyun.com/LuckKissMo/article/details/79475555

Android 同时被 2 个专栏收录

19 篇文章

订阅专栏

Android商城开发

11 篇文章

订阅专栏

本文介绍了一种在移动端应用中实现滑动渐变效果的方法，通过监听滑动距离并计算透明度变化来动态调整视图的颜色。文章详细展示了如何使用NestedScrollView监听Y轴滑动，并提供了修正代码以解决快速滑动时出现的问题。

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

效果展示

效果图

思路

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

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

代码

  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));
                 }
             }
         });

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

BUG

修正代码

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要设置成全屏

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

使用Sofia设置沉浸式效果

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