swift - 带有许多 subview 的 VoiceOver 在屏幕上非常滞后/缓慢

Question

我正在为名为 Swordy Quest 的 iOS 游戏构建完全可访问性:
https://apps.apple.com/us/app/swordy-quest-an-rpg-adventure/id1446641513
正如您从上面链接的屏幕截图中看到的，我创建了一张 map ，其中包含 50x50 个单独的 UIView，每个 UIView 上都有一个 UIButton，所有这些都位于 UIScrollView 上。关闭 VoiceOver 后，整个应用程序(包括 map 部分)都可以正常工作 - 尽管 map 加载有时会有点慢。当我打开 VoiceOver 时，整个应用程序响应良好，除了 map 部分，它变得非常滞后 - 在我的 iPhone 7 上几乎无法播放(比如用旧手机测试最糟糕的用户体验)。
如果打开 VoiceOver，我曾尝试删除图像细节，但这根本没有区别。这让我认为滞后是由于 50 x 50 UIViews 所有这些都添加了可访问性标签。如果单个 UIViewController 上有太多可访问的标签，VoiceOver 是否会开始严重滞后？
有谁知道一种巧妙的方法来解决这个问题？我想知道是否有一种聪明的方法可以关闭 AccessibilityLabels，除非 UIView/UIButton 位于 UIScrollView 的可见部分？

Answer 1

您不应一次实例化和渲染 2500 个 View 。
现代设备可以很好地处理它，但它仍然会影响性能和内存使用，应该避免。
支持 VoiceOver 只是表面上这种不好的做法。
此处使用的正确工具是 UICollectionView。只有可见 View 才会加载到内存中，这显着限制了性能影响。
您可以轻松实现任何类型的自定义布局，包括您需要的 x/y 可滚动瓷砖 map 。
请参阅以下最小实现以帮助您入门。您可以将代码复制到新创建的 Xcode 项目的 AppDelegate.swift 文件中，以根据您的需要进行调整。

// 1. create new Xcode project
// 2. delete all swift files except AppDelegate
// 3. delete storyboard
// 4. delete references to storyboard and scene from info.plist
// 5. copy the following code to AppDelegate

import UIKit


// boilerplate
@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        self.window = UIWindow(frame: UIScreen.main.bounds)
        let layout = MapLayout(columnCount: 50, itemSize: 50)!
        self.window?.rootViewController = ViewController(collectionViewLayout: layout)
        self.window?.makeKeyAndVisible()
        return true
    }
}

class MapLayout: UICollectionViewLayout {
    
    let columnCount: Int
    let itemSize: CGFloat
    var layoutAttributesCache = Dictionary<IndexPath, UICollectionViewLayoutAttributes>()

    init?(columnCount: Int, itemSize: CGFloat) {
        guard columnCount > 0 else { return nil }
        self.columnCount = columnCount
        self.itemSize = itemSize
        super.init()
    }

    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
    
    override var collectionViewContentSize: CGSize {
        let itemCount = self.collectionView?.numberOfItems(inSection: 0) ?? 0
        let width = CGFloat(min(itemCount, self.columnCount)) * itemSize
        let height = ceil(CGFloat(itemCount / self.columnCount)) * itemSize
        return CGSize(width: width, height: height)
    }

    // the interesting part: here the layout is calculated
    override func prepare() {
        let itemCount = self.collectionView?.numberOfItems(inSection: 0) ?? 0
        for index in 0..<itemCount {

            let xIndex = index % self.columnCount
            let yIndex = Int( Double(index / self.columnCount) )

            let xPos = CGFloat(xIndex) * self.itemSize
            let yPos = CGFloat(yIndex) * self.itemSize

            let cellAttributes = UICollectionViewLayoutAttributes(forCellWith: IndexPath(item: index, section: 0))
            cellAttributes.frame = CGRect(x: xPos, y: yPos, width: self.itemSize, height: self.itemSize)

            self.layoutAttributesCache[cellAttributes.indexPath] = cellAttributes
        }
    }
        
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        layoutAttributesCache.values.filter { rect.intersects($0.frame) }
    }
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        self.layoutAttributesCache[indexPath]!
    }
    
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool { false }
}

// boilerplate
class ViewController: UICollectionViewController {

    var columnCount: Int { (self.collectionViewLayout as! MapLayout).columnCount }
    var rowCount: Int { columnCount }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
    }

    override func numberOfSections(in collectionView: UICollectionView) -> Int { 1 }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { rowCount * columnCount }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        let fancyColor = UIColor(hue: CGFloat((indexPath.row % columnCount))/CGFloat(columnCount), saturation: 1, brightness: 1 - floor( Double(indexPath.row) / Double( columnCount) ) / Double(rowCount), alpha: 1).cgColor
        cell.layer.borderColor = fancyColor
        cell.layer.borderWidth = 2
        return cell
    }
}

结果应该是这样的: