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