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

最新推荐文章于 2021-05-29 09:20:09 发布

原创

最新推荐文章于 2021-05-29 09:20:09 发布 · 3.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#WebView #去掉广告div #自适应屏幕 #类似网易新闻网页样式

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"