iOS 18 主屏幕自定义色调适配规则

App开发相关产品技术讨论,包括OEM App、App SDK等话题


Post Reply
涂鸦柒松
Posts: 13

iOS 18主屏幕可以选择自定义色调,以强调色来着色App Icon或Widget。这里分享下如何适配强调色。

如何设置强调色

  • 长按主屏幕空白处,直到画面抖动

  • 点击左上角“编辑”

  • 点击“自定义”

  • 点击“色调”,拖动滑块选择颜色

截屏 2024-12-16 15.50.02.jpeg

适配方法
1、widgetAccentable

Code: Select all

Text("文字").foregroundStyle(.red).widgetAccentable()
  • 当视图控件标记widgetAccentable为true时,系统将该视图及其子视图添加到着色组中,其余的视图在默认组。
    在渲染颜色时,系统会将着色组视图视为模板图像。它会忽略视图原本的颜色,根据视图的 alpha 值叠加自定义颜色来呈现新颜色。默认组渲染颜色时,会忽略视图原本的颜色,根据alpha值叠加白色来显示新颜色。

  • 如果父视图设置widgetAccentable为true,那么子视图设置widgetAccentable为false将不会生效。

企业微信截图_8aca1989-b685-4f2a-b34c-869614948107.png

2、widgetAccentedRenderingMode
Image可以单独设置自定义色调下的渲染模式

  • accented:强调色模式,等同于widgetAccentable设置true。相当于抹掉图片信息,只渲染强调色。

    企业微信截图_17829503-2309-4cdc-b2f8-7962fb18e4c8.png
  • desaturated:不饱和模式,将 Image 的亮度映射到 alpha 通道,用默认值颜色替换颜色通道。相当于加了黑白滤镜。

    企业微信截图_c038b73e-2545-4e66-bc2e-263e8bf50cc0.png
  • accentedDesaturated:强调色不饱和模式,将 Image 的亮度映射到 alpha 通道,用着色组颜色替换颜色通道。相当于加了强调色滤镜。

    企业微信截图_af3316eb-cc9c-4625-a30f-2d0c29a1c0c1.png
  • fullColor:全彩模式,保留图片原本的纹理。

    企业微信截图_844ffba6-3795-4f03-a1c4-6ceb39370cf3.png

通常图片选择accentedDesaturated、fullColor模式就够了。如果图片有比较丰富的信息,设置为fullColor;其余的设置accentedDesaturated。

3、renderingMode
Image设置renderingMode为template,针对PNG图片用强调色替换颜色通道,alpha通道保留。等同于tintColor。

企业微信截图_b22d0333-b200-419e-948c-621051e3a432.png

Tags:
Post Reply