文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android App页面滑动标题栏颜色渐变详解

2024-04-02 19:55

关注

通常,我们会被要求实现类似支付宝首页的特效:随着界面的滑动,栏的背景透明度渐变。

在实际开发中,常见的滑动有列表RecyclerView(ListView)滑动,NestedScrollView(ScrollView)嵌套滑动等等。

本文主要从上述两方面来探讨滑动效果。

一、RecyclerView滑动栏渐变

废话不多说,直接撸代码:
布局文件如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/white"
    tools:context=".scroll_toolbar.ScrollToolBarActivity">

    <!-- title栏-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <ImageView
            android:id="@+id/ivBack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/qb_px_20"
            android:gravity="center_vertical"
            android:src="@drawable/theme_toolbar_btn_back_fg_normal0"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#666666"
            android:textSize="16sp"
            android:padding="@dimen/qb_px_20"
            android:text="RecyclerView控制titleBar渐变"/>
    </android.support.v7.widget.Toolbar>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvZhangjie"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="@dimen/qb_px_50"
        android:layout_marginRight="@dimen/qb_px_50"
        android:layout_marginTop="@dimen/qb_px_20"
        android:background="@color/back_ground"/>
</LinearLayout>

Java代码如下:

private void toolBarColor(){
        Toolbar toolbar = findViewById(R.id.toolbar);
        ImageView  ivBack = findViewById(R.id.ivBack);
        TextView tvName = findViewById(R.id.tvName);
        RecyclerView  rvZhangjie = findViewById(R.id.rvZhangjie);
        List<String> stringList = dealData();
        ScrollAdapter scrollAdapter = new ScrollAdapter(this, stringList);
        LinearLayoutManager manager = new LinearLayoutManager(this);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        rvZhangjie.setLayoutManager(manager);
        rvZhangjie.setAdapter(scrollAdapter);

        rvZhangjie.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                 //toolbar的高度
                toolbarHeight = toolbar.getBottom();
                //滑动的距离
                mDistanceY += dy;
                //当滑动的距离 <= toolbar高度的时候,改变Toolbar背景色的透明度,达到渐变的效果
                if (mDistanceY <= toolbarHeight) {
                    float scale = (float) mDistanceY / toolbarHeight;
                    float alpha = scale * 255;
                    toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
                } else {
                    //上述虽然判断了滑动距离与toolbar高度相等的情况,但是实际测试时发现,栏的背景色
                    //很少能达到完全不透明的情况,所以这里又判断了滑动距离大于toolbar高度的情况,
                    //将栏的颜色设置为完全不透明状态
                    toolbar.setBackgroundResource(R.color.colorPrimary);
                }
            }
        });
}

上面代码中的 dealData()方法很简单就是想一个String型List里面添加数据,没什么难度。

关键点在于给rvZhangjie.addOnScrollListener()也就是给RecyclerView设置滑动监听,并复写onScrolled()方法。该方法里面3个参数:

第一个RecyclerView recyclerView,这个很明显就是目标RecyclerView;
第二个int dx,表示RecyclerView在水平X方向的相对滑动量;
第三个int dy,表示RecyclerView在垂直Y方向的相对滑动量;

我们可以通过累加计算RecyclerView滑动的距离相对于指定距离的百分比,来计算透明度的变化量:

mDistanceY += dy;
float scale = (float) mDistanceY / toolbarHeight;
float alpha = scale * 255;

最后再将alpha透明度值设置给ToolBar:

 toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));

二、NestedScrollView滑动栏渐变

其实NestedScrollView滑动渐变和RecyclerView的滑动渐变原理是一样的,本质上都是监听View滑动的距离,通过距离换算成透明度值。只不过二者的滑动偏移量稍有点不同。

代码细节我就不贴出来了,就说说关键的对NestedScrollView的监听和偏移量的处理:

nsvScroolBack.setOnScrollChangeListener(new View.OnScrollChangeListener() {
        @Override
        public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
            //scrollY > oldScrollY:向上滑动
            //scrollY < oldScrollY:向下滑动
            // scrollY:滚动过的距离。
            toolbarHeight = toolbar.getBottom() * 1.5f;
            if (scrollY <= toolbarHeight){
                float scale = (float)scrollY / toolbarHeight;
                float alpha =scale * 255;
                toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
            }else {
                toolbar.setBackgroundColor(Color.BLUE);
            }
        }
    });

通过上面的代码,很容易发现NestedScrollView滑动渐变和RecyclerView的滑动渐变就一回事。代码实现上差别很细微。不同的是RecyclerView的滑动渐变哪里,我们要通过对dy的累加来获得RecyclerView在垂直方向的滑动偏移量。而在NestedScrollView的滑动渐变里面,NestedScrollView在x或者y方向的滑动偏移量,系统已经帮我们计算出来了:scrollX或者scrollY。然后进行透明度的计算即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