iOS 13 under the magnifying glass
Dynamic Type is good, but it doesn’t always work. Now I’ll tell you how small controls in iOS 13 increase for free, without registration and SMS.
In the last article, we pulled the dynamik type on the menu of the Dodo Pizza iOS application. It turned out pretty well. But the tabbar under the menu was as small as it was and remained with it - it does not change depending on the text size setting.
This feature has not yet reached the release, for which I am ashamed and shame
“But how is it, Dodo?” Don't you care about visually impaired people?
- Sorry!
The system tabbar shows a preview of each long tap tab. Try to include the "available" text size, and then long press on any tab in the system tab (for example, in Music or in Photo). The following pop-up will appear on the screen:
In addition to the tabbar, the “magnifying glass” mode is supported by buttons in the navbars and toolbars:
Search Fields:
And some more controls.
And, starting with iOS 13, we can easily add the same behavior to our controls.
Unfortunately, this protocol is rather poorly described in the documentation, but this does not matter, because its API looks pretty simple:
It is enough to implement several of these methods, the names of which speak for themselves, and your control will show a big preview on long tap.
Let's try this protocol on some button in the application. For example, on the
button in the product card:
Add 3 lines of code:
Done. Cool, yeah?
Only here is the even icon, which is pulled by default, I do not like. It will be better if it is not two-color, but one-color with the cut out shape of the letter
. This is just used for the
state of the button.
Norm
And now let's wrap up in the extension:
In fact, many standard ios controls already implement some of the methods of this protocol. And this mode is turned off, because you need to try to really increase the content, rather than hide everything behind a magnifying glass.
I rephrase: use this feature only as a last resort, when you really can’t increase control at all.
Demo project in my repo on GitHub
In the last article, we pulled the dynamik type on the menu of the Dodo Pizza iOS application. It turned out pretty well. But the tabbar under the menu was as small as it was and remained with it - it does not change depending on the text size setting.
This feature has not yet reached the release, for which I am ashamed and shame
“But how is it, Dodo?” Don't you care about visually impaired people?
- Sorry!
A little about the built-in mode "Magnifier"
The system tabbar shows a preview of each long tap tab. Try to include the "available" text size, and then long press on any tab in the system tab (for example, in Music or in Photo). The following pop-up will appear on the screen:
In addition to the tabbar, the “magnifying glass” mode is supported by buttons in the navbars and toolbars:
Search Fields:
And some more controls.
And, starting with iOS 13, we can easily add the same behavior to our controls.
How to fasten UILargeContentViewerItem to application
Unfortunately, this protocol is rather poorly described in the documentation, but this does not matter, because its API looks pretty simple:
@available(iOS 13.0, *) public protocol UILargeContentViewerItem : NSObjectProtocol { var showsLargeContentViewer: Bool { get } var largeContentTitle: String? { get } var largeContentImage: UIImage? { get } var scalesLargeContentImage: Bool { get } var largeContentImageInsets: UIEdgeInsets { get } }
It is enough to implement several of these methods, the names of which speak for themselves, and your control will show a big preview on long tap.
Very simple implementation
Let's try this protocol on some button in the application. For example, on the
i
button in the product card:
Add 3 lines of code:
nutritionButton.showsLargeContentViewer = true nutritionButton.addInteraction(UILargeContentViewerInteraction()) nutritionButton.largeContentTitle = nutritionButton.accessibilityValue
Done. Cool, yeah?
Only here is the even icon, which is pulled by default, I do not like. It will be better if it is not two-color, but one-color with the cut out shape of the letter
i
. This is just used for the
.highlighted
state of the button.
nutritionButton.largeContentImage = nutritionButton.image(for: .highlighted)
Norm
And now let's wrap up in the extension:
extension UIView { public func enableLargeContent(title: String? = nil, image: UIImage? = nil, scales: Bool = true, insets: UIEdgeInsets = .zero) { guard !showsLargeContentViewer else { return } showsLargeContentViewer = true addInteraction(UILargeContentViewerInteraction()) largeContentTitle = title largeContentImage = image scalesLargeContentImage = scales largeContentImageInsets = insets } }
nutritionButton.enableLargeContent(title: nutritionButton.accessibilityValue, image: nutritionButton.image(for: .highlighted))
In fact, many standard ios controls already implement some of the methods of this protocol. And this mode is turned off, because you need to try to really increase the content, rather than hide everything behind a magnifying glass.
I rephrase: use this feature only as a last resort, when you really can’t increase control at all.
The documentation for this whole thing is available in Xcode if you open theUILargeContentViewerItem
interface.
Demo project in my repo on GitHub
All Articles