本次的踩坑经验基于以下需求:
- 在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);