前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android中WebView加载网页设置进度条

Android中WebView加载网页设置进度条

作者头像
砸漏
发布2020-11-04 10:23:09
2.3K0
发布2020-11-04 10:23:09
举报
文章被收录于专栏:恩蓝脚本

我们平时在进行安卓开发使用到webview加载网页时,我们不能准确了解网页的加载进度,因此为了提高用户体验,我们在webview中加入进度条显示加载进度。

程序预览界面:

一、主界面xml布局文件

代码语言:javascript
复制
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 tools:context=".MainActivity" 
 android:orientation="vertical" 
   
 <RelativeLayout 
 android:layout_width="match_parent" 
 android:layout_height="40dp" 
 android:background="#1B9A16" 
   
  /  
   
 
 <ProgressBar 
  android:id="@+id/progressBar1" 
  style="?android:attr/progressBarStyleHorizontal" 
  android:layout_width="match_parent" 
  android:layout_height="3dip" 
  android:progressDrawable="@drawable/pg" 
  android:visibility="gone" 
  
  /  
 
 <WebView 
  android:id="@+id/webview1" 
  android:layout_below="@id/progressBar1" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" /  
 
</LinearLayout  

二、ProgressBar样式布局文件(pg.xml放在drawable下面)

代码语言:javascript
复制
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"   
 
 <item android:id="@android:id/background"  
  <shape  
   <corners android:radius="2dp" /  
   <gradient 
    android:angle="270" 
    android:centerColor="#E3E3E3" 
    android:endColor="#E6E6E6" 
    android:startColor="#C8C8C8" /  
  </shape  
 </item  
 <item android:id="@android:id/progress"  
  <clip  
   <shape  
    <corners android:radius="2dp" /  
    <gradient 
     android:centerColor="#4AEA2F" 
     android:endColor="#31CE15" 
     android:startColor="#5FEC46" /  
     
   </shape  
  </clip  
 </item  
 
</layer-list  

三、逻辑代码

代码语言:javascript
复制
package com.example.webview; 
 
import android.os.Bundle; 
import android.app.Activity; 
import android.transition.Visibility; 
import android.view.KeyEvent; 
import android.view.Menu; 
import android.view.View; 
import android.view.Window; 
import android.webkit.WebChromeClient; 
import android.webkit.WebSettings; 
import android.webkit.WebView; 
import android.webkit.WebViewClient; 
import android.widget.ProgressBar; 
 
public class MainActivity extends Activity { 
  
 private WebView webView; 
 private ProgressBar pg1; 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  requestWindowFeature(Window.FEATURE_NO_TITLE); 
  setContentView(R.layout.activity_main); 
  init(); 
  webView.loadUrl("http://www.baidu.com"); 
 } 
 
 private void init() { 
  // TODO 自动生成的方法存根 
  webView=(WebView) findViewById(R.id.webview1); 
  pg1=(ProgressBar) findViewById(R.id.progressBar1); 
   
  webView.setWebViewClient(new WebViewClient(){ 
   //覆写shouldOverrideUrlLoading实现内部显示网页 
   @Override 
   public boolean shouldOverrideUrlLoading(WebView view, String url) { 
    // TODO 自动生成的方法存根 
    view.loadUrl(url); 
    return true; 
   } 
  }); 
  WebSettings seting=webView.getSettings(); 
  seting.setJavaScriptEnabled(true);//设置webview支持javascript脚本 
  webView.setWebChromeClient(new WebChromeClient(){ 
   @Override 
   public void onProgressChanged(WebView view, int newProgress) { 
    // TODO 自动生成的方法存根 
     
    if(newProgress==100){ 
     pg1.setVisibility(View.GONE);//加载完网页进度条消失 
    } 
    else{ 
     pg1.setVisibility(View.VISIBLE);//开始加载网页时显示进度条 
     pg1.setProgress(newProgress);//设置进度值 
    } 
     
   } 
  }); 
   
 } 
 
  
 //设置返回键动作(防止按返回键直接退出程序) 
 @Override 
 public boolean onKeyDown(int keyCode, KeyEvent event) { 
  // TODO 自动生成的方法存根 
  if(keyCode==KeyEvent.KEYCODE_BACK) { 
   if(webView.canGoBack()) {//当webview不是处于第一页面时,返回上一个页面 
    webView.goBack(); 
    return true; 
   } 
   else {//当webview处于第一页面时,直接退出程序 
    System.exit(0); 
   } 
    
   
  } 
  return super.onKeyDown(keyCode, event); 
 } 
  
 
} 

整体流程就这样。

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档