iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android WebView 应用界面开发教程
  • 582
分享到

Android WebView 应用界面开发教程

界面webview教程Android 2022-06-06 07:06:33 582人浏览 八月长安
摘要

WEBView组件本身就是一个浏览器实现,Android5.0增强的WebView基于Chromium M37,直接支持WebRTC、WebAudio、webGL。开发者可以直

WEBView组件本身就是一个浏览器实现,Android5.0增强的WebView基于Chromium M37,直接支持WebRTC、WebAudiowebGL开发者可以直接在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加载网页和数据的方法Android开发中WebView的简单使用小结Android中WebView的一些简单用法Android WebView使用的技巧与一些坑Android Webview使用小结WebView的几个常见功能使用方法


--结束END--

本文标题: Android WebView 应用界面开发教程

本文链接: https://www.lsjlt.com/news/24406.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 使用Kotlin开发Android应用教程
    使用Kotlin开发Android应用1、Kotlin介绍 [Kotlin](https://kotlinlang.org/)Kotlin是一门基于JVM的编程语言,它正成长为Android开发中用于替代Java语言的继承者。Ja...
    99+
    2023-05-31
    kotlin android roi
  • 浅谈Android开发Webview的Loading使用效果
    目录前言1. loading的选择2. loading显示时机的问题3. 体验优化4. loading最终设计效果总结前言 在开发webview的loading效果的时候会有一些问...
    99+
    2023-02-02
    Android Webview Loading Android Webview
  • Android开发入门教程
    当涉及到 Android 开发入门教程时,以下是一个详细的大纲,包含了一些常见的实践和指导: Android 概述    - 介绍 Android 平台的基本概念和特点    - 解释 Android 应用的组成和架构    - 说明 A...
    99+
    2023-09-02
    android
  • Android开发如何使用WebView打造web app
    这篇文章主要为大家展示了“Android开发如何使用WebView打造web app”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Android开发如何使用WebView打造web&n...
    99+
    2023-06-29
  • VB.NET界面开发应用技巧有哪些
    这篇文章主要为大家展示了“VB.NET界面开发应用技巧有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“VB.NET界面开发应用技巧有哪些”这篇文章吧。VB.NET界面VB允许我们创建有多个界...
    99+
    2023-06-17
  • Android开发使用WebView打造webapp示例代码
    目录前言代码如下前言 博主最近想做一款app,因为内容已经有了,故想到了使用WebView来做 ,现将代码贴出如下,供有同样需求的人参考,少走弯路 代码如下 public ...
    99+
    2024-04-02
  • uni-app开发android应用流程
    uni-app开发android详情 一、下载并安装hbuilder和android studio uni-app官网:uni-app官网hbuilder下载地址:HBuilderX 文档android studio下载地址:Downloa...
    99+
    2023-09-14
    android uni-app android studio
  • Android动态界面开发框架Tangram了解
    Tangram是一个用于Android动态界面开发的框架。它提供了一套丰富的组件,开发者可以通过配置来实现动态布局和界面的渲染。Ta...
    99+
    2023-09-20
    Android
  • Android开发中本地html文件怎么使用webView打开
    这期内容当中小编将会给大家带来有关Android开发中本地html文件怎么使用webView打开,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。具体如下:在布局的配置文件里:<WebView and...
    99+
    2023-05-31
    android webview html
  • C++图形界面开发Qt教程:嵌套圆环示例
    目录嵌套圆环图运行示例总结Qt是一个跨平台框架,通常用作图形工具包,它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统(如Symbian,No...
    99+
    2024-04-02
  • Android调用应用安装界面方法
    今天来教大家android如何跳转系统安装界面 1.首先给AndroidManifest.xml(清单配置文件)添加权限 <uses-permission android:na...
    99+
    2024-04-02
  • Android音视频开发之MediaExtactor使用教程
    目录前言MediaExtactor使用MediaExtactor加载音视频文件代码获取轨道代码提取轨道数据信息一些源码细节分析前言 在之前学习如何使用MediaPlayer后,了解到...
    99+
    2024-04-02
  • Android应用开发(1)Android Studio开发环境搭建
    Android应用开发学习笔记——目录索引 本章介绍搭建Android Studio应用开发环境,创建并编译App工程,运行和调试App。 一、搭建AndroidStudio开发环境 1.下载AndroidStudio 谷歌开发...
    99+
    2023-09-17
    android Powered by 金山文档
  • Android开发笔记之Fragment的使用教程
    目录何为碎片特点如何引入碎片静态引入动态加载碎片的通信活动和碎片间的通信碎片和活动间的通信碎片和碎片间的通信何为碎片 官方文档中提到: A fragment represents a...
    99+
    2023-05-19
    Android Fragment Android Fragment使用
  • 使用Android Studio 开发自己的SDK教程
    由于之前一直没有写博客的习惯,所以这么些年下来回头看时并没有留下些实质的东西,所以从今天开始决定还是写点东西。最近刚刚才开始接触SDK的开发,先从简单的开始吧,今天就介绍使用Android Studio开始第一个SDKDemo的开发。先使用...
    99+
    2023-05-30
    android studio roi
  • Android音视频开发之MediaPlayer使用教程
    目录MediaPlayer简单使用缺陷AndroidMediaPlayer播放器封装状态机编写内部类初始化函数方法和回调小结MediaPlayer Android多媒体框架支持播放提...
    99+
    2024-04-02
  • Android开发中如何控制界面进行刷新
    Android开发中如何控制界面进行刷新?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。具体方法如下public class MemoryUt...
    99+
    2023-05-31
    android roi
  • 小程序登录界面怎么开发
    这篇“小程序登录界面怎么开发”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“小程序登录界面怎么开发”文章吧。  小程序登录界面...
    99+
    2023-06-26
  • adb shell 命令打开android系统的开发者选项界面
      adb shell am start -n com.android.settings/com.android.settings.DevelopmentSettings 来源地址:https://blog.csdn.net/MyLove...
    99+
    2023-09-28
    android adb android studio 开发者选项
  • Android开发中使用WebView怎么添加一个进度条
    Android开发中使用WebView怎么添加一个进度条?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。标准的XML界面<&#63;xml vers...
    99+
    2023-05-31
    android webview roi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作