webview加载assets下的html5页面

来源：互联网发布：淘宝屏蔽广告评论编辑：程序博客网时间：2024/05/16 06:04

利用webview去加载assets目录下的html界面

点击打开链接，免积分下载

apdate_function.xml 主界面就一个WebView控件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <WebView        android:id="@+id/web_function"        android:layout_width="match_parent"        android:layout_height="match_parent"></WebView></LinearLayout>

MainActivity 主界面也很简单

package com.example.reloadlocalhtml;import android.app.Activity;import android.os.Bundle;import android.webkit.WebView;public class MainActivity extends Activity{    private WebView web_function;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.apdate_function);        web_function = (WebView)findViewById(R.id.web_function);        web_function.getSettings().setJavaScriptEnabled(true);        web_function.loadUrl("file:///android_asset/fun_Introduce.html");    }}

接下来看assets目录下的fun_Introduce.html文件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><title>功能介绍</title></head><style>body{width: 100%; font-family: "微软雅黑"; padding: 15px;}*{margin:0; padding: 0;text-align: left;box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;}.fun-title{font-size: 16px;color: #333333; margin-bottom:35px;}.fun-content p{font-size: 14px;color: #666666; line-height: 28px;}.con-title{ margin-bottom: 10px; margin-top: 30px;}.two-title{margin-top: 30px;}</style><body><p class="fun-title">功能介绍</p><div class="fun-content"><p>“X-Phone”是一款基于安卓系统的虚拟手机APP，可以轻松实现“一部手机，双重身份”，即一部手机，两个号码，两个不同的账号同时在线，互不影响。X-Phone在手机中分割出一块独立的空间，提供独立的操作系统，可以实现独立通话、应用双开、隐私文件存储等功能。</p><p class="two-title">功能特色：</p><p class="con-title">1.应用双开</p><p>一个手机可以同时登录多个账号，支持主流应用，如微信、QQ、支付宝、游戏等，无需重复登录即可享受不同的朋友圈，分享不同的信息，获得游戏双倍经验。</p><p class="con-title">2.私密通话</p><p>完全独立的通话系统，让您可以和私密联系人放心畅谈。私密联系人之间不论是接听电话，漏接来电，都一并转入X-Phone中，免去您忘记删除通话记录的尴尬。</p><p class="con-title">3.一键导入</p><p>一键导入联系人，免去新建联系人的麻烦，一键导入主机中的应用，免除重新下载的苦恼。</p><p class="con-title">4.独立密码</p><p>X-Phone支持独立虚拟锁，别人无法进入软件查看您的隐私。即便您把手机丢在家里或者办公室，也不用担心别人可以获取您的通话及聊天记录。虚拟锁可以让您从容不迫地应对各种突发意外事件。</p><p class="con-title">5.数据保护</p><p>X-Phone将实体手机中的空间进行切割，从而动态独立出一个独有空间，空间内的APP及数据和手机系统相互独立，即X-Phone系统拥有和主机系统相同的体验，包括电话、短信、联系人、APP等，在X-Phone系统内的应用和手机系统互不影响，X-Phone入口可隐藏，设置密码，可存储重要文件寄隐私文件。</p></div></body></html>

对html也就是大概能看懂，简单说下，也算是为我后期学的h5跟android的混合模式打下一个小基础，主要看下面的属性设置

<span style="font-size:14px;">body{width: 100%; font-family: "微软雅黑"; padding: 15px;}*{margin:0; padding: 0;text-align: left;box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;}.fun-title{font-size: 16px;color: #333333; margin-bottom:35px;}.fun-content p{font-size: 14px;color: #666666; line-height: 28px;}.con-title{ margin-bottom: 10px; margin-top: 30px;}.two-title{margin-top: 30px;}</span>

body内容区宽度相当于安卓xml里面的match_parent，另外字体类型微软雅黑 padding就是内边距

*是通配符，所有的元素都会沿用这个属性样式，既然body体已经设置内边距了，我们本例旗下的控件都不需要margin了padding了，距离都是0，text-align左边对齐

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了

.代表某个class，跟Java语法很像，.class嘛

line-height: 28px代表行间距其他的字体大小，颜色，margin

其实我有个地方不明白，就是

<span style="font-size:14px;">*{margin:0; padding: 0;text-align: left;box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;}</span>

去掉margin:0; padding: 0;为啥效果就变了呢？有空在来学学html css吧

0 0