Dynamic Type

Dynamic Type

啥是 Dynamic Type

动态字体,即视力不好的用户,调整了默认字体的大小,开发者应该根据这个设置,动态改变界面的字体等,保证用户能看得清楚。
这个还是蛮重要的,视力不好的人越来越多。

用户在哪里调整

Dynamic Type
打开了开关之后,底部明显调整更大了。
Dynamic Type

开发者怎么知道用户设置了多大的字体

通过监听一个通知即可

    NotificationCenter.default.addObserver(forName: NSNotification.Name.UIContentSizeCategoryDidChange, object: .none, queue: OperationQueue.main) { (notify) in
        let aa: UIContentSizeCategory = notify.userInfo?[UIContentSizeCategoryNewValueKey] as! UIContentSizeCategory
        print(aa)
    }

可以有很多种
Dynamic Type

如何自动调整 Lable 的大小

使用 StoryBoard

  1. font 指定为某种 style
    Dynamic Type
  2. 选择 Automatically Adjusts Font
    Dynamic Type

    使用代码

    label.font = UIFont.preferredFont(forTextStyle: .title2)
    label.adjustsFontForContentSizeCategory = true
    label.firstBaselineAnchor.constraintEqualToSystemSpacingBelow(storyLable.lastBaselineAnchor, multiplier: 1).isActive = true
    label.centerXAnchor.constraint(equalTo: storyLable.centerXAnchor).isActive = true
    

效果如下

Dynamic Type

为自定义字体自动缩放

    let fontName = "Futura-MediumItalic"
    guard let customFont = UIFont.init(name: fontName, size: UIFont.labelFontSize) else {
        print("not found font \(fontName)")
        return
    }

    let customLabel = UILabel.init()
    customLabel.font = UIFontMetrics.default.scaledFont(for: customFont)

为视障患者提供大图片

各种 bar (底部 tabbar、顶部导航栏)

因为 bar 大小固定,苹果提供了一种方式,长按时,放大显示。
Dynamic Type

  1. 使用storyboard
    有两种方式

    1. 使用向量版本的图片,保证缩放信息

      Dynamic Type

    2. 同时制定一个大图 (75 pt) 和一个小图
      Dynamic Type

  2. 使用代码
    使用 largeContentSizeImage 属性。

    self.tabBarItem.image = UIImage.init(imageLiteralResourceName: "layoutsmall")
    self.tabBarItem.largeContentSizeImage = UIImage.init(imageLiteralResourceName: "layoutbig")
    

一般图片

  1. 使用 storyboard
    Dynamic Type

  2. 使用代码

    imageView.adjustsImageSizeForAccessibilityContentSizeCategory = true
    

其他技巧

  1. number of lines 设为 0
    这样子大字号时,可以不被截断
  2. 文字之间布局时,使用系统提供的间距

    customLabel.firstBaselineAnchor.constraintEqualToSystemSpacingBelow(label.lastBaselineAnchor, multiplier: 1).isActive = true
    
  3. 使用缩放后的值

    frame.origin.y += UIFontMetrics.default.scaledValue(for: 40.0)
    
  4. 根据不同的 Text Size 采用不同的布局

    Dynamic Type
    感觉这个也不咋智能。
    Dynamic Type
    比如不同的文字大小,布局是不同的。

参考

posted on 2018-07-09 23:55  花老????  阅读(572)  评论(0)  编辑  收藏

上一篇:nextJs:document、window报错


下一篇:P2617 Dynamic Rankings 动态主席树 (支持插入后再更新)