Android 编写、使用html和css代码

iㅤ

已于 2023-02-04 18:36:46 修改

阅读量8k

点赞数 4

分类专栏： Android 文章标签： java android html webview

于 2022-03-04 00:19:59 首次发布

本文链接：https://blog.csdn.net/w41ted/article/details/123266712

版权

Android 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

前言

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

创建文件

创建assets文件

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

创建html文件

随后我们要创建html文件
右键assets -> New -> File
在这里插入图片描述
随后输入名称（这里我已经创建过index就打index2了）

然后我们按了回车了之后就可以选择文件的类型了

这样我们就创建好了一个html文件，就可以在里面写代码了

<html>
<head>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<form>

    <div class="segment">
        <h1>Sign up</h1>
    </div>

    <label>
        <input type="text" placeholder="Email Address"/>
    </label>
    <label>
        <input type="password" placeholder="Password"/>
    </label>
    <button class="red" type="button"><i class="icon ion-md-lock"></i> Log in</button>

    <div class="segment">
        <button class="unit" type="button"><img src="./icon/back.png"></button>
        <button class="unit" type="button"><img src="./icon/collect.png"></i></button>
        <button class="unit" type="button"><img src="./icon/setting.png"></i></button>
    </div>

    <div class="input-group">
        <label>
            <input type="text" placeholder="Email Address"/>
        </label>
        <button class="unit" type="button"><img src="./icon/find.png"></img></button>
    </div>

</form>
</body>
</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中加上这个就好了

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

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

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

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

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

iㅤ

关注

4
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
6
评论
Android 编写、使用html和css代码

文章目录前言创建文件创建assets文件创建html文件创建css文件查看文件图片文件Java类前言在写Android代码过程中，想写关于组件的阴影的，但是发现使用elevation属性并没有能达到我想要的效果，而具体想要实现的效果是从html代码看来的，所以就突然想能不能在Android上使用html的代码创建文件创建assets文件html的文件呢，我们是需要创建在assets文件下的创建方法：在Project目录下，右键main -> New -> Directory输入
复制链接

扫一扫