Android Webview与ScrollView的滚动兼容及留白处理的方法

本文介绍了Webview与ScrollView的滚动兼容及留白处理，分享给大家，具体如下：

背景

开发中我们经常会遇到使用网页来显示图文内容，而且往往我们会遇到webview嵌套在scrollview的这种情况，这就开始让人蛋疼了！“为嘛，我的webview加载出来的网页只显示很小一点，其他都不显示了？” ”当我重新刷新页面后，为什么webview会出现留白的情况？“ ----------------- 天啊，难道就不能好好的吗？！

为了解决项目中这些蛋疼的问题，试过不少方法，网上有说是网页中使用了不合理的overflow,的确，经证实使用不合理的overflow的确会造成网页加载后在嵌套在scrollview的webview只会显示很小的高度，那体验是相当的尴尬。合理使用overflow即可处理这个问题，但是webview留白又如何处理呢？问题先放这儿，我们先说说如何在xml布局中放置webview并设置他的属性。

层层递进，先练基本功

xml中webview嵌套在scrollview中：

<ScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent">

 <LinearLayout
        android:descendantFocusability="blocksDescendants"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

  <com.xxxx.NoWrapListView
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="vertical"/>

  <WebView
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
 </LinearLayout>
</ScrollView>

其中webview要的高度要设置为：wrap_content, 如有必要可设置scrollview第一个子容器的这个属性：

android:descendantFocusability="blocksDescendants"

发现问题，问题是如何造成的

我们使用webview加载网页，网页可能在我们需要的时候会要求我们刷新网页或者加载新的链接，这时候问题就显现了。由于网页页面加载内容的长度，或者ajax请求延迟，造成webview只能不断的增加高度，而当网页高度变小时，webview高度却不能自适应了，那么只能由我们手动的搞些事情了！

解决问题，解决留白，刻不容缓

1、重载WebViewClient，重写onPageFinished方法。

inner class XWalkWebClient : WebViewClient() {

 override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
  super.onPageStarted(view, url, favicon)
  isPageLoadSuccess = true
 }

 override fun onPageFinished(view: WebView?, url: String?) {
  super.onPageFinished(view, url)
  view?.loadUrl("javascript:window.myapp.resize(document.body.getBoundingClientRect().bottom);") //此处调用了一个注入的js方法用来重载webview高度，可解决初始加载网页的问题，①
 }
}

2、js注入，初始化注入方法

webBrowser?.addJavascriptInterface(MyAppJavascriptHandler(), "myapp")
inner class MyAppJavascriptHandler {
 @JavascriptInterface
    fun resize(documentBodyHeight: Int) {
      if (isAllowReLayoutBrowser) {
        (context as? Activity?)?.runOnUiThread {
          ViewUtil.setViewLayoutParams<FrameLayout.LayoutParams>(webBrowser!!, {
            it.width = context.resources.displayMetrics.widthPixels
            it.height = (documentBodyHeight * context.resources.displayMetrics.density).toInt()
          }) //重写webview的高度, ②
        }
      }
    }
}

网页端也需要在数据加载完成后调用这个js注入方法

if(window.myapp.resize){
 window.myapp.resize(document.body.getBoundingClientRect().bottom);
}

备注、解释：

①. document.body.getBoundingClientRect().bottom: 网页下边距离页面上边的距离

②. ViewUtil.setViewLayoutParams....方法的实现

/**
 * 配置控件的布局属性
 * @param view
 * @param func 处理布局属性的回调方法
 */
