Android WebView 应用界面开发教程

2024-12-08 00:52:59

WebView组件本身就是一个浏览器实现，Android5.0增强的WebView基于Chromium M37，直接支持WebRTC、WebAudio、WebGL。开发者可以直接在WebView中使用聚合（Polymer）和Material设计。

一.WebView浏览网页（加载线上URL）

WebView提供了很多方法执行浏览器操作，常用方法如下：

void goBack()：后退
void goForward()：前进。
void goBackOrForward(int step)：step为正表示前进，step为负表示后退。
void loadUrl(String url)：加载指定URL对应的网页。
boolean zoomIn()：放大网页。
boolean zoomOut()：缩小网页。

实例：迷你浏览器

该实例包含两个界面，第一个界面包括输入网址和打开网址，第二个界面包含一个WebView，用于显示第一个界面输入的URL对应的界面。程序代码如下：

第一个界面

public class MainActivity extends AppCompatActivity {
private EditText mEditUrl;
private Button mBtnOpen;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mEditUrl = (EditText) findViewById(R.id.edit_url);
mBtnOpen = (Button) findViewById(R.id.btn_open);
mBtnOpen.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, WebViewActivity.class);
String url = mEditUrl.getText().toString();
intent.putExtra("url", url);
startActivity(intent);
}
});
}
}

这个界面很简单，一个输入框，一个按钮，分别用于输入网址和打开WebView。

第二个界面

public class WebViewActivity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
mWebView = (WebView) findViewById(R.id.web_view);
Intent intent = getIntent();
String url = intent.getStringExtra("url");
mWebView.loadUrl(url);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient(){
});
}
@Override
public void onBackPressed() {
if (mWebView != null && mWebView.canGoBack()){
mWebView.goBack();
}else {
super.onBackPressed();
}
}
}

这段代码调用WebView的loadUrl(String url)方法加载、显示该URL对应的网页，并设置使其支持JavaScript。如果打开WebView过程中跳转到浏览器，则通过设置WebViewClient来是其在WebView中显示。

并重写了onBackPressed()方法，当WebView不为空且WebView可以回退时，返回上一个WebView界面，而不是直接回退到上一个Activity。

由于该应用需要访问互联网，所以需要在AndroidManifest.xml中配置：

<uses-permission android:name="android.permission.INTERNET"/>

该实例的效果图如下：

二.WebView加载HTML代码

WebView提供了一个loadData(String data, String mimeType, String encoding)方法，该方法可用于加载并显示HTML代码，但该方法会发生乱码。

WebView还提供了一个loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)方法，该方法是loadData(String data, String mimeType, String encoding)方法的增强版，不会产生乱码。该方法的几个参数说明：

data：指定要加载的HTML代码。

mimeType：指定HTML的MIME类型，对于HTML可指定为text/html。

encoding：指定HTML代码编码所用的字符集，比如指定为GBK。

WebView加载HTML代码：

public class MainActivity extends AppCompatActivity {
private WebView mShowWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mShowWebView = (WebView) findViewById(R.id.show_web_view);
StringBuilder sb = new StringBuilder();
//拼接一段HTML代码
sb.append("<html>");
sb.append("<head>");
sb.append("<title> 欢迎您 </title>");
sb.append("</head>");
sb.append("<body>");
sb.append("<h2> 欢迎您访问<a href = \"http:www.baicu.com\">" + "百度一下</a></h2>");
sb.append("</body>");
sb.append("</html");
//加载并显示HTML代码
mShowWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}
}

该实例运行效果如下：

三.WebView中的JavaScript调用Android方法

在WebView中调用Android方法需要三步：

调用WebView关联的WebSettings的setJavaScriptEnabled(true)启用JavaScript调用功能。

调用WebView的addJavaScriptInterface(Object object, String name)方法将object对象暴露给JavaScript对象。

在JavaScript脚本中通过刚才暴露的name对象调用Android方法。

写一个在JavaScript中调用Android方法的实例，该实例界面包含一个WebView组件，用于显示HTML页面。Activity代码如下：

public class MainActivity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.web_view);
//使用file协议加载本地assets目录下的HTML页面
mWebView.loadUrl("file:///android_asset/test.html");
//获取WebView的设置对象
WebSettings webSettings = mWebView.getSettings();
//开启JavaScript调用
webSettings.setJavaScriptEnabled(true);
//将MyObject对象暴露给JavaScript对象
mWebView.addJavascriptInterface(new MyObject(this), "myObj");
}
}

