本文主要是介绍【 OpenHarmony 系统应用源码魔改 】-- Launcher 之「桌面布局定制」,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
前言
阅读本篇文章之前,有几个需要说明一下:
- 调试设备:平板,如果你是开发者手机,一样可以加 Log 调试,源码仍然是手机和平板一起分析;
- 文章中的 Log 信息所显示的数值可能跟你的设备不一样,以你调试的数据为准。
- 装个逼:目前好像 OH 社区或者其它开发者还没有针对 OH 的系统应用,比如 Launcher 写过非常深入的源码解析类文章,所以此类文章,仅供大家参考学习,如转载或引用,请标明出处!
- 定制章节会直接定位到修改的地方,如果你不仅想知道怎么改,也想知道为什么这么改,正所谓:知其然知其所以然,探其深方得真谛!
可以看看 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 这篇文章。
定制需求
- 行数:3
- 列数:7
如果你看过 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 这篇文章的话,应该会清除,Launcher 布局的行、列数是算出来的。
算法:
- 列数 = ~~(屏幕宽度 + 图标间距)/ (图标大小 + 图标间距)
- 行数 = ~~(可用高度 + 平均列间距)/ (图标大小 + 平均列间距)
修改代码前,我们先看下默认 Launcher 效果图(平板):
在 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 文章中,我们已经分析过源码,并且加了 Log 展示了很多数据,例如:
let column = ~~((realWidth + minGutter) / (itemSize + minGutter));
我们看下平板的数据:
pid-1360 I @@@ pepsimaxin : 桌面布局边距 ==> margin = 82
pid-1360 I @@@ pepsimaxin : 屏幕宽度 ==> this.mScreenWidth = 1280
com.ohos.launcher D @@@ pepsimaxin : realWidth = 1116, minGutter = 6, itemSize = 96
com.ohos.launcher D @@@ pepsimaxin : column = 11
OK,现在我们希望把列数改成:7列,那么:
- realWidth:我们不会动
- itemSize:图标大小,我们暂时也不动
那么显而易见了,我们只需要修改 minGutter(网格间距)即可!
所以修改成多少呢?-- 这是个基础数学计算问题,不用我教你了。
我们就拿平板为例:
(1116 + 6) / (96 + 6)= 11我们只需要保证:
(1116 + minGutter) / (96 + minGutter) = 7.00 ~ 7.99 之间即可(因为是向下取整)我比较懒,直接让 GPT 给我算了下:
minGutter 的取值范围:[49.9 ~ 74],我们取个整:[50 ~ 74]
现在我们定位到源码里面,看如何修改:
📄 common/src/main/ets/default/viewmodel/LayoutViewModel.tscalculateDesktop(): any {...let itemSize = this.mLauncherLayoutStyleConfig.mAppItemSize;// 网格间距let minGutter = this.mLauncherLayoutStyleConfig.mGridGutter;let column = ~~((realWidth + minGutter) / (itemSize + minGutter));let userWidth = (realWidth + minGutter - (itemSize + minGutter) * column);let gutter = (userWidth / (column - 1)) + minGutter;let row = ~~((realHeight + gutter) / (itemSize + gutter));...}
而 minGutter 从哪读取的,就不用我说了吧?
// Phone
mGridGutter = PhonePresetStyleConstants.DEFAULT_APP_LAYOUT_MIN_GUTTER;
static readonly DEFAULT_APP_LAYOUT_MIN_GUTTER = 5;// Pad
mGridGutter = PadPresetStyleConstants.DEFAULT_APP_LAYOUT_MIN_GUTTER;
static readonly DEFAULT_APP_LAYOUT_MIN_GUTTER = 6;
到这里就有两种改法:
- 要么去对应的 **PresetStyleConstants 里面改 DEFAULT_APP_LAYOUT_MIN_GUTTER 值;
- 要么暴力点,直接改:
let minGutter = [50 ~ 74] 随便取一个值
另外,在 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 文章中我们也讲过,计算出来的 Column 和 Row,都是要传入 this.updateGrid(row, column)
方法,更新网格布局配置的。
所以?你猜我要干什么?更暴力的改法就是:
我不管你怎么算,直接 this.updateGrid(3, 7)
算了,不教你使坏了,我们直接看下修改后的效果:
这篇关于【 OpenHarmony 系统应用源码魔改 】-- Launcher 之「桌面布局定制」的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!