I would like to create a walk through like in this image:
Creating the semi-transparent overlay is no big deal of cause. But how to highlight the tabBar item as shown?
1. Try
My first try was to create a snapshot
of the tab bar item and place it on the background at the same position as the real tab bar item:
let tabBarItemViews = tabBar.subviews.filter({$0.isUserInteractionEnabled}).sorted(by: {$0.frame.minX < $1.frame.minX})
let firstButtonView = tabBarItemViews[0]
let snapshot = firstButtonView.snapshotView(afterScreenUpdates: true)
backgroundView.addSubview(snapshot)
snapshot.frame = backgroundView.convert(firstButtonView.frame, from: firstButtonView.superview!)
This works fine and a copy/snapshot of the first tabBar button appears at the correct location on the background view.
BUT: This does NOT work for other tabBar buttons which are not selected. The snapshot is empty and shows nothing. It has the correct frame dimensions, and is not nil, but nothing is shown.
2. Try
Instead of creating a snapshot
I used to capter a screenshot / image using this extension:
extension UIView {
func asImage() -> UIImage {
if #available(iOS 10.0, *) {
let renderer = UIGraphicsImageRenderer(bounds: bounds)
return renderer.image { rendererContext in
layer.render(in: rendererContext.cgContext)
}
} else {
UIGraphicsBeginImageContext(self.frame.size)
self.layer.render(in:UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return UIImage(cgImage: image!.cgImage!)
}
}
}
The code is almost the same as in the first try:
...
let imageView = UIImageView(firstButtonView.asImage())
backgroundView.addSubview(imageView)
imageView.frame = backgroundView.convert(firstButtonView.frame, from: firstButtonView.superview!)
The result is also the same: It works fine for the active tab bar item but delivers an empty result for all other items...
If I use the asImage()
extension on the tabBar itself the result is the same: It creates an Image of the complete TabBar which only shows the first/active button.
For some reason it is not possible to capture the inactive tab bar items.
Is there any hack to solve this?