Android实现WebView加载网页及网页美化（简易新闻 四）

最新推荐文章于 2024-06-18 22:45:11 发布
最新推荐文章于 2024-06-18 22:45:11 发布
阅读量2.9k 收藏 9
点赞数 5
分类专栏： 简易新闻App 文章标签： WebView 去掉广告div 自适应屏幕 类似网易新闻网页样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tobey_r1/article/details/93512505
版权

Android实现WebView加载网页及网页美化（简易新闻 四）

关于之前的功能实现可以从制作简易新闻App导航篇中查看

主要使用WebView显示网页，使用JavaScript去除顶部广告，使用Toolbar实现导航栏样式
最终效果如下：
在这里插入图片描述
接上一篇博客(连接数据库，实现下拉刷新（简易新闻 三）)，先看一下Git动图

在这里插入图片描述
通过图片可以看到整个新闻网页分为三部分，分别是顶部Toolbar，WebView，Toolbar，具体实现方法如下。

第一步新建一个Empty Activity

新建一个WebActivity活动，修改activity_web.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".WebActivity">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_webview"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:background="@color/colorhuise"
            app:titleTextColor="@color/black"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <WebView
                android:id="@+id/webView"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">

            </WebView>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_webcomment"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                android:background="#ffffff"
                app:titleTextColor="@color/black"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:elevation="8dp"/>
        </LinearLayout>
    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

第二步添加color属性值

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorRed">#F00</color>
    <color name="colorBlack">#000</color>
    <color name="colorWhite">#FFF</color>
    <color name="colorhuise">#DCDCDC</color>
</resources>

第三步添加toolbar的menu文件

在res/menu文件夹下新建toolbar_webview.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <item android:id="@+id/news_search" android:orderInCategory="80" android:title="搜索" app:showAsAction="always"
        app:actionViewClass="android.widget.SearchView"
        />
    <item android:id="@+id/news_setting" android:title="夜间模式"
        app:showAsAction="collapseActionView"  tools:ignore="AppCompatRespource" android:orderInCategory="90"/>
    <item android:id="@+id/news_feedback" android:title="举报"
        app:showAsAction="collapseActionView"  tools:ignore="AppCompatRespource" android:orderInCategory="100"/>
</menu>

在res/menu文件夹下新建tool_webbootom.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <item android:id="@+id/news_share" android:orderInCategory="80" android:title="分享" app:showAsAction="ifRoom"
        android:icon="@drawable/ic_share_24dp"
        />
    <item android:id="@+id/news_collect" android:title="收藏" android:icon="@drawable/ic_star_border_favourite"
        app:showAsAction="ifRoom"  tools:ignore="AppCompatRespource" android:orderInCategory="70"/>
</menu>

第四步修改WebActivity.class类

package com.example.frametest;

import android.app.SearchManager;
import android.content.Context;
import android.content.Intent;
import android.net.http.SslError;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.SslErrorHandler;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.SearchView;
import android.widget.Toast;

public class WebActivity extends AppCompatActivity {
    private WebView webView;
    private Toolbar toolbar,ltoolBar;
    String url;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);
        //获取传递的路径
        webView = (WebView) findViewById(R.id.webView);
        toolbar = (Toolbar) findViewById(R.id.toolbar_webview);
        ltoolBar = (Toolbar) findViewById(R.id.toolbar_webcomment);
        findViewById(R.id.toolbar_webcomment).bringToFront();

    }

    @Override
    protected void onStart() {
        super.onStart();
        url = getIntent().getStringExtra("url");
        //显示JavaScript页面
        WebSettings settings = webView.getSettings();
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view,url );
                //通过查看每个新闻的网页发现网页广告的div样式的选择器为body > div.top-wrap.gg-item.J-gg-item 然后去除这个样式，使其加载网页去掉广告
                view.loadUrl("javascript:function setTop(){document.querySelector('body > div.top-wrap.gg-item.J-gg-item').style.display=\"none\";}setTop();");

            }

            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error){

//handler.cancel(); 默认的处理方式，WebView变成空白页
                handler.proceed();

//handleMessage(Message msg); 其他处理
            }

        });
        settings.setJavaScriptEnabled(true);
        settings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
        settings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setUseWideViewPort(true);
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        settings.setLoadWithOverviewMode(true);
        /*settings.setDisplayZoomControls(false);*/
        webView.loadUrl(url);

        setSupportActionBar(ltoolBar);
        toolbar.setTitle("简易新闻");
        setSupportActionBar(toolbar);
        ltoolBar.inflateMenu(R.menu.tool_webbottom);
        ltoolBar.setTitle("感谢观看");
        ltoolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem menuItem) {
                switch (menuItem.getItemId()){
                    case R.id.news_share:
                        Intent intent = new Intent(Intent.ACTION_SEND);
                        intent.putExtra(Intent.EXTRA_SUBJECT,url);
                        intent.setType("text/plain");
                        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                        startActivity(Intent.createChooser(intent,getTitle()));
                        break;
                    case R.id.news_collect:
                        //下一步实现点击收藏功能，以及用户查看收藏功能
                        break;
                }
                return true;
            }
        });
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_chevron_left);
        }
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_webview,menu);
        SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        SearchView searchView = (SearchView) menu.findItem(R.id.news_search).getActionView();
        searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                Toast.makeText(WebActivity.this,query,Toast.LENGTH_SHORT).show();
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                return false;
            }
        });
        return true;
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                Intent returnIntent = new Intent();
                WebActivity.this.finish();
                break;
            case R.id.news_setting:
                Toast.makeText(this,"夜间模式",Toast.LENGTH_SHORT).show();
                break;
            case R.id.news_feedback:
                break;
            default:
                break;
        }
        return true;
    }
}

