Tag: dynamic type

Categories
iOS Swift UIKit

UICollectionViewFlowLayout and auto layout on iOS

UICollectionViewFlowLayout is layout object supplied by UIKit and enables showing items in grid. It allows customising spacings and supports fixed size cells and cells with different sizes. This time I am going to show how to build a collection view containing items with different sizes where sizes are defined by auto layout constraints.

Cell sizes in UICollectionViewFlowLayout

By default UICollectionViewFlowLayout uses itemSize property for defining the sizes of the cells. Another way is to use UICollectionViewDelegateFlowLayout and supplying item sizes by implementing collectionView(_:layout:sizeForItemAt:). Third way is to let auto layout for defining the size of the cell. This is what I am going to build this time.

Enabling auto layout based cell sizes

When setting UICollectionViewFlowLayout’s estimatedItemSize to UICollectionViewFlowLayout.automaticSize enables layout object to use auto layout.

final class CollectionViewController: UICollectionViewController {
let content: [String]
init(content: [String]) {
self.content = content
let layout = UICollectionViewFlowLayout()
layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
super.init(collectionViewLayout: layout)
}
}
view raw CollectionViewController.swift hosted with ❤ by GitHub

Setting up collection view cell with auto-layout constraints

When layout object is configured, second step is to create a cell. In the current prototype it is going to be a simple cell with a label and border around the label. Constraints are set up to have a 8 points space around the label. Constraints together with label’s intrinsicContentSize define the minimum size for the cell. If text is longer, intrinsicContentSize is wider.

final class TextCollectionViewCell: UICollectionViewCell {
let textLabel: UILabel
override init(frame: CGRect) {
textLabel = {
let label = UILabel(frame: .zero)
label.adjustsFontForContentSizeCategory = true
label.font = UIFont.preferredFont(forTextStyle: .body)
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
super.init(frame: frame)
contentView.addSubview(textLabel)
NSLayoutConstraint.activate([
textLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
textLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
textLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
textLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
])
contentView.layer.borderColor = UIColor.darkGray.cgColor
contentView.layer.borderWidth = 1
contentView.layer.cornerRadius = 4
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
view raw TextCollectionViewCell.swift hosted with ❤ by GitHub

When putting all the things together, the end result is a collection view where every cell has its own size. Moreover, it supports dynamic type and cells will grow if user changes default text sizes.

Summary

UICollectionViewFlowLayout’s estimatedItemSize enables using auto-layout for defining cell sizes. Therefore creating cells where text defines the size of the cell is simple to do on iOS.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Example project

FittingCellsInCollectionViewFlowLayout Xcode 10.2, Swift 5.0

Resources

Categories
Swift UIKit

Supporting dynamic type on iOS

Dynamic type is a feature on iOS what allows users to customise size of the text on screen. Supporting dynamic type enables users with low vision condition to still use your app. It defines a set of APIs for getting font sizes matching with users text size choice in the settings. There are two ways of changing the default text size: Settings > Display & Brightness > Text Size and Settings > General > Accessibility > Larger Text. In accessibility settings it is possible to enable larger accessibility sizes what then makes the total count of text size to 12.

Text styles and custom fonts

UIKit defines a list of text styles which are used for getting preferred font for style. Setting the font to a label and turning on adjustsFontForContentSizeCategory on UILabel enables automatic font updates when user changes text size.

extension UIFont.TextStyle {
public static let largeTitle: UIFont.TextStyle
public static let title1: UIFont.TextStyle
public static let title2: UIFont.TextStyle
public static let title3: UIFont.TextStyle
public static let headline: UIFont.TextStyle
public static let subheadline: UIFont.TextStyle
public static let body: UIFont.TextStyle
public static let callout: UIFont.TextStyle
public static let footnote: UIFont.TextStyle
public static let caption1: UIFont.TextStyle
public static let caption2: UIFont.TextStyle
}
let font = UIFont.preferredFont(forTextStyle: style)
// Automatically update font size when user changes preferred text size or accessibility text sizes.
label.adjustsFontForContentSizeCategory = true
label.font = font
// And the same behavior with buttons without attributed title.
button.titleLabel?.adjustsFontForContentSizeCategory = true
button.titleLabel?.font = font
view raw TextStyles.swift hosted with ❤ by GitHub

Using custom fonts is not much different, we just need to use UIFontMetrics for getting a scaled font and turning on adjustsFontForContentSizeCategory.

var customFont = UIFont(name: "Futura-medium", size: 15)!
customFont = UIFontMetrics.default.scaledFont(for: customFont)
label.adjustsFontForContentSizeCategory = true
label.font = customFont
view raw CustomFont.swift hosted with ❤ by GitHub

Best way for testing text size category changes is to open Accessibility Inspector (Xcode -> Open Developer Tool -> Accessibility Inspector).

Content size categories

Text sizes can grow a lot and therefore in many cases it is needed to adjust the layout based on the current settings. For example, horisontally aligned text fields. In those cases it is easy to use UIStackView and just changing the alignment property based on content size category. Both trait collection and UIApplication implement preferredContentSizeCategory which then can be used for defining the layout. Content size category changes can be observed by observing change notification or trait collection changes.

if traitCollection.preferredContentSizeCategory.isAccessibilityCategory {
// align vertically
}
else {
// align horisontally
}
if traitCollection.preferredContentSizeCategory > .extraLarge {
// align vertically
}
else {
// align horisontally
}
view raw ContentSizeCategory.swift hosted with ❤ by GitHub

Scaling Images

When text is shown with icons and text size is very large, then it is preferred to scale the icon as well for avoiding awkward looking user interface. Solution here is to provide icon assets as pdf and checking Preserve vector data checkbox in the asset catalog. This allows UIKit to redraw the image in larger sizes when image view’s adjustsImageSizeForAccessibilityContentSizeCategory is enabled.

Summary

Dynamic type is an important feature what enables your app to reach wide range of people. Supporting dynamic text sizes is easy to add although in many cases it requires to adjust the layout direction as well for giving more space for the text.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Resources