面试题：Swift跨平台开发中的UI适配策略

Question

描述一下在Swift进行跨平台开发时，针对iOS、macOS、watchOS和tvOS不同平台的UI设计准则和适配要点。如何利用Swift的特性（如协议、扩展）来优化跨平台UI代码的复用性？

Answer 1

不同平台的 UI 设计准则和适配要点

1. iOS
   • 设计准则：
     • 强调简洁、直观的用户界面，以触摸交互为主。采用卡片式布局、大字体和清晰的图标，便于用户操作。遵循苹果的人机交互指南，如提供清晰的导航、及时的反馈等。
     • 注重内容展示，内容优先于装饰，让用户能够快速获取信息。使用动态字体，以适应不同用户的视力需求。
   • 适配要点：
     • 支持多种屏幕尺寸和分辨率，从 iPhone SE 到 iPhone Pro Max 等不同尺寸设备。使用 Auto Layout 和 Size Classes 进行布局自适应，确保在各种设备上 UI 元素都能正确显示。
     • 考虑不同的设备方向（竖屏、横屏），UI 应能流畅切换并合理布局。利用 Safe Area 来避免内容被状态栏、导航栏或底部工具栏遮挡。
2. macOS
   • 设计准则：
     • 强调简洁、高效的工作流程，注重窗口管理和多任务处理。使用菜单栏和工具栏提供常用操作入口，注重信息的组织和分类。
     • 遵循 macOS 的设计语言，如使用系统字体、颜色和图标风格，与系统应用保持一致性。
   • 适配要点：
     • 不同的 Mac 电脑屏幕尺寸和分辨率差异较大，要确保 UI 在不同显示器上的可读性和可用性。使用 Auto Layout 和 Stack Views 来实现灵活的布局。
     • 支持多种窗口状态，如全屏、分屏等，UI 应能在这些状态下正常工作。注意与系统菜单栏和 Dock 的交互，避免冲突。
3. watchOS
   • 设计准则：
     • 由于屏幕空间有限，设计要简洁明了，突出关键信息。采用 glanceable UI，用户能快速查看和操作。使用大按钮和简单的导航结构，便于在小屏幕上操作。
     • 注重与手腕交互，如支持抬腕亮屏、轻触、按压等操作方式，设计与之相适应的交互反馈。
   • 适配要点：
     • 适配不同尺寸的 Apple Watch 屏幕，使用 Group 和 Layout 来优化布局。考虑电池续航，避免复杂的动画和过度的图形渲染。
     • 利用 WatchKit 的特性，如 Glances 提供快速信息查看，Complications 在表盘上展示重要数据。
4. tvOS
   • 设计准则：
     • 强调沉浸式体验，以大屏幕展示内容为主。使用大字体、高对比度的颜色和清晰的图标，便于远距离观看。注重内容的视觉层次，引导用户聚焦重要信息。
     • 以遥控器为主要交互方式，设计简单直观的导航和操作流程，避免过多的复杂手势。
   • 适配要点：
     • 适配不同尺寸的电视屏幕，使用 Auto Layout 和 Size Classes 进行布局调整。注意色彩和对比度在电视屏幕上的显示效果，确保内容清晰可见。
     • 利用焦点引擎来突出当前可操作的元素，为用户提供明确的视觉反馈。

利用 Swift 特性优化跨平台 UI 代码复用性

1. 协议（Protocol）
   • 定义通用 UI 行为：
     • 创建协议来定义跨平台共有的 UI 行为，例如一个 ButtonProtocol 可以定义按钮的基本属性和点击行为。

     protocol ButtonProtocol {
         var title: String { get set }
         func handleTap()
     }
     

     • 然后在 iOS、macOS、watchOS 和 tvOS 各自的按钮类中遵循该协议。

     // iOS 按钮类
     class iOSButton: UIButton, ButtonProtocol {
         var title: String {
             get { return self.title(for:.normal)?? "" }
             set { self.setTitle(newValue, for:.normal) }
         }
         func handleTap() {
             // 处理点击逻辑
         }
     }
     // macOS 按钮类
     class MacOSButton: NSButton, ButtonProtocol {
         var title: String {
             get { return self.title }
             set { self.title = newValue }
         }
         func handleTap() {
             // 处理点击逻辑
         }
     }
     

   • 实现通用交互逻辑：通过协议扩展可以为遵循协议的类型提供默认实现。例如，为 ButtonProtocol 提供一个默认的点击音效逻辑。

     extension ButtonProtocol {
         func playTapSound() {
             // 通用的音效播放逻辑，如使用系统音效库
         }
         func handleTap() {
             playTapSound()
             // 其他通用点击逻辑
         }
     }
     

2. 扩展（Extension）
   • 复用视图相关功能：为不同平台的视图类添加扩展来复用功能。例如，为 UIView（iOS）和 NSView（macOS）添加一个扩展来设置视图的圆角。

     // iOS 扩展
     extension UIView {
         func setCornerRadius(_ radius: CGFloat) {
             self.layer.cornerRadius = radius
             self.layer.masksToBounds = true
         }
     }
     // macOS 扩展
     extension NSView {
         func setCornerRadius(_ radius: CGFloat) {
             self.wantsLayer = true
             self.layer?.cornerRadius = radius
             self.layer?.masksToBounds = true
         }
     }
     

   • 基于协议的扩展复用：结合协议和扩展，为遵循特定协议的不同平台视图提供统一的功能扩展。例如，为遵循 ButtonProtocol 的按钮添加一个统一的样式设置扩展。

     extension ButtonProtocol where Self: UIView {
         func setCommonButtonStyle() {
             self.backgroundColor =.systemBlue
             self.setTitleColor(.white, for:.normal)
             self.setCornerRadius(8)
         }
     }
     

这样，在不同平台的代码中，只要按钮类遵循 ButtonProtocol，就可以直接调用 setCommonButtonStyle 方法来设置统一的样式，提高了代码的复用性。