Android:监听滑动控件实现状态栏颜色切换

1,973 阅读2分钟

大家好,我是似曾相识2022。不喜欢唱跳篮球,但对杰伦的Rap情有独钟。

今天给大家分享一个平时在滑动页面经常遇到的效果:滑动过程动态修改状态栏颜色。咱们废话不多说,有图有真相,直接上效果图:

1.gif

看到效果是不是感觉很熟悉,相对而言如果页面顶部有背景色,而滑动到底部的时候背景色变为白色或者其他颜色的时候,状态栏颜色不跟随切换颜色有可能会显得难看至极。因此有了上图的效果,其实就是简单的实现了状态栏颜色切换的功能,效果看起来不至于那么尴尬。

首先,我们需要分析,其中需要用到哪些东西呢?

  • 沉浸式状态栏
  • 滑动组件监听

关于沉浸式状态栏,这里推荐使用immersionbar,一款非常不错的轮子。我们只需要将mannifests中主体配置为NoActionBar类型,再根据文档配置好状态栏颜色等属性即可快速得到沉浸式效果:

<style name="Theme.MyApplication" parent="Theme.AppCompat.Light.NoActionBar">

//基础设置
 ImmersionBar.with(this)            
      .navigationBarColor(R.color.color_bg)
      .statusBarDarkFont(true, 0.2f)
      .autoStatusBarDarkModeEnable(true, 0.2f)//启用自动根据StatusBar颜色调整深色模式与亮式
      .autoNavigationBarDarkModeEnable(true, 0.2f)//启用自动根据NavigationBar颜色调整深色式
      .init()

//状态栏view
status_bar_view?.let {
            ImmersionBar.setStatusBarView(this, it)
        } 
        
//xml中状态栏        
<View
   android:id="@+id/status_bar_view"
   android:layout_width="match_parent"
   android:layout_height="0dp"
   android:background="#b8bfff" />

关于滑动监听,我们都知道滑动控件有个监听滑动的方法OnScrollChangeListener,其中返回了Y轴滑动距离的参数。那么,我们可以根据这个参数进行对应的条件判断以达到动态修改状态栏的颜色。

scroll?.setOnScrollChangeListener { _, _, scrollY, _, _ ->
    if (scrollY > linTop!!.height) {
        if (!isChange) {
            status_bar_view?.setBackgroundColor(
                Color.parseColor("#ffffff")
            )
            isChange = true
        }
    } else {
        if (isChange) {
            status_bar_view?.setBackgroundColor(
                Color.parseColor("#b8bfff")
            )
            isChange = false
        }
    }
}

这里判断滑动距离达到紫色视图末端时修改状态栏颜色。因为是在回调方法中,所以这里一旦滑动就在不停触发,所以给了一个私有属性进行不必要的操作,仅当状态改变时且滑动条件满足时才能修改状态栏。当然在这个方法内大家可以发挥自己的想象力做出更多的新花样来。

注意:

  • 滑动监听的这个方法只能在设备6.0及以上才能使用。
  • 需要初始化滑动控件的默认位置,xml中将焦点设置到其父容器中,防止滑动控件不再初始位置。
//初始化位置
scroll?.smoothScrollTo(0, 0)

//xml中设置父view焦点
android:focusable="true"
android:focusableInTouchMode="true"

好了,以上便是滑动控件中实现状态栏切换的简单实现,希望对大家有所帮助。