@Suppress("unchecked_cast")
@JvmStatic
fun <T : ViewGroup.LayoutParams> setViewLayoutParams(view: View, func: (T) -> Unit) = with(this) {
 val lp: T = view.layoutParams as T
 func.invoke(lp)
 view.layoutParams = lp
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在android中ScrollView嵌套ScrollView解决方案

    在android中ScrollView嵌套ScrollView解决方案

    大家好,众所周知,android里两个相同方向的ScrollView是不能嵌套的,那要是有这样的需求怎么办?(这个需求一般都是不懂android的人提出来的) 难道就真的不能嵌套吗?当然可以,只要你再写一个ScrollView,在里面做点脚,它就支持嵌套了. 目前做的这个只支持两个ScrollView嵌套,两个以上还有待改进,能套两个就已经能满足很多需求了,呵呵,另外现在只做了纵向scrollview的支持,横向的还没来的急做哦. 效果截图:  先上核心代码吧.代码里头我加了注释,方便大家阅读

  • Android ScrollView滑动实现仿QQ空间标题栏渐变

    Android ScrollView滑动实现仿QQ空间标题栏渐变

    今天来研究的是ScrollView-滚动视图,滚动视图又分横向滚动视图(HorizontalScrollView)和纵向滚动视图(ScrollView),今天主要研究纵向的.相信大家在开发中经常用到,ScrollView的功能已经很强大了,但是仍然满足不了我们脑洞大开的UI设计师们,所以我们要自定义-本篇文章主要讲监听ScrollView的滑动实现仿QQ空间标题栏渐变,先看一下效果图: 好了我们切入主题. 有可能你不知道的那些ScrollView属性  •android:scrollbars 设

  • Android中实现监听ScrollView滑动事件

    Android中实现监听ScrollView滑动事件

    时候我们需要监听ScroView的滑动情况,比如滑动了多少距离,是否滑到布局的顶部或者底部.可惜的是SDK并没有相应的方法,不过倒是提供了一个 复制代码 代码如下: protected void onScrollChanged(int x, int y, int oldx, int oldy) 方法,显然这个方法是不能被外界调用的,因此就需要把它暴露出去,方便使用.解决方式就是写一个接口, 复制代码 代码如下: package com.example.demo1;    public inter

  • Android之ScrollView嵌套ListView和GridView冲突的解决方法

    那么里面的ScrollView高度计算就会出现问题.我们也就无法得到想要的效果.核心解决方案: 重写ListView或者GridView的OnMesure 方法. 复制代码 代码如下: public class MyListView extends ListView {        public MyListView(Context context) {                super(context);        }        public MyListView(Conte

  • android 自定义ScrollView实现背景图片伸缩的实现代码及思路

    android 自定义ScrollView实现背景图片伸缩的实现代码及思路

       用过多米音乐的都市知道, 这个UI可以上下滑动,作用嘛---无聊中可以划划解解闷,这被锤子公司老罗称谓为"情怀",其实叫"情味"更合适.嘿嘿.如今挪动互联网开展这么迅速,市场上已不再是那早期随便敲个APP放上架就能具有几十万用户的阶段了.近来苹果公司,为了怕android下载量赶超苹果商店,大势宣称:(第 500 亿个下载应用的用户就能够获得 10,000 美元的 iTunes 礼品卡,除此之外,紧随第 500 亿以后的前 50 名用户也可以获得 500 美元

  • android开发教程之文本框加滚动条scrollview

    我们都知道EditText与TextView是Android的文本输入框和文本显示框,但是基于手机屏幕的大小因素,如果在需要输入较多文字或者显示较多内容的时候,手机屏幕是远远不够的,因此让文本框具有滚动条的功能是手机上必备的,下面介绍下如何加上滚动条.要加上滚动条,其实很简单,只需要在文本输入框或者文本显示框上面加上滚动条控件即可,该控件名字为ScrollView,以下我们对比下(以TextView举例). 复制代码 代码如下: //A.未加滚动效果 <TextView android:layo

  • Android控件之ScrollView用法实例分析

    Android控件之ScrollView用法实例分析

    本文实例讲述了Android控件之ScrollView用法.分享给大家供大家参考.具体如下: ScrollView滚动视图是指当拥有很多内容,屏幕显示不完时,需要通过滚动跳来显示的视图. ScrollView只支持垂直滚动. 以下为案例 main.xml布局文件: <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android

  • android TextView不用ScrollViewe也可以滚动的方法

    代码 复制代码 代码如下: TextView textview = (TextView) findViewById(R.id.text);            /**             *              * 只有调用了该方法,TextView才能不依赖于ScrollView而实现滚动的效果.             * 要在XML中设置TextView的textcolor,否则,当TextView被触摸时,会灰掉.             */ textview.setMov

  • android 实现ScrollView自动滚动的实例代码

    有时候需要动态添加数据,屏幕显示满了,数据需要滚动展示.这里主要弄懂scrollTo(0, off)方法的含义喊用法. 含义不说了,大概意思就这样. 下面来看他的用法: 复制代码 代码如下: private void searchResultShow() { TextView textView = new TextView(AFSearchActivity.this);           textView.setText("Text View ");           Linear

  • Android Webview与ScrollView的滚动兼容及留白处理的方法

    本文介绍了Webview与ScrollView的滚动兼容及留白处理,分享给大家,具体如下: 背景 开发中我们经常会遇到使用网页来显示图文内容,而且往往我们会遇到webview嵌套在scrollview的这种情况,这就开始让人蛋疼了!"为嘛,我的webview加载出来的网页只显示很小一点,其他都不显示了?" "当我重新刷新页面后,为什么webview会出现留白的情况?" ----------------- 天啊,难道就不能好好的吗?! 为了解决项目中这些蛋疼的问题,试

  • Android WebView如何判断是否滚动到底部

    目录 场景: 分析: 实现: 总结 场景: 我们有时候需要弹一些必读公告,但是呢可能会要去你看完之后才可以关掉,所以就需要滚动到底部才显示关闭按钮,而公告什么的往往又是基于富文本的,那么在展示在Android上时就要用到WebView,基于这个要求就有了判断 WebView 判断是否滚动到底部. 分析: 要判断是否到底部那么我们先来分析有哪几种情况,当html文档加载到WebView后会有一下两种情况. WebView里的html内容没有填充满,就是无滚动条情况.html内容的高度比WebVie

  • Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法

    本文实例讲述了Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法.分享给大家供大家参考,具体如下: 这里主要介绍如何解决ViewPager在ScrollView中滑动经常失效.无法正常滑动问题. 解决方法只需要在接近水平滚动时ScrollView不处理事件而交由其子View(即这里的ViewPager)处理即可,重写ScrollView的onInterceptTouchEvent函数,如下: package cc.newnews.view; import an

  • Android开发实现ScrollView中嵌套两个ListView的方法

    本文实例讲述了Android开发实现ScrollView中嵌套两个ListView的方法.分享给大家供大家参考,具体如下: 做的项目中要使用两个ListView在同一个页面上下显示,因为数据源不同,不能通过在Adapter中设置标志位去区分显示,最后只能硬着头皮做一个ScrollView嵌套两个ListView,但按正常情况是不能同时显示的,会出现上面的ListView完全显示,下面的只显示一个Item,查了一些资料终于成功了 主要有一个ListViewUtility ,代码如下: import

  • Android开发基于ScrollView实现的渐变导航栏效果示例

    Android开发基于ScrollView实现的渐变导航栏效果示例

    本文实例讲述了Android开发基于ScrollView实现的渐变导航栏效果.分享给大家供大家参考,具体如下: 前些日子项目要在原来的页面上加入渐变导航栏的功能,查了很多资料,很多资源都是监听到listview的高度来实现渐变导航栏的效果,可是项目里面很多的界面都是使用ScrollView来实现滑动效果. 实在没办法,就自己写了一个test来实现这个效果. 话不多说,马上看一下思路吧,其实渐变导航栏无非就是改变导航栏的透明度也就是可以设定一个高度,根据这个高度,监听ScrollView滑动的距离

  • android scrollview 自动滚动到顶部或者底部的实例

    android scrollview 自动滚动到顶部或者底部 摘要: android scrollview 自动滚动到顶部或者底部 android scrollview 自动滚动到顶部或者底部 //设置默认滚动到顶部 scrollView.post(new Runnable() { @Override public void run() { // TODO Auto-generated method stub scrollView.fullScroll(ScrollView.FOCUS_UP);

  • Android WebView实现网页滚动截图

    Android WebView实现网页滚动截图

    WebView 网页滚动截屏,可对整个网页进行截屏而不是仅当前屏幕哦! 注意若Web页面存在position:fixed; 的话得在调用前设置为 position:absolute; 哦,否则会出现很多次的,请看下面的具体解说吧!! private static Bitmap getViewBitmapWithoutBottom(View v) { if (null == v) { return null; } v.setDrawingCacheEnabled(true); v.buildDra

  • Android使用ScrollView实现滚动效果

    本文实例为大家分享了ScrollView实现滚动效果的具体代码,供大家参考,具体内容如下 如果长文本的内容超过一屏幕 则只能显示一屏幕的内容 设置ScrollView 通过滚动浏览下面的内容 若将标签更改为<HorizontalScrollView></HorizontalScrollView>则为水平滚动效果 xml文件: <?xml version="1.0" encoding="utf-8"?> <android.su

  • Android ScrollView实现滚动超过边界松手回弹

    ScrollView滚动超过边界,松手回弹 Android原生的ScrollView滑动到边界之后,就不能再滑动了,感觉很生硬.不及再多滑动一段距离,松手后回弹这种效果顺滑一些. 先查看下滚动里面代码的处理 case MotionEvent.ACTION_MOVE:   final int activePointerIndex = ev.findPointerIndex(mActivePointerId);   if (activePointerIndex == -1) {          

  • 完美解决EditText和ScrollView的滚动冲突（下）

    上篇文章完美解决EditText和ScrollView的滚动冲突(上)中提到咱们自己写了一个判断EditText是否可以在垂直方向上滚动的方法,那么这个方法是如何得来的呢? 其实Android API里是有一个判断控件是否可以在垂直方向上滚动的方法的,方法名字叫做canScrollVertically(int direction),代码如下: /** * Check if this view can be scrolled vertically in a certain direction. *

随机推荐