秒开WebView,你也能做到!

本次的踩坑经验基于以下需求:

  • 在ListView的item中使用WebView加载网页内容
  • 网页内有图片表格,宽度不得超出屏幕宽度
  • 网页内容需加载样式
  • 需快速显示

以下是遇到的问题及解决办法

一、WeView无法设置最大高度

二、WebView与ListView的滚动事件冲突

以上两个问题的解决办法如下:
写一个自定义View

/**
 * Created by tangentLu on 17/2/7.
 */

public class MaxHeightWebView extends WebView {
    private int mMaxHeight;// 最大高度
    private int mDefaultMaxHeight = -1;//默认最大高度,-1即不限制

    public MaxHeightWebView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

   public MaxHeightWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        getAttr(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return false;//不处理触摸事件,解决问题二
    }

    private void getAttr(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MaxHeightWebView);
        mMaxHeight = typedArray.getDimensionPixelSize(R.styleable.MaxHeightWebView_vMaxHeight, mDefaultMaxHeight);//读取xml里的最大高度
    }

    public MaxHeightWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    public MaxHeightWebView(Context context, AttributeSet attrs, int defStyle,
                            boolean privateBrowsing) {
        super(context, attrs, defStyle, privateBrowsing);
        // TODO Auto-generated constructor stub
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //如果xml里设置的最大高度有效,则View的高度不会超过最大高度
        if (mMaxHeight > -1 && getMeasuredHeight() > mMaxHeight) {
            setMeasuredDimension(getMeasuredWidth(), mMaxHeight);
        }
    }

    //告诉View不会和别的View重叠,提高渲染效率  | tangentLu
    @Override
    public boolean hasOverlappingRendering() {
        return false;
    }
}

在attires中添加自定义View的属性

<resources>
    <declare-styleable name="MaxHeightWebView">
        <attr name="vMaxHeight" format="dimension" />
    </declare-styleable>
</resources>

在布局中使用vMaxHeight属性

       <com.xxx.MaxHeightWebView
            android:id="@+id/wv_question_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/rl_sub"
            app:vMaxHeight="250dp"
            android:paddingBottom="3dp"
            android:paddingTop="3dp"
            android:text="题目内容"
            android:textSize="16sp"
            android:visibility="visible" />

三、图片及表格的宽度超出屏幕宽度

只需要在css文件中加入:

table{
  max-width:100% !important;//强制替换掉网页内表格的宽度最大为100%
  table-layout:fixed !important;
}
img{
  max-width:100% !important;//强制替换掉网页内图片的宽度最大为100%
}

四、加载样式值导致网页载入慢

把样式写成css文件放到assets文件夹里,统一加载可大幅提高速度(系统会缓存css文件内容)。

五、无法加载assets内的文件(如css、js)

加载本地assets里文件时使用loadDataWithBaseURL才能正常引用。

   //引用assets文件夹中的css.css文件
   String linkCss = "<link rel=\"stylesheet\" href=\"css.css\" type=\"text/css\" />";
   String html = "<head>" + linkCss2 + "</head><body> + content + "</body>";
   ...
   webView.loadDataWithBaseURL("file:///android_assets/", html, "text/html", "UTF-8", null);

六、载入速度还是不能秒开

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    // chromium, enable hardware acceleration
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
    // older android version, disable hardware acceleration
    webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Android4.4后WebView支持硬件加速,来来来,是时候飙车了!

七、 Unable to create layer View错误

当ScrollView嵌套WebView而WebView又多大,并开启硬件加速时,华为的机型会出现容易出现此错误,解决办法为关闭硬件加速即可.

 webView.setLayerType(View.LAYER_TYPE_NONE, null);
    原文作者:彼时芒种
    原文地址: https://www.jianshu.com/p/b14b95e091c0
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