前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android WebView实现顶部进度条

Android WebView实现顶部进度条

作者头像
砸漏
发布2020-10-16 10:55:20
9930
发布2020-10-16 10:55:20
举报
文章被收录于专栏:恩蓝脚本恩蓝脚本

项目中用到WebView加上进度条放在顶部,让用户知道加载进度情况,可以提高用户体验:

效果:

布局:

代码语言:javascript
复制
<RelativeLayout

  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" 
  <WebView
   android:id="@+id/webView"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_below="@+id/toolbar_container" / 

  <ProgressBar

   android:id="@+id/progressBar"
   style="@style/crowd_item_progressBar"
   android:layout_width="match_parent"
   android:layout_height="3dp"
   android:layout_below="@+id/toolbar_container"
   android:background="@drawable/crowd_progressbar_unselect" / 

</RelativeLayout 

进度条样式:

代码语言:javascript
复制
<style name="crowd_item_progressBar" 
  <item name="android:indeterminateOnly" false</item 
  <item name="android:progressDrawable" @drawable/crowd_progressbar_background</item 
  <item name="android:minHeight" 10dp</item 
  <item name="android:maxHeight" 10dp</item 

</style 

进度图片:

代码语言:javascript
复制
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" 
 <item
  android:id="@android:id/progress"  
  <clip 
   <shape 
    <solid android:color="@color/selected"/ 
    <!--<corners android:radius="1.5dp"/ -- 
   </shape 
  </clip 
 </item 
</layer-list 

代码:

代码语言:javascript
复制
public class WebChromeClient extends android.webkit.WebChromeClient {
  @Override

  public void onProgressChanged(WebView view, int newProgress) {
   if (newProgress == 100) {

    mProgressBar.setVisibility(GONE);
   } else {

    if (mProgressBar.getVisibility() == GONE)
     mProgressBar.setVisibility(VISIBLE);
    mProgressBar.setProgress(newProgress);

   }

   super.onProgressChanged(view, newProgress);

  }

 }

 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  LayoutParams lp = (LayoutParams) mProgressBar.getLayoutParams();
  lp.x = l;
  lp.y = t;
  mProgressBar.setLayoutParams(lp);
  super.onScrollChanged(l, t, oldl, oldt);

 }

}

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

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

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

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

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

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