在上面代码中开启了JavaScript调用Android方法的功能，并将Android应用中的MyObject对象暴露给JavaScript脚本，暴露成JavaScript脚本中名为myObj的对象。

MyObject代码如下：

public class MyObject {
private Context context;
public MyObject(Context context) {
this.context = context;
}
//该方法将会暴露给JavaScript脚本调用
@JavascriptInterface
public void showToast(String name) {
Toast.makeText(context, name + "，您好！", Toast.LENGTH_SHORT).show();
}
//该方法将会暴露给JavaScript脚本调用
@JavascriptInterface
public void showList() {
//显示一个普通的列表对话框
new AlertDialog.Builder(context)
.setTitle("图书列表")
.setIcon(R.mipmap.ic_launcher)
.setItems(new String[]{"Head First Android", "Head First Java", "Thinking in Java"}, null)
.setPositiveButton("确定", null)
.create()
.show();
}
}

MyObject中包含了两个方法，showToast()和showList()方法，且这两个方法使用了@JavascriptInterface修饰，使得这两个方法会暴露给JavaScript脚本，从而允许JavaScript脚本通过myObj来调用这两个方法。HTML页面代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Js调用Android</title>
</head>
<body>
<!-- 注意此处的myObj是Android暴露出来的对象-->
<input type="button" value="打招呼"
onclick="myObj.showToast('Android');"/>
<input type="button" value="图书列表"
onclick="myObj.showList();"/>
</body>
</html>

当用户点击页面上的两个按钮时，该页面的JavaScript脚本会通过myObj调用Android方法。

运行该实例，点击第一个按钮，效果图如下：

点击第二个按钮，效果图如下：

以上所述是小编给大家介绍的Android WebView 应用界面开发教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Android WebView使用的技巧与一些坑

随着手机性能的提高,以及iOS和Android两个平台的普及,更多的App都会选择两个平台的App都进行开发,在有些时候,为了更加快速的开发,我们会采用hybird方式开发,这个时候我们需要使用webview并且自己进行一些配置.Android的webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了chrome,因此问题很多,这里分享一些我使用过程的一些技巧和遇到的坑. ###webview配置### mWebview.getSettings().setJavaScr
WebView的几个常见功能使用方法

android的WebView组件可以说是相当的强大,现将项目中经常用到的几个功能总结如下: 一.背景设置 WebView.setBackgroundColor(0);//先设置背景色为transparent WebView.setBackgroundResource(R.drawable.yourImage);//然后设置背景图片二.获得WebView网页加载初始化和完成事件步骤: 1 创建一个自己的WebViewClient(继承 WebViewClient 类)如WebViewClie
Android开发中WebView的简单使用小结

前言 WebView(网络视图)在Andorid中就是用来显示网页的,下面我们来一起看看它是如何使用的. 一.基本使用 1.声明权限,WebView不可避免地要用到网络,我们要加上网络访问权限. <uses-permission android:name="android.permission.INTERNET"/> 2.放入Layout <WebView android:layout_width="match_parent" android:la
Android Webview使用小结

本文实例为大家分享了Android Webview使用小结,供大家参考,具体内容如下 #采用重载URL的方式实现Java与Js交互在Android中,常用的Java与Js交互的实现方式是通过函数addJavascriptInterface进行添加在Js中使用的回调代理类. 这种方法虽然方便,但是写出来的js代码并不通用.如果IOS也要实现类似的功能或业务,则IOS要另外写一套Js代码.所以不太推荐. 推荐使用重载URL的方式来实现,因为基本所有的平台都拥有在加载某个URL之前进行一些处理的回调
Android中WebView的一些简单用法

Android中WebView的一些简单用法一直想写一个关于 WebView 控件的一些简单运用,都没什么时间,这次也是挤出时间写的,里面的一些基础知识就等有时间再更新讲解一下,今天就先把项目出来做一些简单介绍,过多的内容可以看我的源码,都传到github上了. 下面是项目的效果图: 应用用到的是 MVP 设计模式,对这种模式还不太了解的可以先自行google一下,不然项目估计会看的晕,虽然我的代码都很简洁的. 对于MVP 可以带着一个思路看源码,那就是 activity(或其他组件)通过
Android使用原生组件WebView加载网页和数据的方法

