Android实现WebView加载网页及网页美化（简易新闻 四） |
您所在的位置：网站首页 › app界面优化的具体内容 › Android实现WebView加载网页及网页美化（简易新闻 四） |
Android实现WebView加载网页及网页美化（简易新闻 四）
|
Android实现WebView加载网页及网页美化（简易新闻 四）
关于之前的功能实现可以从制作简易新闻App导航篇中查看
主要使用WebView显示网页，使用JavaScript去除顶部广告，使用Toolbar实现导航栏样式 最终效果如下：
新建一个WebActivity活动，修改activity_web.xml布局文件 第二步添加color属性值 #008577 #00574B #D81B60 #F00 #000 #FFF #DCDCDC 第三步添加toolbar的menu文件在res/menu文件夹下新建toolbar_webview.xml文件 在res/menu文件夹下新建tool_webbootom.xml文件 第四步修改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; } } 关于如何去掉网页广告
这样会在加载网页的时候去掉这个body部分。 好了，本篇实现到此结束，下一篇将会实现用户注册，用户点击收藏，以及查看用户个人收藏功能。 欢迎各位一起讨论。 App实现第三方Mob短信验证登录以及手机号显示和修改用户名（简易新闻 五） 项目源码GitHub地址为：https://github.com/ziruiliu1/MyBlog |
接上一篇博客(连接数据库，实现下拉刷新（简易新闻 三）)，先看一下Git动图
通过图片可以看到整个新闻网页分为三部分，分别是顶部Toolbar，WebView，Toolbar，具体实现方法如下。
如图点击F12，查看广告部分的div样式，找到其div id，右键蓝色选中部分选择copy，选择copy selector，将复制到的选择器，复制到如下代码中：【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |