美化 Mac Catalyst App

最新推荐文章于 2024-06-06 09:56:35 发布
最新推荐文章于 2024-06-06 09:56:35 发布
阅读量366 收藏
点赞数
文章标签： 编程语言 ios 移动开发 人工智能 css
原文链接：https://j.youzan.com/-2-ESY
版权

Python实战社群

Java实战社群

长按识别下方二维码，按需求添加

扫码关注添加客服

进Python社群▲

扫码关注添加客服

进Java社群▲

作者：CoderAFI

Sessions: https://developer.apple.com/videos/play/wwdc2020/10056/

前言

随着去年 Mac Catalyst 技术的推出，让 iPad 应用程序跑在 Mac 平台上成为了可能，今年 WWDC 苹果为该技术带来了新升级，代号:  Optimized for Mac.

相较于之前 Scaled to mach the iPad 等比例缩放的方案 这次 Mac 优化使 Mac Catalyst app 在 Mac 平台上能够显示 Mac 原生的视觉风格和控件样式，并且不影响在 iPad 平台上的展示，采用这项技术只需要在 build setting 里进行一个简单的设置项选择即可，由于 Optimized for Mac 只是在启动时生效，所以不会带来任何编译的错误和问题。

回顾

你可以通过观看下面 WWDC 19 的相关 Session 来掌握 Mac Catalyst app 相关技术。

优化了什么？

Optimized for Mac 其实主要就是优化了 Catalyst app 在 Mac 平台上的视觉效果，主要从以下几个方面进行了优化：

尺寸还原

采用 Optimized for Mac 技术后，要显示的内容尺寸将会进行的一比一渲染，而不是等比例缩放，之前为了适配 iPad 平台的上的显示， Catalyast app 上尺寸要进行 77% 比例的缩放，所以在代码里指定 100 pt 像素的尺寸，实际上渲染到屏幕上只有 77 pt 像素，而现在采用 Optimized for Mac 技术后，代码里的 100pt 像素在屏幕上显示就是 100pt；没有了内容尺寸缩放后，其他 Mac 上的界面和控件适配也变的顺理成章。

控件对齐

如果使用了一些像 UIButton、UISlider、UISwitch、 UIActivityIndicator 等基础控件，经过优化后都会渲染成 Mac 系统控件，下图就是展示一个 UIButton 渲染成一个 Mac 系统风格 Button 的样子。

这些控件的样式都会将尺寸大小映射到 Mac 原生系统的控件上，所以要注意可能有些元素展示的大小跟 iPad 展示的会不一样。

字体适配

字体大小也不再按照 iPad 平台的显示进行缩放，而是统一使用官方推荐的 TextSize 字体样式进行 Mac、iPad 平台的适配；比方说官方提供的 Body 字体样式，在 Mac 平台上显示是 13 pt 像素，而在 iPad 上显示的是 17 pt 像素；这样使得文字在不同平台上显示的更加清晰明了；但是如果还是用硬编码的方式指定字体，则不会进行平台自动适配，所以以后还是逐渐向官方的字体样式靠拢。

间距调整

如果采用 AutoLayout 并且使用了系统边距做参照，那么在 Mac 平台上将会采用 Mac 系统的间距来进行布局计算，而且要注意的是 Mac 上的系统间距通常要比 iOS 要大一些。

总结

以上便是 Optimzed for Mac 这项技术带来的几项重要功能，结合下图方便理解和记忆。

Optimzed VS Scaled 技术选型

在制作 Catalyst app 时，能同时采用 Scaled to match the iPad、Optimized for Mac 两种方案嘛？答案是否定的，这两种技术方案只能选择其中一种进行适配，不可共用。

那如何进行技术选型便成了一个难题，下面给出了两者的优劣点，方便你进行比较参考：

  • Scaled to match the iPad

    • 能够快速的将 iPad app 转换为 Mac app

    • 采用 iPad 展示效果来对  Mac 进行友好的兼容

    • 布局方式比较局限

  • Optimized for Mac

    • 可能将来会替代 Scaled 方案

    • 尽量匹配到 Mac 上的展示效果

    • 可以分平台自定义布局效果

结合下图，方便理解：

案例场景分析

接下来分析一些适合采用 Optimized for Mac 技术的场景，提供参考。

有很多文本

当 Catalyst app 需要有很多文本展示的情况，采用 Optimized for Mac 技术就非常合适，文本在 Mac 上的展示将会非常清晰明了，因为不再使用缩放尺寸的文字大小而是使用真实的文字大小。Swift Playgrounds 在 macOS Bigsur 系统上采用了 Opitimized for Mac 来完成 Catalyst app 的适配。你可以去下载下来看下实际的效果。

强调图形界面

采用 SceneKit 或者 Metal 技术的 Catalyst app，使用 Optimized for Mac 技术后，在 Mac 平台上体验将会有很明显的提升，同样 Swift Playgrounds 采用了 SceneKit 来完成游戏界面部分，转换到 Optimized for Mac 之后，帧率和耗电量都有了明显改善。

高标准自定义图像

采用 Optimized for Mac 技术，在 Mac 平台上渲染出来的图像更加清晰，可以通过下图来对比两种方案展示出的图片清晰度。

有很多控件视图

像下面的地图展示，利用 Optimized for Mac 优化后，可以清晰的展示道路详细信息以及展示一些在 Mac 平台上特有的地图操作控件

视觉对比

下面是同一个馅饼信息视图在采用不同方案展示出的效果：

中间没有适配好的布局说明了采用  Optimized for Mac 技术之后，还是需要开发者根据各平台的需要进行一下布局和内容尺寸的设置，已达到专门为 Mac  平台进行界面展示适配的目的，下图是要考虑的适配尺寸：

自定义控件适配

采用 Optimized for Mac 技术后，iPad 上 UIButton 设置的手势识别将不起作用了，解决这个问题有几种方式：

  • 不要把 iPad 的交互方式带到 Mac 平台

  • 在 Mac 平台上尽量采用 Menu bar 和 Menu item 的组合，来处理各种手势和按钮操作

在 Catalyst app 中使用自定义控件时，请一定要确认自定义控件的事件处理机制。

注意平台差异性

这里需要注意的是，当用 UIKit 进行一些系统控件的自定义设置后，用 Catalyst 转换到 Mac 平台上可能只会显示系统控件的样式，就像下图的 Slider 控件，在 IPad 上能够显示白色的 minimum trackTintColor 和 蓝色的 maximum trackTintColor，中间的进度指示器也变成了一个小飞机，但是在 Mac 平台上只能显示成系统的样子。

Demo 演示 Optimized for Mac

下面通过一个 Demo 来演示，如何将 Scaled 模式的 Catalyst app 转换为 Optimized for Mac 模式的 Catalyst app。

<<< 左右滑动见更多 >>>

上图的示例原本是一个在 iPad 上运行的 Cookbook 应用程序，左边是基本的操作按钮，中间是 Recipes 列表，右边是 Recipse 详情信息，点击  New Recipe，会有一个弹窗来创建新的 Recipe。

这个 Catalyst app 目前在 Mac 上虽然能够比较好的运行，但是也能看出一些不舒服的地方，比如仍然采用 iOS 风格的按钮和导航栏，下面看下如何在 Xcode 中进行适配。

工程配置

首页要做的就是在 Build Setting 中 Scaled Interface to Match IPad 模式切换为 Optimized Interface for Mac 模式，如下图：

切换模式后，Catalyst app 会让 UIKit 在 Mac 平台上渲染成 Mac 的视觉效果，直接编译运行后，效果对比图如下：

从上图可以看出如下改变：

  • 窗口变大了，窗口内的内容显示也变大了，这是由于 Optimized for Mac 不再对内容进行缩放，而是一比一还原

  • Timer button 显示成 Mac 平台系统的按钮样式

  • 控件布局也按照 Mac 平台的标准进行展示

Mac 独享配置

当然，如果你觉得有些尺寸和内容显示，想要单独为 Mac 定制，也是可以的：

可以通过代码区分平台进行自定义尺寸
通过 Asset Catalog 分平台自定义 Icon

适配后最终适配效果如下图：

适配 New Recipe 弹框

上面提到， New Recipe 有些明显问题，从下图中可以看出：

  • iOS 风格的 NavigationBar 要移除，采用 Mac 上比较常用的 Toolbar 来展示界面跳转交互

  • 还有一个界面显示 bug, Title Label 比其他两个 Label 还大？

下面让我们来适配：

  • 首先可以用 userInterfaceIdiom 来区分平台，进行部分代码的隔离：

if traitCollection.userInterfaceIdiom == .mac {
    navigationController?.setNavigationBarHidden(true, animated: false)
}

  • 在 Storyboard 适配时，可以将 idiom 选择为 Mac 进行适配预览：

解决 Title Label 字体过大的问题，我们需要将字体的大小从硬编码设置，改为采用官方提供的 TextStyle.Body 的字体样式，如下图：

<<< 左右滑动见更多 >>>

接下来通过 Variation 属性为 Mac  平台单独添加 Toolbar，如下图：

最后为新加的 Toolbar 设置 AutoLayout 属性布局，如下图：

这样就为 Mac 和 iPad 平台分别做好了 New Recipe 弹窗的适配，运行效果如下图：

运行后，以下几个问题都修复好了：

  • Title Label 字体适配好了

  • 顶部的 Navigation Bar 没有了

  • 底部添加了 Mac 平台的系统的 Toolbar

最终还是推荐大家在开发  Mac Catalyst app 之前，详细阅读 Mac human-interface-guidelines[1]，能提前做好很多适配的工作。

SwiftUI Mac 优化

众所周知， SwiftUI 只是一套界面显示的 DSL，没有系统兼容性的负担，所以从 SwiftUI 诞生，就担负起苹果跨平台开发的重任，这次专门针对 Mac 平台的优化也是理所当然：

  • 跟 UIKit 采用一样的控件、文本、间距样式

  • 可以识别所属平台进行分别适配显示

  • 布局是根据容器来控制，这样就可以快速构建很多跨端复用的组件

为 Mac 优化的 SwiftUI 控件

这次还给出了很多专门为 Mac 优化的控件，都做到了不同平台不同显示，而且是同一套代码。

GroupBox
Toggle
Button
DatePicker
Picker
自定义按钮

原来的 Catalyst  app 方式，如果想自定义一些界面而且做到不同平台展示一致，基本是要按照平台分别来实现， 现在用 SwiftUI，一套代码就搞定多个平台，而且交互和显示还一致。

SwiftUI 版 Cookbook app 效果

下图就是 Cookbook Catalyst app 采用 SwiftUI 重写后，在 iPad 和 Mac 平台上运行效果，可见基本都是按照各平台的交互和风格进行显示的，而且代码没有做任何更改。

<<< 左右滑动见更多 >>>

总结

本文主要讲解了 Optimized for Mac 技术为 Catalyst app 带来的更加 Mac 原生化的体验以及适配过程中的一些注意事项；一路走来，回顾苹果给我们提供的 UI 框架，罗列起来有 AppKit、UIKit、UIKit+Catalyst、SwiftUI，那在创建工程的如何选择配置呢？笔者在这里给出一张图，方便大家参考：

参考资料

[1]

Mac human-interface-guidelines: https://developer.apple.com/design/human-interface-guidelines/macos/

程序员专栏 扫码关注填加客服 长按识别下方二维码进群

近期精彩内容推荐：  

 朋友入职中软一个月（外包华为）就离职了！

 再见，胡阿姨！再见，共享单车！

 一代经典销声匿迹：WinXP彻底再见了！

 2021年1月编程语言排行榜

在看点这里好文分享给更多人↓↓

iOS_开发
关注
MAC系统下的终端的`简单`美化
Elias_Liu的博客
02-26 1306
MAC系统下的终端的简单美化 mac系列的电脑，都是使用的apple家的macOS操作系统，这是一款类unix操作系统，这就意味这在这个系统下很多的操作都是和linux一摸一样，其终端的重要性，不必多说。 但默认终端，虽不能说丑，但实在评不上好看。并且因为背景一个颜色，全部字体一个颜色，只有2种颜色的情况下，终端上的字一多，就十分伤眼睛和考验耐性。欲先善其事，必先利其器。配置一款好看，好用的终...
iOS Mac Catalyst坑点
GY5338的博客
05-18 1883
现有项目适配Mac CatalystBuilding for Mac Catalyst is not supported by the legacy build system.No such module ' swift 相关的一些库'OpenGLES is deprecated and is not available when building for Mac Catalyst.Pods/WechatOpenSDK/OpenSDK1.8.7.1/libWeChatSDK.a(WechatAuthSDK.
Mac Catalyst
BLOG域名:programb.blog.csdn.net
05-13 570
When you use Mac Catalyst to create a Mac version of your iPad app, you make your app available to a new audience while giving existing users the opportunity to enjoy it in a new environment. Image of a MacBook Pro and an iPad Pro, both running the Ocean J
iOS Mac Catalyst 适配mac之APP 名称本地化
GY5338的博客
08-20 555
1、 Mac Catalyst 菜单栏名称 要实现菜单栏 App 名称本地化需要在上面添加的三个文件中添加 CFBundleName 字符串。 // InfoPlist.strings (English) 文件中添加以下代码： CFBundleName = "International Demo"; // InfoPlist.strings (Chinese(Simplified)) 文件中添加以下代码： CFBundleName = "国际化演示"; 2、 Mac Catalyst Dock 栏和 Fi
IOS Catalyst Mac设置键盘响应事件
weixin_39274556的博客
05-05 359
IOS Catalyst Mac设置键盘响应事件
BC-App---Extended-products:Business Catalyst App-3个额外的产品自定义字段
05-06
BC-App-扩展产品 如果3个标准自定义字段不够用。 正在安装 1.安装webapp（后端） 存储库内容转到：_System \ apps \ ue-chris-Extended-Products \ 在/_assets/js/app.js文件中>方法：getXMLCataloguesList（）...
Praeclarum.MacCatalyst：通过添加此nuget，将Xamarin.iOS应用程序转换为Mac Catalyst应用程序
02-06
Praeclarum.MacCatalyst [ ] Frank A. Krueger对Xamarin.iOS的Mac Catalyst支持。 我非常高兴提供此工具，它将您的iOS应用程序转换为Mac Catalyst应用程序。 它仍然是一个早期版本，有些功能可能无法使用，但是我...
Build-OpenSSL-cURL:用于为MacOS，iOS和tvOS设备（x86_64，armv7，armv7s，arm64，arm64e）构建OpenSSL，HTTP2（nghttp2）和cURL（libcurl）的脚本。 现在支持Apple Silicon，带有TLS 1.3的OpenSSL 1.1.1和Mac Catalyst构建
04-30
该脚本为MacOS（x86_64，arm64），Mac Catalyst（x86_64，arm64），iOS（armv7，armv7s，arm64和arm64e），iOS模拟器（x86_64，arm64），tvOS（arm64）和OpenSSL，nghttp2和cURL / libcurl构建tvOS模拟器（x86_64）...
maccatalyst
01-02
Mac Catalyst是一种开发工具，它可以将iOS应用程序转换为Mac应用程序。使用Mac Catalyst，开发人员可以在Mac上运行他们的iOS应用程序，而无需进行大量的代码更改。然而，需要注意的是，使用Mac Catalyst构建的Mac...
Flutter 关于Mac Catalyst的支持情况
Notzuonotdied的博客
03-24 581
前言 最近想要了解下Flutter是否支持苹果的Mac Catalyst，在苹果的官网可以看到关于Mac Catalyst的一些介绍：Create a version of your iPad app that users can run on a Mac device.。显而易见，这是苹果推出的打通Macos和iPad生态的一个项目。那么，具有跨端一致性的Flutter是否支持呢？ 情况 想到这...
Catalyst-Helpers：使用这些AppKit帮助器解锁缺少的UIKit功能
02-04
Catalyst-Helpers：使用这些AppKit帮助器解锁缺少的UIKit功能
IOS Catalyst 相关的一些API
weixin_39274556的博客
05-05 1013
IOS Catalyst 相关的一些API
Mac终端界面美化详细记录
qianxiao_anran的博客
05-18 1324
当前Mac默认使用的shell就是zsh。
Mac Catalyst 初步体验+排坑
CrazyApp的博客
10-22 4173
Mac Catalyst 是苹果在今年WWDC上发布的一个帮助开发者将iPad 应用移植到macOS上的服务。苹果在发布会上说这将会是一个“一键式的操作”，“只需要稍加优化就可以完美在mac上运行”。于是，我在macOS正式发布之后的第一天，便迫不及待地尝试了一番。 部署过程非常轻松愉快。只要在新版Xcode中的Target选单中勾选Mac，就可以创造出一个在Mac上完美运行的App。 如果真有这么简单就好了Orz。 事实情况是，在我勾选这一选项之后，Xcode就立马报了几十个错误(...)。经过
MediaMate for Mac v3.3.0 刘海屏灵动岛特效美化工具 激活版
JKorea的博客
05-31 612
MediaMate是一款应用于Mac刘海屏美化工具，可以让你的Mac刘海屏位置实现灵动岛特效，它的设计目标是为音量、显示和键盘亮度HUD带来全新的视觉效果，并引入了全新的「正在播放」HUD功能。
catalyst 4000 ios 恢复
weixin_33877092的博客
04-21 86
最进给公司做备件，搞到了一台catalyst 4003交换机，不小心吧ios搞掉了，搞了半天终于吧它搞懂了ios传上去了，给大家分享分享！！！ 第一步：ROMMON>set interface fa1 192.168.1.2 255.255.255.0 *<O‑2)N #笔记本也配这个网段的地址，然后PING一下，是否能通； hGY m ...
探索Mac Catalyst的无限可能：Catalyst Controls Gallery项目推荐
最新发布
gitblog_00084的博客
06-06 577
探索Mac Catalyst的无限可能：Catalyst Controls Gallery项目推荐 项目地址:https://gitcode.com/steventroughtonsmith/CatalystControlsGallery 在当今快速迭代的技术世界中，跨平台开发成为了连接不同设备生态的关键桥梁。对于那些致力于在macOS和iOS/iPadOS之间搭建无缝体验的开发者来说，一个名为C...
使用 Sparkle 为 Mac Catalyst 应用程序配置应用程序更新,让我们在 App Store 之外发布应用程序
iCloudEnd的博客
02-01 419
Sparkle 是一个开源框架，用于在不通过 App Store 分发时将应用程序更新集成到您的 Mac 应用程序。它非常灵活，允许您以简单的方式将自动更新推送到您的应用程序。您可能已经在您使用的许多应用程序中看到过 Sparkle——例如，它用于Docker、Arc、Hex Fiend、Rectangle和无数其他应用程序。Sparkle 的主要特点之一是易于实施。在常规的 Cocoa 应用程序中，您无需一行代码即可支持应用程序更新。
sql catalyst_如何从Mac Catalyst Apps访问AppKit API
weixin_26737625的博客
09-10 341
sql catalystOnly a small part of AppKit API is available to Mac Catalyst, but since Mac Catalyst apps are also macOS apps, they do have full access to AppKit API in runtime. It’s just not visible to t...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值