Android webView滑动实现沉浸式标题栏效果切换

前言

2021年的春节即将到来
春节假期选择留深没有回去
7天假期如何安排？
除了学习还是学习学习再学习

最近在写一个属于自己的项目
在写到webView的时候自己心中的效果是沉浸式全屏加载URL
当用户向下滑动的时候可以出现导航栏

通过滑动的数值来改变透明度
不多废话直接上效果图

实现效果

CustomWebView

自定义CustomWebView 继承WebView 实现滑动方法接口OnScrollChangeListener

/*** Author      :Lyudony.* Created     :2021/2/9* Description :滑动的WebView*/
public class CustomWebView extends WebView {private OnScrollChangeListener mOnScrollChangeListener;public CustomWebView(Context context, AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onScrollChanged(int l, int t, int scrollX, int scrollY) {super.onScrollChanged(l, t, scrollX, scrollY);float webcontent = getContentHeight() * getScale();float webnow = getHeight() + getScrollY();if (Math.abs(webcontent - webnow) < 1) {mOnScrollChangeListener.onPageEnd(l, t, scrollX, scrollY);} else if (getScrollY() == 0) {mOnScrollChangeListener.onPageTop(l, t, scrollX, scrollY);} else {mOnScrollChangeListener.onScrollChanged(l, t, scrollX, scrollY);}}public void setOnScrollChangeListener(OnScrollChangeListener listener) {this.mOnScrollChangeListener = listener;}public interface OnScrollChangeListener {void onPageEnd(int l, int t, int scrollX, int scrollY);void onPageTop(int l, int t, int scrollX, int scrollY);void onScrollChanged(int l, int t, int scrollX, int scrollY);}
}

XML使用

<com.lyu.mvpframe.customview.CustomWebViewandroid:id="@+id/web_view"android:layout_width="match_parent"android:layout_height="0dp"android:overScrollMode="never"android:scrollbars="none"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintTop_toTopOf="parent" />

Fragment中实现效果

查看滑动的数值
然后根据透明值根据滑动的数值变化

如果向下滑数值是越来越大的
如果向上滑数值是越来越小的

 @BindView(R.id.web_view)CustomWebView mWebView;private void initEvent() {mWebView.setOnScrollChangeListener(new CustomWebView.OnScrollChangeListener() {@Overridepublic void onPageEnd(int l, int t, int oldl, int oldt) {mToolbar.setVisibility(View.GONE);}@Overridepublic void onPageTop(int l, int t, int oldl, int oldt) {mToolbar.setVisibility(View.GONE);}@Overridepublic void onScrollChanged(int l, int t, int oldl, int oldt) {Log.e(TAG, "oldt  == " + oldt);mToolbar.setVisibility(View.VISIBLE);//记录滑动的总数值int totalDy = 0;//顶部导航栏的自定义高度int height = 230;totalDy += oldt;if (totalDy <= height) {//透明值根据滑动的数值变化float alpha = (float) totalDy / height;mToolbar.setBackgroundColor(ColorUtils.blendARGB(Color.TRANSPARENT, ContextCompat.getColor(getActivity(), R.color.white), alpha));mTvTitle.setTextColor(ColorUtils.blendARGB(Color.TRANSPARENT, ContextCompat.getColor(getActivity(), R.color.normal_color), alpha));mIvBack.setVisibility(View.GONE);mIvBackGrayBg.setVisibility(View.VISIBLE);} else {mToolbar.setBackgroundColor(ColorUtils.blendARGB(Color.TRANSPARENT, ContextCompat.getColor(getActivity(), R.color.white), 1));mTvTitle.setTextColor(ColorUtils.blendARGB(Color.TRANSPARENT, ContextCompat.getColor(getActivity(), R.color.normal_color), 1));mIvBack.setVisibility(View.VISIBLE);mIvBackGrayBg.setVisibility(View.GONE);}}});}

总结

2021继续努力

Android webView滑动实现沉浸式标题栏效果切换相关推荐

android滑动背景变透明,Android右滑退出+沉浸式(透明)状态栏
背景上篇文章一个千万量级的APP使用的一些第三方库中,在说到一个使用很广泛的滑动退出库SwipeBackLayout时有提过有时间会分享自己在项目中引入这个库的时候填过的一些坑.前段时间项目加入沉浸 ...
android 工具栏沉浸下拉,如何在Android应用中实现一个沉浸式状态栏效果
如何在Android应用中实现一个沉浸式状态栏效果发布时间:2020-12-08 17:04:42 来源:亿速云阅读:151 作者:Leah 这篇文章将为大家详细讲解有关如何在Android应用中 ...
android 4.4 以上沉浸式状态栏和沉浸式导航栏管理，一句代码轻松实现
ImmersionBar 项目地址:gyf-dev/ImmersionBar 简介:android 4.4 以上沉浸式状态栏和沉浸式导航栏管理,一句代码轻松实现,以及对 bar 的其他设置,详见 R ...
Android实现沉浸式状态栏效果
关于沉浸式状态栏,给大家推荐一个非常好的博文android标题栏.状态栏图标文字颜色及背景动态变化另外说明下,沉浸式状态栏的实现仅适用于 android 4.4及以上版本,4.4以下的就不要想了. ...
android 透明栏,Android状态栏透明（沉浸式效果）
Android状态栏透明(沉浸式效果) 默认效果沉浸式效果方式一源码 1. 修改状态栏和导航栏的属性为透明 if (Build.VERSION.SDK_INT >= Build.VERSI ...
android开发沉浸式标题栏_android实现沉浸式状态栏
前言在android开发的过程中,经常会涉及到沉浸式状态栏的问题,说白了,就是手机屏幕顶部栏的颜色显示问题,为了实现美感一体的效果,许多app都已经开始了沉浸式状态栏的显示,这里,我也简单介绍一个沉 ...
android开发沉浸式标题栏_Android沉浸式状态栏实现
应用市场上App越来越多的出现沉浸式状态栏的设计(如下图所示)状态栏和导航栏具有相同的颜色.Android在4.4开始对于该种效果的支持,而在4.4之下,状态栏只是黑框,无法控制.同时在4.4和5.0 ...
Android 虚拟按键与沉浸式的适配
根据公司产品的要求,app要实现全屏模式,也就是4.4以后的所谓的沉浸式. 在values-v19和values-v21的styles里添加以下代码,实现19以上的系统的沉浸式: <style ...
Android 超级简单的沉浸式状态栏
1.两个工具类和一个xml就完成了直接复制即可 package com.example.tongliaodemo.activity;import android.app.Activity; impo ...