iOS 中用于交互元素的动态类型

Posted 2023-03-15

【中文标题】iOS 中用于交互元素的动态类型

【英文标题】：Dynamic Type in iOS for interactive elements

【发布时间】：2016-11-30 17:08:39

【问题描述】：

我目前正在实现一个支持动态字体大小（用于辅助功能）的 ios 应用程序。我阅读了 Apple 关于此事的文档 [1]，其中陈述了以下内容：

使用文本样式常量返回的字体用于 应用程序中的所有文本，而不是用户界面元素中的文本，例如 按钮、栏和标签。

这是为什么呢？调整应用程序中的按钮等元素不是特别重要吗，因为这些是用户与应用程序交互的部分？当用户将动态类型的字体大小设置为非常大时，情况会变得更糟，因为像按钮这样的元素更难看到，因为其他所有内容都变得更大了，但按钮仍保持 15pt 的字体大小。

我感兴趣的是：这背后的原因是什么？像按钮这样的元素是否应该保持默认字体大小，其他人如何处理呢？ 另外，我不清楚什么应该是动态的，什么不是 - 文本字段、文本字段的标签或解释性文本（这是一个标签）怎么样？

[1]https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html

【参考方案1】：

Apple 文档违反了 W3C WCAG 2.0 AA 1.4.4 调整文本大小的要求，该要求指出“除了文本的标题和图像，文本可以在不使用辅助技术的情况下最多调整 200% 而不会丢失内容或功能.（AA级）”（https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale）

解决界面元素中的动态字体大小是正确的。我会忽略 Apple 文档。

【讨论】：

我同意，但我仍然想知道 Apple 文档背后的原因。此外，由于 Cocoa API 对此没有提供良好的支持，因此很难/不可能“运行系统”（例如，通过放大标签栏或导航栏的按钮）

我不认为我是“无视 Apple 文档”的粉丝。该文档指的是文本样式常量的使用，而不是可访问性的一般做法。他们说他们的文本样式常量不应该在那些地方使用，我猜那不是他们设计它们工作的地方。

【参考方案2】：

您需要继承或扩展 UIButton，然后添加一个标签作为子视图。

class DynamicTextButton : UIButton


var dynamicTextLabel: UILabel!

override init(frame: CGRect)
    super.init(frame: frame)

    setDynamicTextLabelAndConstraints()

    self.heightAnchor.constraint(greaterThanOrEqualToConstant: 0.0)
    self.adjustsImageSizeForAccessibilityContentSizeCategory = true
    self.backgroundColor = ButtonStyle.TextButtonColor_Background




required init?(coder aDecoder: NSCoder) 
    super.init(coder: aDecoder)



private func setDynamicTextLabelAndConstraints()

    dynamicTextLabel = UILabel(frame: frame)
    dynamicTextLabel.font = ButtonStyle.TextButtonFont
    dynamicTextLabel.translatesAutoresizingMaskIntoConstraints = false
    dynamicTextLabel.font = UIFont.preferredFont(forTextStyle: .body)
    //self.textColor = TextStyle.MainTextColor_Normal
    dynamicTextLabel.adjustsFontForContentSizeCategory = true
    dynamicTextLabel.numberOfLines = 0
    dynamicTextLabel.lineBreakMode = NSLineBreakMode.byWordWrapping
    dynamicTextLabel.heightAnchor.constraint(greaterThanOrEqualToConstant: 0.0)


    self.addSubview(dynamicTextLabel)

    dynamicTextLabel.topAnchor.constraint(equalTo: self.topAnchor, constant:  0.0).isActive = true
    dynamicTextLabel.leftAnchor.constraint(equalTo: self.leftAnchor, constant:  0.0).isActive = true
    dynamicTextLabel.rightAnchor.constraint(equalTo: self.rightAnchor, constant:  0.0).isActive = true
    dynamicTextLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant:  0.0).isActive = true

使用方法：

    var myDynamicButton = DynamicTextButton(frame: frame)
    myDynamicButton.dynamicTextLabel.text = "My Button Title"
    myDynamicButton?.translatesAutoresizingMaskIntoConstraints = false