IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Android 编写、使用html和css代码 -> 正文阅读

[移动开发]Android 编写、使用html和css代码

前言

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

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 13:12:56  更:2022-03-06 13:14:34 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 16:22:03-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码