在Api中关于这个类的介绍大致就是这是一个可以显示网页的视图,如: webView.loadUrl(http://www.baidu.com/); 显示结果: 还可以加载一些html的字符串,如: String str = "<html><body>You scored <b>192</b> points.</body></html>"; webView.loadData(str, "text/html&
Android WebView 应用界面开发教程

WebView组件本身就是一个浏览器实现,Android5.0增强的WebView基于Chromium M37,直接支持WebRTC.WebAudio.WebGL.开发者可以直接在WebView中使用聚合(Polymer)和Material设计. 一.WebView浏览网页(加载线上URL) WebView提供了很多方法执行浏览器操作,常用方法如下: void goBack():后退 void goForward():前进. void goBackOrForward(int step):step
详解android studio游戏摇杆开发教程，仿王者荣耀摇杆

最近在做一个山寨版的王者荣耀,刚开始做的时候毫无头绪摇杆的多点触控做的特别烂经过几天的思考已完美解决所有问题,下面就和大家分享下这个摇杆的开发思路若有不正之处,请多多谅解并欢迎指正. 首先这个摇杆要用到较多的数学知识,小编的数学特别烂也就高中水平吧我们这个摇杆一共就五个按钮,一个移动摇杆.三个技能摇杆和一个普通攻击按钮最终效果好了废话少说让我们开始吧新建一个项目建好项目之后,我们先新建一个类叫做"画".也是我们的主View 修改Hua.java的代码 public cl
Android miniTwitter登录界面开发实例

本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界面,下面将分步骤讲解怎样实现图中的界面效果,让大家都能轻松的做出美观的登录界面. 先贴上最终要完成的效果图: miniTwitter登录界面的布局分析首先由界面图分析布局,基本可以分为三个部分,下面分别讲解每个部分. 第一部分是一个带渐变色背景的LinearLayout布局,关于背景渐变色就不再贴代码了,效果如下图所示: 第二部分,红色线区域内,包括1,2,3,4 如图所示: 红色的1表示的是一个带圆
Android仿Win8界面开发

本文将要模仿Win8界面的一个设计,一个一个的方块.方法很简单.这里自己把图片改改就可以成为自己想要的界面了. 1.首先来看看自定义的MyImageView: package com.example.win8test; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Camera; import android.graphics.Canvas; impo
Android调用摄像头拍照开发教程

现在很多应用中都会要求用户上传一张图片来作为头像,首先我在这接收使用相机拍照和在相册中选择图片.接下来先上效果图: 接下来看代码: 1.布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schem
Android NDK 开发教程

Android NDK 是在SDK前面又加上了"原生"二字,即Native Development Kit,因此又被Google称为"NDK". 众所周知,Android程序运行在Dalvik虚拟机中,NDK允许用户使用类似C / C++之类的原生代码语言执行部分程序. NDK包括了: 从C / C++生成原生代码库所需要的工具和build files. 将一致的原生库嵌入可以在Android设备上部署的应用程序包文件(application packages fi
Android UI设计与开发之实现应用程序只启动一次引导界面

这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部分的引导界面基本上都是千篇一律的,只要熟练掌握了一个,基本上也就没什么好说的了,要是在今后的开发中遇到了更好玩,更有趣的引导界面,博主也会在这里及时的跟大家分享,今天的内容主要是教大家的应用程序只有在第一次启动的时候显示引导界面,以后在启动程序的时候就不再显示了. 其实要想实现这样的效果,只要使用SharedPreferences类,就会让程序变的非常简单,下面来详细介绍一下这个类的使用方法一.SharedPreferences的详
Android 界面开发颜色整理

下图是帮助文档中的关于界面开发的推荐色值,大家可以参考一下: 补充一些常用的颜色值: <color name="white">#ffffff</color> <color name="ivory">#fffff0</color> <color name="lightyellow">#ffffe0</color>
Android WebView拦截iframe标签内部跳转教程

最近项目里有个广告位需要动态配置,后台给了一段 html 嵌套iframe标签的代码,需要Android拦截iframe内部的跳转,自己做处理. 比如,下面是一段html代码,嵌套这iframe标签,src就是跳转地址,我现在就要当你点击该网址的时候做拦截,自己做处理而不是跳转. <html> <iframe src="https://www.jb51.net/" frameborder='0' scrolling='no' width='100%' height='
Android WebView开发之自定义WebView工具框

附GitHub源码:WebViewExplore 先看图: 在WebView页面长按时会弹出一个复制框,但如果里面的item不是我们想要的或者想自定义,那么可以通过覆盖WebView的 startActionMode 方法来实现: /** * 长按弹出ActionMode菜单样式 * @param callback * @param type * @return */ @Override public ActionMode startActionMode(Callback callback, i

Android WebView 应用界面开发教程

相关推荐

随机推荐