所在的位置: js >> js优势 >> autojs模仿QQ来电界面

autojs模仿QQ来电界面

牙叔教程简单易懂

QQ来电界面

分析界面

首先排除左上角那两个箭头,不要它;

布局用vertical纵向布局;

上面放头像,下面放挂机接听按钮;

背景是头像模糊的头像;

布局分析完了,下面开始写界面

模糊头像

也可以说是毛玻璃效果

原本的头像

模糊后的头像

裁剪图片

头像是正方形的,背景是长方形的,所以要裁剪图片,比例就按照屏幕比例来;

以头像的高为标准,按照屏幕比例计算对应的宽度;

然后把位于中间的图片裁剪下来;

背景变暗

QQ来电界面的背景,看上去有点暗,因此我们加一层黑色透明遮罩;

虽然不太像QQ那种效果,不过也差不多;能用就行,要求不高;

整体布局

上面红色区域放头像,下面黄色区域放接听拒接

添加头像

头像是上下布局,使用vertical;

图片+文字

添加底部电话

底部布局一分为二

添加左侧拒接电话

左侧是纵向布局,使用vertical,并且靠近底部,不是居中,也不是靠上;

靠近底部使用属性

gravity="center

bottom"

电话还要加一个圆角矩形的背景

添加右侧接听

右侧就一个图片,再加一个圆角矩形背景

模仿的初步成果

去掉多余的背景色

看着像是那么回事

雷电模拟器的效果

本来圆形的头像变成了圆角矩形;

本来圆角矩形的接听,变成了圆形;

我们来修改一下,使两种测试设备,看上去风格保持一致;

为什么不一样

原因有以下几点

设备分辨率不一样

界面xml里面的属性有的使用dp,有的使用px

知道原因以后,我们把单位统一改成dp,这样风格就一样了

为什么模拟器背景是灰色的,而不是黑色的

为了排查这个问题,我们把多余的代码都删掉,只留下背景相关的代码;

突然想到,我是在手机上截图的,模拟器用的也是手机截图,所以我们把裁剪图片的代码,合并到脚本里面;

大功告成!!!

环境

手机:小米11pro

MIUI:13.0.12

Android版本:12

Autojs版本:9.1.22

名人名言

思路是最重要的,其他的百度,bing,stackoverflow,github,安卓文档,autojs文档,最后才是群里问问---牙叔教程

声明

部分内容来自网络本教程仅用于学习,禁止用于其他用途




转载请注明:http://www.aierlanlan.com/grrz/4157.html