关于如何去掉网页广告

在这里插入图片描述
如图点击F12，查看广告部分的div样式，找到其div id，右键蓝色选中部分选择copy，选择copy selector，将复制到的选择器，复制到如下代码中：

webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view,url );
                view.loadUrl("javascript:function setTop(){document.querySelector('body > div.top-wrap.gg-item.J-gg-item').style.display=\"none\";}setTop();");

            }

这样会在加载网页的时候去掉这个body部分。
好了，本篇实现到此结束，下一篇将会实现用户注册，用户点击收藏，以及查看用户个人收藏功能。
欢迎各位一起讨论。
App实现第三方Mob短信验证登录以及手机号显示和修改用户名（简易新闻 五）
项目源码GitHub地址为：https://github.com/ziruiliu1/MyBlog

雪の星空朝酱
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
简单的新闻APP简单的新闻APP
07-20
一个简单的新闻APP，通过jsoup抓取网上的内容显示到界面一个简单的新闻APP，通过jsoup抓取网上的内容显示到界面一个简单的新闻APP，通过jsoup抓取网上的内容显示到界面
安卓新闻系统
05-01
随着“后 PC 时代”的来临，Android(安卓)系统正在成为全球最受欢迎的应用平台之一，每天 70 万部 Android 手机的激活量直接预示着，其未来的发展格局无疑将成为相关产业竞相追逐的对象和焦点。 Android 平台上的开发由于成本低，难度小（java 语言） ，并且 Android 的市场占有率大，学校有许多的教研室都在做基于 android 平台的移动应用开发，也有一些个人或者兴趣团体在做。 可以说新闻是每个人都在关注的信息。随着移动互联网的到来，现在通过手机看新闻的人数越来越多。
android动态设置错误页面,Android中替换WebView加载网页失败时的页面
weixin_39990819的博客
05-26 436
我们用webView去请求一个网页链接的时候，如果请求网页失败或无网络的情况下，它会返回给我们这样一个页面，如下图所示：上面这个页面就是系统自带的页面，你觉得是不是很丑？反正小编本人觉得非常丑，很难看，于是乎小编就在想能不能自定义一个页面，当数据请求失败时让系统来加载我们自定义好的页面？上网查了很多资料，都没有关于这个问题的解决方法(反正我是没有找到)，经过小编的不断琢磨，今天终于实现了这个功能。...
【Android WebView】WebView基础
最新发布
dev晴天的博客
06-18 1254
web的error 页面比较丑，我们可以在加载失败时，展示安卓自定义的错误展示页。4、动画、银屏、视频 合适加载释放动画、银屏、视频 加载会造成cpu、电量消耗可在activity、 fragment的onResume、onStop进行开关控制。
Android中一个新闻项目中点击新闻，webview加载不出来，总报连接超时
Eryu532421的博客
11-24 842
是我将webview的布局写成 高度为0dp  权重为1，造成的。 将高度改为充满父窗体。就解决了
Android 使用WebView 加载新闻详情，添加点击图片的js(使用的腾讯的X5内核) (三)
Kenway090704的博客
06-29 1871
前面两篇文章，主要实现了X5内核的WebView 播放视频，这一篇主要是加载html 代码。 X5WebView public class X5WebView extends WebView { private OnTopicLoadCallback callback;//加载完成后,回调 TextView title; private WebViewClien...
Android WebView In NestedScrollView 加载腾讯新闻页面 点击弹出层 bug 小记
Keep Learning , Keep Improving !
12-09 2270
目的是： CoordinatorLayou+AppBarLayout+NestedScrollView webview 显示html的 Toolbar可以滑动时候隐藏和唤出。。。 链接素材：webview要加载的是腾讯触屏版新闻链接 http://xw.qq.com/ent/20161208035863/ENT2016120803586308 页面html本身效果：（新闻详情页显示图片，...
Android webview加载网页.zip
04-17
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序内部加载和显示网页内容，无需跳转到外部浏览器。这个“Android webview加载网页.zip”文件可能包含了一个示例项目或者教程，帮助开发者理解...
Android中WebView加载的网页被放大的解决办法
08-31
总之，要解决Android WebView加载网页被放大的问题，关键在于正确配置WebSettings，尤其是`ZoomDensity`属性。通过动态调整这个设置，我们可以使网页在不同密度的设备上呈现理想的显示效果，从而提升用户体验。同时...
详解Android Webview加载网页时发送HTTP头信息
08-30
在 Android 2.2 及更高版本中，Webview 提供了一个 loadUrl 方法，用于加载指定的 URL。该方法有两个参数，第一个参数是要加载的 URL，第二个参数是 extraHeaders，用于指定要发送的 HTTP 头信息。例如，我们可以...
Android使用原生组件WebView加载网页和数据的方法
09-01
综上所述，Android的WebView组件是实现应用内嵌网页展示的关键，通过合理的配置和使用，可以提供丰富的网页浏览体验。同时，开发者需要注意安全性和性能优化，确保用户体验的顺畅和应用的稳定性。
Android案例之新闻客户端服务器实现，完全属于自己的新闻展示平台
11-21
Android案例之新闻客户端服务器实现，完全属于自己的新闻展示平台
安卓webView页面基类-BaseWebActivity
08-19
安卓webView页面基类-BaseWebActivity,有网页加载进度条，有对手机显示网页的配置，有返回上一页等功能。
android webview中html页面点击按钮跳转到activity
04-10
在android端，用webview加载html，里面包含一个按钮，点击html里的按钮跳转到android的另一个activity中
MyWebActivity
09-23
这是Android开发中WebView使用方法详解的源代码，能帮助大家快速掌握WebView的使用方法。
安卓Android的新闻客户端毕业生系统设计源码
05-19
这是我的毕业设计,现在免费送出,安卓Android的新闻客户端毕业生系统设计源码.rar
Android中WebView加载网页设置进度条
08-30
以下是一个关于如何在Android中使用WebView加载网页并设置进度条的详细教程。 首先，我们需要在布局XML文件中创建一个WebView和一个ProgressBar。ProgressBar将用于显示加载进度，而WebView将用于展示网页内容。...
JQuery Mobile实现手机新闻浏览器（2）
weixin_30325487的博客
02-14 96
在上一篇文章中，已经讨论了程序的结构和页面的布局，并简单介绍了一些jQuery Mobile的使用技巧。在本篇文章中，笔者将继续完成我们web应用的新闻浏览器的设计。 　　程序的启动 　 　我们现在来研究一下程序的启动。当程序启动的时候，展示给用户的是新闻分类列表的页面，为了让每次这个新闻分类页面不为空，我们需要记下用户之前选择了 哪些感兴趣的分类。为了实现这个目的，我们通过使用jQue...
android 无网络处理布局,android 之 webview 无网络情况下简单处理 - Mr.Xu - 51CTO 技术博客...
weixin_36470210的博客
05-26 357
android 的 webview 是如何使用的网络上一搜索就是一大页面的资料。通常我们通过 webview 来访问 web 页面都是在网络的情况下，一旦没有网络就会显示 "无法找到该网页" 的信息，这样会暴露我们的连接，所以我们需要一个有好的提示，并且不会暴露链接的方法。这时候 WebViewClient 的 onReceivedError 方法就派上了用场！废话不多说直接上代码。1、创建 an...
android webview加载网页
06-08
在 Android 应用程序中，可以使用 WebView 控件来显示网页。下面是加载网页的基本步骤： 1. 在 XML 文件中添加 WebView 控件： ```xml <WebView android:id="@+id/webview" android:layout_width="match_parent...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪の星空朝酱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值