Android 编写、使用html和css代码

2024-07-16 15:49| 来源: 网络整理| 查看: 265

文章目录前言创建文件创建assets文件创建html文件创建css文件查看文件图片文件 Java类

前言

在写Android代码过程中，想写关于组件的阴影的，但是发现使用elevation属性并没有能达到我想要的效果，而具体想要实现的效果是从html代码看来的，所以就突然想能不能在Android上使用html的代码

创建文件创建assets文件

html的文件呢，我们是需要创建在assets文件下的创建方法：在Project目录下，右键main -> New -> Directory 在这里插入图片描述输入assets（输入一半时候就发现其实项目中已经有资源的，只是我们没有使用，直接点击了之后回车创建就好了）

创建html文件

随后我们要创建html文件右键assets -> New -> File 在这里插入图片描述随后输入名称（这里我已经创建过index就打index2了）然后我们按了回车了之后就可以选择文件的类型了这样我们就创建好了一个html文件，就可以在里面写代码了

这里呢我写的代码是这样的里面用到了css 那么我们就还需要创建css

创建css文件

这里呢，其实用上面相同的创建html的方法使用file里面是有css文件的，但是当时我的html文件没能用< link/> 联系到css文件所以呢这里我是这样创建的：在这里插入图片描述打的文件名字直接带.css 这里就会有疑问了，那我前面html文怎么不一起打后缀呢这个嘛后面会讲到的注：（多提一点，如果大家平时的css中有例如 16px * 2 这样子的在平时的编写html代码用的编译器比如vscode中应该是可以实现的而我在Android中运行发现这是无效属性，在Android中使用html代码 css中直接计算成具体的数值 32px）

查看文件

在这里插入图片描述我们可以右键相应的html或者css文件点击 Show in Explorer进入文件夹这时呢来解答一下前面html不用后缀的事原因是：如果打了后缀那他就是一个网页了而我们是在类里面用WebView来打开我们的html文件，所以是不带后缀的在这里插入图片描述使用的是index文件不过你可以先添加后缀使用浏览器查看然后可以跟平时html一样右键检查这样确实比较方便，不过等要在Android上运行的时候记得要把后缀删掉后缀改回来才能运行

图片文件

如果要使用图片则是要创建一个icon文件夹，讲图片放到里面在这里插入图片描述

Java类 public class MainActivity2 extends AppCompatActivity { private WebView webview; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); webview = new WebView(this); //让JavaScript调用Android方法 webview.getSettings().setJavaScriptEnabled(true); try { //设置打开的页面地址 webview.loadUrl("file:///android_asset/index"); }catch (Exception e){ e.printStackTrace(); } setContentView(webview); } }

这里呢我是new一个 webView 我并没有在布局中写WebView组件不过要在布局中写了WebView 再来类中绑定实例也是一样的然后按照上面代码这样写，也有相应的注释了不可缺少哦需要注意的就是url 里面字符串的格式需要像上面代码这样打才可以找到对应的html文件然后最后设置就好了

这时候运行，其实你会发现报错了原因呢在于我们需要加上网络权限在这里插入图片描述在AndroidManifest.xml中加上这个就好了

这样我们就可以在Android中使用html代码了

这里我用虚拟机运行的我上面写的html和css的代码是这样的在这里插入图片描述这里呢我没有写关于数据交换的，数据交换好像是用到js的所以目前就还没有写出来，具体要使用的话也可以具体去学一学

不过目前我发现有一点瑕疵在Android上不论是虚拟机还是真机上运行html代码点击按钮不能像网页那种感觉丝滑点击之后会有那种点击的变蓝的效果还不知道能不能改掉尽量试试把

这样我们就在Android上使用html代码了（不得不说虽然我是写Android的但是感觉html的前端确实比Android的写的好看）

【本文地址】

公司简介

联系我们