我是如何使用全局负一屏的?
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%。宽度可以按照你自己的需求调整。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F78538d3d-9a41-4ec8-a1fa-c13f30aada55%2FUntitled.png%3Fid%3D83e6b317-9d77-4898-bf49-06637e9e1a5c%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DDkfXXe1sSHBc7oJeXNaUCntUWCmyoUC2D5EBzUZNpUw?table=block&id=83e6b317-9d77-4898-bf49-06637e9e1a5c&cache=v2)
把背景颜色设置为全透明,这样就完成了初步设定,具体的间距什么的我们随后再调整。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F41e58a67-39f3-4dbd-b1d4-fa78c126bfcd%2FUntitled.png%3Fid%3D63068a3d-f689-4661-aec9-93b219b3f221%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DVjfaSioW5g7EIpnZGh4RnwEF8oG8BzD4fy0RT9TLpow?table=block&id=63068a3d-f689-4661-aec9-93b219b3f221&cache=v2)
第二步:添加 KWGT 小部件
这里我们需要添加两个空白的小部件,大小随意选择,我选择 1 x 1 的作为演示。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F241e2f44-e1d8-476d-8f73-a1d77e3578d7%2FUntitled.png%3Fid%3D48668b28-87a3-419c-8e12-5f8c67183538%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DwfKaPjPQOibe1mhR4_AKPwlQPJJbi_1YoNaWdQmXQnw?table=block&id=48668b28-87a3-419c-8e12-5f8c67183538&cache=v2)
添加完成后别着急点开进入 KWGT 页面,我们还需要做点微小的设置。
进入全局负一屏的编辑模式,长按小部件,选择内边距,将值都设为0,两个都要进行相同的操作。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F90f98ce7-d190-4bc6-b2fc-208f6917a1e1%2FUntitled.png%3Fid%3D9a6e8cff-d23f-4608-934b-3f8c1c0dfc83%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3D0Zwluq-MstjSw7SYbmd7jw0gcsZGJuFdDGcfNPeLvxg?table=block&id=9a6e8cff-d23f-4608-934b-3f8c1c0dfc83&cache=v2)
我想将第一个小部件做成横向排列的三个方块,进入全局负一屏的编辑模式,设置自己满意的高度。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F77a43661-6135-4873-a01a-66d723875d83%2FUntitled.png%3Fid%3D432af2c0-ae03-4335-81d6-f6c2fa5fe8f5%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3D941M7CDNWsyu2EwgifiDnmFFsgTXdHFrer4qiAVrPhU?table=block&id=432af2c0-ae03-4335-81d6-f6c2fa5fe8f5&cache=v2)
第三步:构建预设的框架
设置完成后,退出编辑模式,依次点击一下刚刚添加的两个小部件。目的是为了让KWGT能显示他们的大小,如果不点击的话KWGT显示的 Size 是 0x0。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F46e529ee-790a-484e-a674-e1bd512b407b%2FUntitled.png%3Fid%3Dcdcf33eb-df9a-465d-b6c6-92db93f9dbdc%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DYBRmsg6982gJX603lfbPHxzs-PQlOsRD84fARyxZl7A?table=block&id=cdcf33eb-df9a-465d-b6c6-92db93f9dbdc&cache=v2)
注:在全局负一屏的编辑模式里重新设定小部件的大小后,也需要这样点击一次小部件。否则显示的 Size 仍是调整之前的。
现在进入KWGT主界面,我们刚刚添加的两个小部件就出现了。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Fdef141e4-b5af-4104-8e8f-72e60a529819%2FScreenshot_Kustom_Widget_20200301-134950.png%3Fid%3D91e56c32-20f0-4d50-8a4e-330851192662%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DXFfGOiPPeu2SHM9U7zbaZPT8ktZuU6tlg0mCDUj0l5Q?table=block&id=91e56c32-20f0-4d50-8a4e-330851192662&cache=v2)
下面我们要根据 Size 计算预设的大小。首先需要明确的是,现在 KWGT 显示的 Size 为 972 x 412,即负一屏中小部件的大小,我们设置的负一屏的宽度为 90%。当负一屏大宽度设置为100%时,预设设置宽度为 720 就可以填满负一屏的宽度。现在我这里设置的是90%,所以能填满负一屏的预设的宽度就为 720 / 90% = 648。用 Size 的宽度除以 648 就可以得到缩放比例,这里就是 972 / 648 = 1.5。所以可以填满负一屏的预设的高度就为 412 / 1.5 ~ 274.6。
注:不同的设备缩放比例不一样,所以请务必自己计算一下。
点击第一个小部件,点击右上角的新建按钮,进入空白的编辑区域。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Ffdb7a0b0-4fb0-452f-a486-a70dc2d3a7a2%2FUntitled.png%3Fid%3D7eea898a-cf02-496f-b736-da7817047d7c%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DJiCCpGjmeTYbikc9bVab4MwsxGs6Vd609YWp8CXNE3Q?table=block&id=7eea898a-cf02-496f-b736-da7817047d7c&cache=v2)
点击右上角的加号选择形状来添加一个形状,设置为矩形。宽度和高度设置为我们刚才得到的预设大小,这里我的是 648 x 274.6。
注:图片填错了,不要在意
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Fcd6b8ea1-1b1b-4445-9164-2a7c4908b3c7%2FUntitled.png%3Fid%3Dd3c54996-90de-40da-8fd4-15068a238df9%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DevmVwQEsFAroOO-L9CtQa9VxaSZM348GQKG3e7OoH20?table=block&id=d3c54996-90de-40da-8fd4-15068a238df9&cache=v2)
我们要设置的是横向排列的三个正方形,如果设置间隔为 15 的话每个正方形的宽度 = 648 / 3 - 15 x 2 = 206,而预设的高度为274.6,明显不合适,所以我们要对小部件的高度进行调整。
回到负一屏的编辑模式,因为我们刚才计算得到的缩放比例为 1.5,所以如果预设到高度为 206 的话小部件的高度就为 206 x 1.5 = 309。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Ff206d276-7a69-4ed9-ab69-fcb84b4db581%2FUntitled.png%3Fid%3D0a7e062b-9701-48c9-bb05-0f91f0595f68%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DQ96SEPu6kIY53Kugo43TVTRBlwzmCIT2HjD7vsMoULM?table=block&id=0a7e062b-9701-48c9-bb05-0f91f0595f68&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Fe8d33405-6200-4117-b60b-9f28515c2119%2FUntitled.png%3Fid%3D00e7791e-6609-414a-9e70-2d25d04283d7%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DMvUKnjNUxjY3str2nZTJ9P3yO4s-YTXXgceQ0sM1JKI?table=block&id=00e7791e-6609-414a-9e70-2d25d04283d7&cache=v2)
设置完成后是这样的,宽度也变小了???
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Fb8d9e694-80d4-4c17-ac67-545483ef1ff0%2FUntitled.png%3Fid%3Df0e14b27-dcf6-4c7c-bafd-fe43f1c0dfa9%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3D0xri_tNoPwNsXv1-wT4U7xPMuFl-zOENcgURxyUeJys?table=block&id=f0e14b27-dcf6-4c7c-bafd-fe43f1c0dfa9&cache=v2)
没事,我们只需退出编辑模式,再点击一下小部件就好了。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Fd66c7a3c-c3a6-4859-a01b-5282655c9af3%2FUntitled.png%3Fid%3D2d02965c-f959-4370-b02b-be44cc7a0db1%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DF7EoO5-r4YNXG3xVdzlYDU8zSDzeBjElxV0fH0qG2x8?table=block&id=2d02965c-f959-4370-b02b-be44cc7a0db1&cache=v2)
补充一下,因为我们希望圆角是由 KWGT 预设设置的,所以最好把全局负一屏的卡片圆角设为0。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F425998cf-6b4b-4f05-bc2f-e36d6459110a%2FScreenshot_Lawnchair_20200301-135632.png%3Fid%3Db4e38016-5d09-4fe7-ad1f-cbfdee6edd3f%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DLlT0ZILAeDOBRsvoVTlxnHK8c2dpPcIKPKCqezQvQys?table=block&id=b4e38016-5d09-4fe7-ad1f-cbfdee6edd3f&cache=v2)
填入内容
构建好框架之后,我们再去实现横向排列就方便多了。明确一下,我们的目的是实现三个正方形的横向排列。而由我们刚刚的计算可以得到的信息是,正方形的宽高为206,间隔为15。
第一步:排列方块
将我们刚才放入的矩形删除。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F40e23501-4157-4c68-927d-fcec57874d48%2FScreenshot_Kustom_Widget_20200301-124916.png%3Fid%3D67cb7212-e472-4be2-949a-319740a420e8%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DAOKnD90WAlkibYWH5FQP6wntKNYa13zST1yS3Cf6oCg?table=block&id=67cb7212-e472-4be2-949a-319740a420e8&cache=v2)
这里排列方块为横向有两种方式,一种是使用堆叠组,一种是使用重叠组。
堆叠组是自动根据一个组件的大小自动排列的,不用设置位置信息,只需设置排列方式和位置锚即可。这种排列方式的缺点在于,如果内容的大小过大的话,就会把间隔撑开。如下图:
重叠组需要我们手动设置固定的位置信息,因为位置是固定的,所以不会出现因为内容过大而间隔被撑开的情况。
下面我使用堆叠组排列来做演示。
新建一个堆叠组。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F5f8578b1-51af-47f9-a628-ad1dc38181de%2FScreenshot_Kustom_Widget_20200301-125949.png%3Fid%3D8ef1d705-4358-49d4-ad17-7c54c6db2cb8%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3D1efsxFs3nuI1aUnRKpU5wrqdoSCkS0cIFyklaQ3Az6w?table=block&id=8ef1d705-4358-49d4-ad17-7c54c6db2cb8&cache=v2)
在堆叠组里添加一个重叠组。并在重叠组里添加一个正方形,宽度设置为刚刚我们得到的宽度,并设置圆角为 20 增强观感。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F6fbbfd25-d198-49b4-83da-1c896d4f7335%2FScreenshot_Kustom_Widget_20200301-130115.png%3Fid%3D977524a1-a30e-4ba5-9c90-79470b240fc1%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DFyuDFCWde1jTPiGhLH0phh9dl0tge5bLoYtvL2yI2Ko?table=block&id=977524a1-a30e-4ba5-9c90-79470b240fc1&cache=v2)
复制两次重叠组,得到三个。可以发现,复制完成后明明项目里显示的是三个正方形,而我们只看到了一个正方形!因为我们还没有对堆叠组进行设置呢。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Ff89dac8a-86e6-42a4-92c3-825ab810d11d%2FScreenshot_Kustom_Widget_20200301-131906.png%3Fid%3D1e0f2661-ec91-4bd3-9d8c-4a925480200f%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3D2q7VdICmYElAbNmi_eCuEwTf83jKb9Im1Mh34YJV2Ng?table=block&id=1e0f2661-ec91-4bd3-9d8c-4a925480200f&cache=v2)
将层设置为水平顶部,就可以看到正方形啦。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F0b8a670b-51b1-4272-8dfe-f22b41b7ada0%2FScreenshot_Kustom_Widget_20200301-130908.png%3Fid%3D3fbae708-12e8-4c1a-80b3-1ee52f258670%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DINrp3MuZiMoyNjGa-gLDk51NGUO1TBrhXW49LOSVN4w?table=block&id=3fbae708-12e8-4c1a-80b3-1ee52f258670&cache=v2)
将第二个重叠组的左右边距都设为 15 ,锵锵~,三个正方形横向排列就做好了。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F42175cce-6b0f-47ff-b57e-6c9dba8d1fdf%2FScreenshot_Kustom_Widget_20200301-131024.png%3Fid%3Db1965c93-655e-4420-b554-c386b1484eee%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DsVbLV8Jk1QnkBoo5bMnsVNLdfuqPDSAa1TswhLwMr28?table=block&id=b1965c93-655e-4420-b554-c386b1484eee&cache=v2)
添加完两行之后再去全局负一屏的设置里设置一下卡片间距,使横向间距和纵向间距相同。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F9b259c24-681c-4ea4-b5f9-0a9ce35f75ed%2FScreenshot_Lawnchair_20200301-140331.png%3Fid%3D8733e9cd-80ec-445b-af55-4366a4d9325e%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3D_HWY8VYfjnUfFYjrU4XQzwei_dyvVwwjFElhI5IiybA?table=block&id=8733e9cd-80ec-445b-af55-4366a4d9325e&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2Fb6c7f585-ea17-4434-a878-3bb6b38ae29b%2FScreenshot_Lawnchair_20200301-140555.png%3Fid%3D3c990e89-ea41-4d6e-b5e2-93b5132764ab%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DKjsh3AuaWEQcjb4BEMX6efo7emFxlN5PFFw-JoF7hHA?table=block&id=3c990e89-ea41-4d6e-b5e2-93b5132764ab&cache=v2)
第二步:设计内容
排列好方块之后就可以自行对内容进行设计啦,下面我将简单展示一下把一个方块做成一个快捷按钮。在第一个重叠组里添加一个图标,并设置颜色为黑色,微调图标使其居中,锵锵~,一个问号快捷按钮就做好啦。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F67ceffd6-ba21-4719-b687-4d97ff0ef6c9%2FScreenshot_Kustom_Widget_20200301-132220.png%3Fid%3Db8df6746-dc46-46d6-8054-9d7a82e51139%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DDwHsqSGblqeLG66WIrtzHOPmpXkcWtnXnejamwjJ2Ng?table=block&id=b8df6746-dc46-46d6-8054-9d7a82e51139&cache=v2)
这部分我就不展开讲了,因为我不是很拿手。
最后
除了方块之外还可以自己创建长方形啥的,只需计算好好尺寸和间距,设置好堆叠方式就好了。我在这里就不演示了,相信大家都是很聪明的。
我把自己做的负一屏放在这里,包括全局负一屏的备份,有需要的拿走就好了。有些功能可能在你的设备上不能用,你自己去搞定吧。00
注:嫌自己做得丑的话也可以自行修改别人的预设,然后再以自己的想法排列哦。
100%:720
90%:648