Android仿微信公众号文章页面加载进度条

转载  更新时间:2018年06月12日 10:52:10   作者:七号座先生   我要评论

这篇文章主要为大家详细介绍了Android仿微信公众号文章页面加载进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言:

微信公众号文章详情页面加载的时候,WebView会在头部显示一个进度条,这样做的好处就是用户可以一边加载网页内容的同时也可浏览网页内容,不需要等完全加载完之后才全部显示出来。如何实现呢? 其实很简单,自定义一个WebView就可以实现了。

详细实现步骤如下 :

1、自定义一个ProgressWebView 继续 Webview

@SuppressWarnings("deprecation")
public class ProgressWebView extends WebView {

 private ProgressBar progressbar;

 public ProgressWebView(Context context) {
  super(context);
  init(context);
 }

 private void init(Context context) {
  progressbar = new ProgressBar(context, null,
    android.R.attr.progressBarStyleHorizontal);
  progressbar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
    6, 0, 0));
  progressbar.setProgressDrawable(this.getResources().getDrawable(
    R.drawable.btn_progress_webview));
  addView(progressbar);
  setWebChromeClient(new WebChromeClient());
 }

 public ProgressWebView(Context context, AttributeSet attrs) {
  super(context, attrs);
  init(context);
 }

 public class WebChromeClient extends android.webkit.WebChromeClient {
  @Override
  public void onProgressChanged(WebView view, int newProgress) {
   if (newProgress == 100) {
    progressbar.setVisibility(GONE);
   } else {
    if (progressbar.getVisibility() == GONE)
     progressbar.setVisibility(VISIBLE);
    progressbar.setProgress(newProgress);
   }
   super.onProgressChanged(view, newProgress);
  }

 }

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

2、设置R.drawable.btn_progress_webview 进度条的颜色值:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

 <!-- 设置背景色(黑色) -->
 <item android:id="@android:id/background">
  <shape>

   <!-- 进度条的四个棱角大小 0 为都是直角 随着值的增大角越圆滑 -->
   <corners android:radius="0dip" />

   <gradient
    android:endColor="#c0c0c0"
    android:startColor="#c0c0c0" />
  </shape>
 </item>

 <!-- 设置进度条颜色(绿色) -->
 <item android:id="@android:id/progress">
  <clip>
   <shape>
    <corners android:radius="0dip" />

    <gradient
     android:endColor="#a13864"
     android:startColor="#a13864" />
   </shape>
  </clip>
 </item>

</layer-list>

3、在布局文件是如何使用呢?

<RelativeLayout 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="com.summer.progresswebview.MainActivity" >

 <com.summer.progresswebview.ProgressWebView

  android:id="@+id/progresswebview"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"/>

</RelativeLayout>

4、在Activity中是如何使用 和显示网页内容的 :

public class MainActivity extends Activity {
 private ProgressWebView progresswebview;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  initView();
 }

 private void initView() {
  progresswebview = (ProgressWebView) findViewById(R.id.progresswebview);
  progresswebview.getSettings()
    .setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
  progresswebview.getSettings().setJavaScriptEnabled(true);
  progresswebview.getSettings().setSupportZoom(true);
  progresswebview.getSettings().setLoadWithOverviewMode(true);
  progresswebview.getSettings().setUseWideViewPort(true);
  progresswebview.setVerticalScrollBarEnabled(false);
  progresswebview.setHorizontalScrollBarEnabled(false);// 水平不显示

  progresswebview.getSettings().setBuiltInZoomControls(true); // 支持页面放大缩小按钮
  progresswebview.setWebViewClient(client);
  progresswebview.loadUrl("https://www.baidu.com/"); // 加载百度首页网址
 }

private WebViewClient client = new WebViewClient() {

  @Override
  public void onPageFinished(WebView view, String url) {
   super.onPageFinished(view, url);
   progresswebview.getSettings().setLoadsImagesAutomatically(true);
  }

  @Override
  public void onPageStarted(WebView view, String url, Bitmap favicon) {
   super.onPageStarted(view, url, favicon);
  }


  public boolean shouldOverrideUrlLoading(WebView view, String url) {

    //调用拨号程序 
   if (url.startsWith("mailto:") || url.startsWith("geo:") ||url.startsWith("tel:")) { 
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); 
    startActivity(intent); 
   }else
    view.loadUrl(url);


   return true;
  }

  public void onReceivedError(WebView view, int errorCode,
    String description, String failingUrl) {

  }

 };

}

通过这几个步骤,就是实现跟微信公众号文章详情页显示的进度条一致了。

效果图:

源码下载:Android微信页面加载进度条

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

相关文章

  • 从Cocos2d-x2迁移到Cocos2d-x3的过程分享

    从Cocos2d-x2迁移到Cocos2d-x3的过程分享

    Cocos2d-x 3.0发布没多久,我就迫不及待地将手头的一个习作尝试从2.2.2版本迁移到3.0rc0引擎上,本问介绍了迁移流程和遇到的问题,以及发现了针对Android平台的变动,需要的朋友可以参考下
    2014-04-04
  • android中使用SharedPreferences进行数据存储的操作方法

    android中使用SharedPreferences进行数据存储的操作方法

    本篇文章介绍了,在android中使用SharedPreferences进行数据存储的操作方法。需要的朋友参考下
    2013-04-04
  • Android模拟用户点击的实现方法

    Android模拟用户点击的实现方法

    这篇文章主要给大家介绍了关于Android模拟用户点击的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学学习学习吧。
    2018-02-02
  • Android项目实战之仿网易新闻的页面(RecyclerView )

    Android项目实战之仿网易新闻的页面(RecyclerView )

    这篇文章主要介绍了Android项目实战之仿网易新闻的页面,ViewPager作为RecyclerView的Header,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 使用Android studio编写一个小的jni程序

    使用Android studio编写一个小的jni程序

    JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++)。这篇文章给大家介绍了基于Android studio写一个小的jni程序的方法,一起看看吧
    2018-03-03
  • Android控件之RatingBar自定义星级评分样式

    Android控件之RatingBar自定义星级评分样式

    RatingBar为评分条控件,默认效果为若干个绿色的星星,如果想将其换成其他自定义图片就要自定义它的style。接下来通过本文给大家介绍Android控件之RatingBar自定义星级评分样式,感兴趣的朋友一起学习吧
    2016-02-02
  • Android ViewDragHelper使用方法详解

    Android ViewDragHelper使用方法详解

    这篇文章主要为大家详细介绍了Android ViewDragHelper的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android 5.0及以上编程实现屏幕截图功能的方法

    Android 5.0及以上编程实现屏幕截图功能的方法

    这篇文章主要介绍了Android 5.0及以上编程实现屏幕截图功能的方法,结合实例形式分析了Android5.0以上实现截图功能的相关类、函数及权限控制等操作技巧,需要的朋友可以参考下
    2018-01-01
  • Android中颜色选择器和改变字体颜色的实例教程

    Android中颜色选择器和改变字体颜色的实例教程

    这篇文章主要介绍了Android中颜色选择器和改变字体颜色的实例教程,其中改变字体颜色用到了ColorPicker颜色选择器,需要的朋友可以参考下
    2016-04-04
  • Android实现自定义加载框的代码示例

    Android实现自定义加载框的代码示例

    本篇文章主要介绍了Android实现自定义加载框的代码示例,App在与服务器进行网络交互的时候,有个提示加载框,有兴趣的可以了解一下。
    2017-02-02

最新评论