文章目录

前言

在写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的写的好看）

# java # android # html # webview
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

新华网：开源盛会在江城——2024开放原子开发者大会侧记

开源盛会在江城——2024开放原子开发者大会侧记

avatar 开放原子开发者工作坊

新华社：释放开源潜能，加快构筑软件创新“朋友圈”

释放开源潜能，加快构筑软件创新“朋友圈”

avatar 开放原子开发者工作坊

开源鸿蒙：引领万物智联，加速生态崛起

开源鸿蒙：引领万物智联，加速生态崛起

avatar 开放原子开发者工作坊