关闭

WebView加载过程进度条显示

标签: webview进度条
1031人阅读 评论(0) 收藏 举报
分类:

好久没写了,一看都11月份了,最近一直在忙项目开发,经常遇到webview,很不满意之前的加载过程,经同事指点,会了以下这一招,加载过程顶部显示进度条,以下是实现代码:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
WebSettings webSettings = wvOther.getSettings();

webSettings.setRenderPriority(RenderPriority.HIGH);
if (HttpUtils.isNetworkConnected(this))
{
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);// 根据cache-control决定是否从网络上取数据。
}
else
{
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);// 只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据
}
wvOther.setWebChromeClient(new MyChromeClient());
// 开启 DOM storage API 功能
webSettings.setDomStorageEnabled(true);
// 开启 database storage API 功能
webSettings.setDatabaseEnabled(true);
String cacheDirPath = getFilesDir().getAbsolutePath() + "/ba/webcache";
// String cacheDirPath =
// getCacheDir().getAbsolutePath()+Constant.APP_DB_DIRNAME;
// 设置数据库缓存路径
webSettings.setDatabasePath(cacheDirPath);
// 设置 Application Caches 缓存目录
webSettings.setAppCachePath(cacheDirPath);
// 开启 Application Caches 功能
webSettings.setAppCacheEnabled(true);

webSettings.setBuiltInZoomControls(false); // 放大缩放按钮
// 如果访问的页面中有JavaScript,则WebView必须设置支持JavaScript
webSettings.setJavaScriptEnabled(true);
// 设置可以支持缩放
webSettings.setSupportZoom(true);
// 扩大比例的缩放
webSettings.setUseWideViewPort(true);
// 自适应屏幕
webSettings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
webSettings.setLoadWithOverviewMode(true);
wvOther.loadUrl(slideUrl);
wvOther.setWebViewClient(new WebViewClient()
{
public boolean shouldOverrideUrlLoading(WebView view, String url)
{ // 重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边
view.loadUrl(url);
return true;
}

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon)
{

super.onPageStarted(view, url, favicon);
mCustomView.showLoadStateView(CustomView.STATE_NONE);
}

@Override
public void onPageFinished(WebView view, String url)
{
super.onPageFinished(view, url);
mCustomView.showLoadStateView(CustomView.STATE_NONE);
}

@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
{
super.onReceivedError(view, errorCode, description, failingUrl);
mCustomView.showLoadStateView(CustomView.STATE_EMPTY);
}

});

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
// 设置加载进度
public class MyChromeClient extends android.webkit.WebChromeClient
{
@Override
public void onProgressChanged(WebView view, int newProgress)
{
mProgressBar.setProgress(newProgress);
if (newProgress == 100)
{
mProgressBar.setVisibility(View.GONE);
}
else
{
mProgressBar.setVisibility(View.VISIBLE);

}
super.onProgressChanged(view, newProgress);
}

@Override
public void onReceivedTitle(WebView view, String title)
{
super.onReceivedTitle(view, title);
// mTv_title.setText(title);
}

}

布局中需添加:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
<ProgressBar
android:id="@+id/mProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="3dp"
android:layout_below="@+id/otherTitle"
android:background="@null"
android:indeterminateOnly="false"
android:max="100"
android:progressDrawable="@drawable/progress_bar_horizontal" />

progress_bar_horizontal.xml:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item
android:id="@android:id/background"
android:drawable="@color/transparent"/>
<item android:id="@android:id/progress">
<clip>
<shape>
<gradient
android:angle="270"
android:centerColor="@color/progress2"
android:centerY="0.75"
android:endColor="@color/progress3"
android:startColor="@color/progress1" />
</shape>
</clip>
</item>

</layer-list>

color.xml:

 1
 2
 3
 4
<!-- 网页加载进度条颜色变化 -->
<color name="progress1">#B9DEF5</color>
<color name="progress2">#CDE7F8</color>
<color name="progress3">#E7F3FC</color>

实现效果如下:


不难,就是配置多了点,因为觉得经常会用到,所以做了下记录~~~

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30833次
    • 积分:680
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:16篇
    • 译文:0篇
    • 评论:6条
    最新评论