脚本界面实现自定义背景

发布于:2022-11-09 ⋅ 阅读:(10) ⋅ 点赞:(0) ⋅ 评论:(0)

提示:本篇文章针对Auto.js提供给类似我这样喜欢给脚本或者一些软件界面设置自定义界面的同志,不喜勿喷!


前言

提示:这里是本文要记录的大概内容:

自定义界面背景曾经是我遇到的一个大问题。比如路径的选址,图片资源在文件管理器中的位置等等都是值得初学者深思的问题。本篇文章是提供给遇到类似问题的小白,希望能给予一定的帮助或参考。


提示:以下是本篇文章正文内容,让我们试着实现一下。

一、界面背景

没有自定义界面的背景样式(左) VS 自定义背景样式(右):
对比图

二、设置步骤

1.VScode连接手机端

1.打开VScode.(保证手机端或者模拟器连接的WIFI相同)
2.Ctrl键+Shift键+P键打开VScode的功能窗口搜索《Auto.js:Start Server》.
3.打开模拟器或者手机端中的Auto.js,模拟器一般点击连接电脑可以自动连接;
手机端需要知道电脑的IP地址(可在命令行窗口输入ipconfig进行连接);电脑端
也可以通过Ctrl键+Shift键+P键打开VScode的功能窗口搜索《Auto.js:Run on 
Device》并输入IP地址.
4.显示New device attached: Device OnePlus GM1910(...)则表示连接成功.

2.使用Auto.js提供的界面模板

  • 在模拟器的主界面找到示例代码,然后示例代码中找到复杂界面,点击复杂界面中的界面模板一(点击那个笔的符号,查看其源码,不是运行),选中全部复制到VScode中。
  • 由于本篇文章的目的是关于自定义界面的,所以我们只需关心以下的代码部分:
    <viewpager id="viewpager">
    	<frame>
            <text text="第一页内容" textColor="black" textSize="16sp"/>
        </frame>
        <frame>
        	<text text="第二页内容" textColor="red" textSize="16sp"/>
        </frame>
        <frame>
        	<text text="第三页内容" textColor="green" textSize="16sp"/>
        </frame>
    </viewpager>
    

3.图片路径

  • 图片路径是我们最需要考虑的一个问题
    我们的图片应该是存在项目的文件夹中,而不是手机或者模拟器端,这样软件不会因为终端的变化而发生界面变化。
  • 考虑到项目保存到手机的位置
    我们的项目下载后,在手机的文件管理中可以找到一个位置。这个位置可以是默认的下载位置,也可以是自定义。所以这里我把项目放在或者下载在我创建的脚本文件夹下(根目录/脚本),此时该文件就会产生一个路径,当然这个路径应该是一个相对路径。我们可以在下载的时候设置安装位置,然后用作变量,实现背景自定义。
    我们这里采用作者提供的代码,bg="file:///sdcard/1.png",参考这条代码的格式,进行分析。如果是在手机端写的,会生成一个脚本文件夹在根目录,我们把图片放在该文件的img资源文件即可。

4.实现代码

我们只需在frame标签中添加以下内容:

<frame bg="file:///sdcard/脚本/img/1.jpg">

提示:并且可以给每个界面设置不同的背景,只需要每个frame标签设置不同的图片即可。

5.图片透明度设置

设置图片透明度,代码如下:

<frame bg="file:///sdcard/脚本/img/1.jpg" alpha="0.7">

三、缺点

  1. 如果该软件或者项目包下的图片文件丢失或者更改,可能导致整个软件报错或者背景的变化。
  2. 当我们下载软件的时候,一般不会直接把项目包发出来,容易造成源码泄露。

四、第二种实现方法

1.问题及看法

  • 这种方法是本人最近研究出来的也是刚接触时的思路,就是设置图片组件。可是最初想的是图片组件会挡住界面的文字部分或者是像一个相框的形式放在界面中,这样非常影响雅观。
  • 事实上,并不会呈现出类似相框的效果,只不过不设置图片的位置和尺寸大小等属性,图片会在界面的左上端且为图片的原始大小,也不是很美观。
  • 只是我作为一个初学者,对于JavaScript语言不是很熟悉,所以自然对于一些标签的属性不了解,我发现了img标签的scaleType,能够很好的解决这个问题。如果图片的尺寸合适,就不会出现图片变形拉伸的效果,而且图片不会覆盖文字部分,还呈现出嵌入界面的感觉。

2.实现代码

实现的方法就是在frame标签内插入img标签并设置属性值,代码如下:

<img scaleType="fitXY" src="https://..../.jpg"/>

并且我们可以采用图片的原始地址或者一些稳定的图床网站


总结

这样的实现方法可以避免对路径不了解的情况,也可以避免项目移动报错或背景变化的问题,应该是目前本人觉得最有效的方法。