我是如何使用全局负一屏的?
date
Mar 1, 2020
slug
how-i-use-global-side-screen
status
Published
tags
Android
KWGT
DIY
summary
type
Post
目录
前言
这个假期接触了 KWGT 和 Tasker,使用这两个东西能创造出独一无二的小部件让我十分激动。再配合全局负一屏应用,分分钟能打造出令自己心仪的负一屏。由此我开始了自己的折腾道路,并成功搞定了一个令我满意的负一屏:实用与美观兼备。下面我将向大家介绍如何使用全局负一屏和 KWGT 配合做出一个向我这种样式的负一屏。
注:本文使用最新的全局负一屏版本
构建框架
在开始构建框架之前,我们必须明白,在全局负一屏应用里,小部件是只允许纵向排列的。如果我们想要实现横向排列的效果就不得不使用 KWGT,而使用这一方法的缺点又在于,我们只能自己创建或使用别人的预设,不能使用其他应用提供的小部件。
第一步:设置全局负一屏
这里我们想要实现的是负一屏居中显示,所以设置成屏幕边缘间隔 + 负一屏宽度 = 100%。宽度可以按照你自己的需求调整。

把背景颜色设置为全透明,这样就完成了初步设定,具体的间距什么的我们随后再调整。

第二步:添加 KWGT 小部件
这里我们需要添加两个空白的小部件,大小随意选择,我选择 1 x 1 的作为演示。

添加完成后别着急点开进入 KWGT 页面,我们还需要做点微小的设置。
进入全局负一屏的编辑模式,长按小部件,选择内边距,将值都设为0,两个都要进行相同的操作。

我想将第一个小部件做成横向排列的三个方块,进入全局负一屏的编辑模式,设置自己满意的高度。

第三步:构建预设的框架
设置完成后,退出编辑模式,依次点击一下刚刚添加的两个小部件。目的是为了让KWGT能显示他们的大小,如果不点击的话KWGT显示的 Size 是 0x0。

注:在全局负一屏的编辑模式里重新设定小部件的大小后,也需要这样点击一次小部件。否则显示的 Size 仍是调整之前的。
现在进入KWGT主界面,我们刚刚添加的两个小部件就出现了。

下面我们要根据 Size 计算预设的大小。首先需要明确的是,现在 KWGT 显示的 Size 为 972 x 412,即负一屏中小部件的大小,我们设置的负一屏的宽度为 90%。当负一屏大宽度设置为100%时,预设设置宽度为 720 就可以填满负一屏的宽度。现在我这里设置的是90%,所以能填满负一屏的预设的宽度就为 720 / 90% = 648。用 Size 的宽度除以 648 就可以得到缩放比例,这里就是 972 / 648 = 1.5。所以可以填满负一屏的预设的高度就为 412 / 1.5 ~ 274.6。
注:不同的设备缩放比例不一样,所以请务必自己计算一下。
点击第一个小部件,点击右上角的新建按钮,进入空白的编辑区域。

点击右上角的加号选择形状来添加一个形状,设置为矩形。宽度和高度设置为我们刚才得到的预设大小,这里我的是 648 x 274.6。
注:图片填错了,不要在意

我们要设置的是横向排列的三个正方形,如果设置间隔为 15 的话每个正方形的宽度 = 648 / 3 - 15 x 2 = 206,而预设的高度为274.6,明显不合适,所以我们要对小部件的高度进行调整。
回到负一屏的编辑模式,因为我们刚才计算得到的缩放比例为 1.5,所以如果预设到高度为 206 的话小部件的高度就为 206 x 1.5 = 309。


设置完成后是这样的,宽度也变小了???

没事,我们只需退出编辑模式,再点击一下小部件就好了。

补充一下,因为我们希望圆角是由 KWGT 预设设置的,所以最好把全局负一屏的卡片圆角设为0。

填入内容
构建好框架之后,我们再去实现横向排列就方便多了。明确一下,我们的目的是实现三个正方形的横向排列。而由我们刚刚的计算可以得到的信息是,正方形的宽高为206,间隔为15。
第一步:排列方块
将我们刚才放入的矩形删除。

这里排列方块为横向有两种方式,一种是使用堆叠组,一种是使用重叠组。
堆叠组是自动根据一个组件的大小自动排列的,不用设置位置信息,只需设置排列方式和位置锚即可。这种排列方式的缺点在于,如果内容的大小过大的话,就会把间隔撑开。如下图:
重叠组需要我们手动设置固定的位置信息,因为位置是固定的,所以不会出现因为内容过大而间隔被撑开的情况。
下面我使用堆叠组排列来做演示。
新建一个堆叠组。

在堆叠组里添加一个重叠组。并在重叠组里添加一个正方形,宽度设置为刚刚我们得到的宽度,并设置圆角为 20 增强观感。

复制两次重叠组,得到三个。可以发现,复制完成后明明项目里显示的是三个正方形,而我们只看到了一个正方形!因为我们还没有对堆叠组进行设置呢。

将层设置为水平顶部,就可以看到正方形啦。

将第二个重叠组的左右边距都设为 15 ,锵锵~,三个正方形横向排列就做好了。

添加完两行之后再去全局负一屏的设置里设置一下卡片间距,使横向间距和纵向间距相同。


第二步:设计内容
排列好方块之后就可以自行对内容进行设计啦,下面我将简单展示一下把一个方块做成一个快捷按钮。在第一个重叠组里添加一个图标,并设置颜色为黑色,微调图标使其居中,锵锵~,一个问号快捷按钮就做好啦。

这部分我就不展开讲了,因为我不是很拿手。
最后
除了方块之外还可以自己创建长方形啥的,只需计算好好尺寸和间距,设置好堆叠方式就好了。我在这里就不演示了,相信大家都是很聪明的。
我把自己做的负一屏放在这里,包括全局负一屏的备份,有需要的拿走就好了。有些功能可能在你的设备上不能用,你自己去搞定吧。00
注:嫌自己做得丑的话也可以自行修改别人的预设,然后再以自己的想法排列哦。
100%:720
90%:648