Using SwiftUI Views for UICollectionViewCell inside a UIViewRepresentable CollectionView (Wrapped UICollectionView) - uicollectionview

I have to replace an existing SwiftUI List of views with a UICollectionView(because the app designs were updated and the new designs are pretty complex for SwiftUI so it that had to be implemented as a custom UICollectionViewFlowLayout)
So the views(which now will be (or a part of)UICollectionViewCell) are already implemented in SwiftUI, and i didn't want to re-write them in Swift. The view are complex in terms of writing down the Layout Code, which apparently was pretty easy using SwiftUI.
I could find some help wrapping up a collection view like this one but little on how to host an existing swift ui view inside a UICollectionViewCell
Any help/suggestions/links would be appreciated.
Thanks

I did get that working. But not sure if that's the correct solution. If anyone has a better solution please add your answer.
So i created a UICollectionViewCell sub-class.
final class HostingCollectionViewCell: UICollectionViewCell {
func host<Content: View>(_ hostingController: UIHostingController<Content>) {
backgroundColor = .clear
hostingController.view.translatesAutoresizingMaskIntoConstraints = false
hostingController.view.backgroundColor = .clear
addSubview(hostingController.view)
let constraints = [
hostingController.view.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0),
hostingController.view.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 0),
hostingController.view.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0),
hostingController.view.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: 0),
]
NSLayoutConstraint.activate(constraints)
}
}
And used it like..
func makeUIView(context: Context) -> UICollectionView {
let collectionView = UICollectionView(
frame: .zero,
collectionViewLayout: MyCustomCollectionViewLayout()
)
collectionView.register(HostingCollectionViewCell.self, forCellWithReuseIdentifier: "HostingCell")
let dataSource = UICollectionViewDiffableDataSource<Section, Member>(collectionView: collectionView) { collectionView, indexPath, member in
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HostingCell", for: indexPath) as? HostingCollectionViewCell
for subview in cell?.contentView.subviews ?? [] {
subview.removeFromSuperview()
}
let swiftUIView = SomeSwiftUIView()
.onTapGesture {
// Equivalent of didTapItemAt...
}
cell?.host(UIHostingController(rootView: firefighterView))
return cell
}
context.coordinator.dataSource = dataSource
collectionView.clipsToBounds = false
collectionView.backgroundColor = .clear
collectionView.showsVerticalScrollIndicator = false
// Populated Datasource
return collectionView
}
This makeUIView is part of the struct SwiftUICollectionView: UIViewRepresentable view.

Related

How to get bounds of current map view?

How do I automatically get the bounds of the current map view? I've been looking everywhere. The Google Maps API has it: http://www.w3schools.com/googleapi/ref_getbounds.asp
It would be nice to do it for React Native
If you want it then you can have one extension for the MKMapView as below.
extension MKMapView {
func getBounds() -> (southWestPoint: CLLocationCoordinate2D, northEastPoint: CLLocationCoordinate2D) {
let visibleMapRect = self.visibleMapRect
let neMapPoint = MKMapPointMake(MKMapRectGetMaxX(visibleMapRect), visibleMapRect.origin.y)
let swMapPoint = MKMapPointMake(visibleMapRect.origin.x, MKMapRectGetMaxY(visibleMapRect))
return (southWestPoint: MKCoordinateForMapPoint(swMapPoint), northEastPoint:MKCoordinateForMapPoint(neMapPoint))
}
}
Whenever you want the bound just call the getBounds method.

Showing a zoomable, scrollable image on Apple Watch

I'm trying to make an Apple Watch app (extension) which shows a map in a way similar to Apple's Maps app. I want to be able to show a portion of the map, and then be able to use the digital crown to zoom and gestures to scroll.
I think this should be possible with Watch OS2, but I haven't figured out which APIs to use.
Is this possible on the platform at present?
Update: I don't think I can use WKInterfaceMap since I want to generate my own map, not use an existing one.
Inside Watch OS2 API only WKInterfacePicker has access of Digit Crown
So We can't use Digit Crown For WKInterfaceMap Directly but we can use it by using WKInterfacePicker
Put WKInterfaceMap and WKInterfacePicker inside Group
Set WKInterfacePicker size width fixed = 2 height fixed = 2
(We can not set size to zero)
NOTE : Don't hide WKInterfacePicker, Sometime, It resign focus because of hidden .
Add below code for Picker Controller
code
class InterfaceController: WKInterfaceController {
#IBOutlet var mapView : WKInterfaceMap!
#IBOutlet var tempPicker:WKInterfacePicker!
var zoomArray:[Double] = [1.0,0.98,0.96,0.94,0.92,0.90,0.88,0.86,0.84,0.82,0.80,0.78,0.76,0.74,0.72,0.70,0.68,0.66,0.64,0.62,0.60,0.58,0.56,0.54,0.52,0.50,0.48,0.46,0.44,0.42,0.40,0.38,0.36,0.34,0.32,0.30,0.28,0.26,0.24,0.22,0.20,0.18,0.16,0.14,0.12,0.10,0.09,0.08,0.07,0.06,0.05,0.04,0.03,0.02,0.01,0.009,0.008,0.007,0.006,0.005,0.004,0.003,0.002,0.001]
override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)
let pickerItems: [WKPickerItem] = zoomArray.map {
let pickerItem = WKPickerItem()
pickerItem.caption = String($0)
pickerItem.title = String($0)
return pickerItem
}
self.tempPicker.setItems(pickerItems)
self.tempPicker.setSelectedItemIndex(25)
let span = MKCoordinateSpanMake(zoomArray[25], zoomArray[25])
let lc = watchDelegate.locationModel.myLocation ?? CLLocationCoordinate2D.init(latitude: 0.0, longitude: 0.0)//watchDelegate.locationModel.myLocation is current user Location
let region = MKCoordinateRegionMake(lc, span)
self.mapView.setRegion(region)
}
#IBAction func pickerChanged(value: Int) {
let lc = watchDelegate.locationModel.myLocation ?? CLLocationCoordinate2D.init(latitude: 0.0, longitude: 0.0)
let span = MKCoordinateSpanMake(zoomArray[value], zoomArray[value])
let region = MKCoordinateRegionMake(lc,
span)
self.mapView.setRegion(region)
self.tempPicker.focus()
}
}
Connect #IBAction and IBOutlet to WKInterfacePicker and WKInterfaceMap

tvOS UICollectionView get currently focused item's index path

So this is kind of a noobish question but I just can't figure out a very simple way to detect currently focused item's indexPath.
I looked around hoping to see something very easy like collectionView.indexPathOfCurrentlyFocusedItem but didn't find anything remotely close.
So I digged around and tried to find something similar at UIFocusEnvironment, UIFocusUpdateContext trying to find the desired property but failed.
So, the only solution I can come up with is just iterating through all visible cells and finding a cell with focused property set to true.
So is there a more simple and elegant way to find the currently focused item's indexPath? (Except tracking it through delegate method and saving it in view controller's property)
You can use UIScreen property focusedView as followed for this:
if let focusedCell = UIScreen.main.focusedView as? UICollectionViewCell {
if let indexPath = collectionView.indexPath(for: focusedCell) {
print("IndexPath is \(indexPath)")
}
}
Use didUpdateFocusInContect - UICollectionViewDelegate
func collectionView(collectionView: UICollectionView, didUpdateFocusInContext context: UICollectionViewFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
if collectionView == self.collectionView {
print(context.nextFocusedIndexPath)
}
}
This wil return the indexPath of the cell that is going to be focused, you could also try:
context.previouslyFocusedIndexPath
Depends what you're trying to do.
So, your target is to do something when you get and lose focus particularly on a cell under tvOS. The catch is you're moving around other UI elements, and therefore the context could be different. You have to change in this context only those UIs that you have to care of.
The right place to make your implementation is func didUpdateFocusInContext(), like this:
override func didUpdateFocusInContext(
context: UIFocusUpdateContext,
withAnimationCoordinator coordinator: UIFocusAnimationCoordinator
) {
coordinator.addCoordinatedAnimations({
if let cell = context.previouslyFocusedView as? UICollectionViewCell {
cell.layer.borderWidth = 2
}
if let cell = context.nextFocusedView as? UICollectionViewCell {
cell.layer.borderWidth = 5
}
},
completion: nil)
}
Now we're using the focus coordinator to apply our logic:
When the previously focused item is UICollectionViewCell then you have to release the focus to the next item. You shouldn't care what is the next item because it could be a collection cell or not. For fun, in this case, let's change the border to 2. This value could be set by default.
When the next focused item is UICollectionViewCell then you've to handle it is a similar way, or it will become a mess... So, let's change the border to 5.
As you can see, didUpdateFocusInContext() provides a generic approach for all views within your current visual context. You can apply the same approach for other UI elements.
Have a fun with tvOS...
Here's how I accomplished this in shouldUpdateFocusInContext
Solution
override func shouldUpdateFocusInContext(context: UIFocusUpdateContext) -> Bool {
// The magic is in the next two lines
let cell: UICollectionViewCell = context.nextFocusedView as! UICollectionViewCell
let indexPath: NSIndexPath? = self.collectionView.indexPathForCell(cell)
print(indexPath)
// <NSIndexPath: 0xc000000000000016> {length = 2, path = 0 - 0}
return true
}

Set NavigationBar Back to Default Values

I've changed several of the navigationBar properties for a view. However, I'd like to make sure everything reverts back to the default values once the view is unwinded or a new view is shown. Is there a way to reset all values?
Changed Values:
// set status bar white
self.navigationController?.navigationBar.barStyle = UIBarStyle.Default
// make navigation bar clear/transparent
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.translucent = false
let titleDict: NSDictionary = [NSForegroundColorAttributeName: UIColor.whiteColor()]
self.navigationController?.navigationBar.titleTextAttributes = titleDict
If anyone else needs this:
func setNavigationBarDefaults() {
self.navigationController?.navigationBar.barStyle = UIBarStyle.Default
self.navigationController?.navigationBar.translucent = false
}
override func viewWillDisappear(animated: Bool) {
setNavigationBarDefaults()
}

UICollectionView exception in UICollectionViewLayoutAttributes from iOS7

I have done a View in CollectionView with CustomLayout. In iOS6 it worked great but iOS7 it throws an exception like this.
Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason:
'layout attributes for supplementary item at index path ( {length = 2, path = 0 - 0}) changed from CustomSupplementaryAttributes: 0xd1123a0 index path: (NSIndexPath: 0xd112580 {length = 2, path = 0 - 0}); element kind: (identifier); frame = (0 0; 1135.66 45); zIndex = -1; to CustomSupplementaryAttributes: 0xd583c80 index path: (NSIndexPath: 0xd583c70 {length = 2, path = 0 - 0}); element kind: (identifier); frame = (0 0; 1135.66 45); zIndex = -1; without invalidating the layout'
iOS 10
At iOS 10, a new feature is introduced, it is Cell Prefetching. It will let dynamic position of SupplementaryView crash. In order to run in the old behavior, it needs to disable prefetchingEnabled. It's true by default at iOS 10.
// Obj-C
// This function is available in iOS 10. Disable it for dynamic position of `SupplementaryView `.
if ([self.collectionView respondsToSelector:#selector(setPrefetchingEnabled:)]) {
self.collectionView.prefetchingEnabled = false;
}
// Swift
if #available(iOS 10, *) {
// Thanks #maksa
collectionView.prefetchingEnabled = false
// Swift 3 style
colView.isPrefetchingEnabled = false
}
I hate this problem. I spend 2 days for this problem.
A reference about Cell Pre-fetch #iOS 10.
iOS 9 and before ...
#Away Lin is right.. I solve the same problem by implementing that delegate method.
My Custom UICollectionViewLayout will modify the attributes in layoutAttributesForElementsInRect. The section position is dynamic, not static. So, I obtain warnings about the layout attributes for supplementary item at index path ... changed from ... to .... Before the changes, invalideLayout related methods should be called.
And, after implementing this delegate method to return true, the method invalidateLayoutWithContext: will be called when scrolling the UICollectionViewLayout. By default, it returns false.
- (BOOL) shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}
From Apple Docs
Return Value
true if the collection view requires a layout update or false if the
layout does not need to change.
Discussion The default implementation of this method returns false.
Subclasses can override it and return an appropriate value based on
whether changes in the bounds of the collection view require changes
to the layout of cells and supplementary views.
If the bounds of the collection view change and this method returns
true, the collection view invalidates the layout by calling the
invalidateLayoutWithContext: method.
Availability Available in iOS 6.0 and later.
And more ...
A nice example project on GitHub, for custom UICollectionViewLayout.
You need to invalidate the existing layout before updating, see the end of the error message:
without invalidating the layout'
[collectionViewLayout invalidateLayout];
Apple Documentation for UICollectionViewLayout
I had the same exception: in iOS 7, you need now to override the inherited isEqual: in your UICollectionViewLayoutAttributes subclass as stated in Apple documentation here.
I solved my problem by override the method at the subclase of UICollectionViewFlowLayout:
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBound
return YES
I'm not entirely certain how or why, but this appears to be fixed in iOS 12, supporting both supplementary view resizing and prefetching. The trick for me was to make sure things are happening in the correct order.
Here is a working implementation of a stretchable header view. Notice the implementation of the header resizing happening in layoutAttributesForElements(in rect: CGRect):
class StretchyHeaderLayout: UICollectionViewFlowLayout {
var cache = [UICollectionViewLayoutAttributes]()
override func prepare() {
super.prepare()
cache.removeAll()
guard let collectionView = collectionView else { return }
let sections = [Int](0..<collectionView.numberOfSections)
for section in sections {
let items = [Int](0..<collectionView.numberOfItems(inSection: section))
for item in items {
let indexPath = IndexPath(item: item, section: section)
if let attribute = layoutAttributesForItem(at: indexPath) {
cache.append(attribute)
}
}
}
if let header = layoutAttributesForSupplementaryView(ofKind: StretchyCollectionHeaderKind, at: IndexPath(item: 0, section: 0)) {
cache.append(header)
}
}
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
return true
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let visibleAttributes = cache.filter { rect.contains($0.frame) || rect.intersects($0.frame) }
guard let collectionView = collectionView else { return visibleAttributes }
// Find the header and stretch it while scrolling.
guard let header = visibleAttributes.filter({ $0.representedElementKind == StretchyCollectionHeaderKind }).first else { return visibleAttributes }
header.frame.origin.y = collectionView.contentOffset.y
header.frame.size.height = headerHeight.home - collectionView.contentOffset.y
header.frame.size.width = collectionView.frame.size.width
return visibleAttributes
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let attributes = super.layoutAttributesForItem(at: indexPath as IndexPath)?.copy() as! UICollectionViewLayoutAttributes
guard collectionView != nil else { return attributes }
attributes.frame.origin.y = headerHeight.home + attributes.frame.origin.y
return attributes
}
override func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: StretchyCollectionHeaderKind, with: indexPath)
}
override var collectionViewContentSize: CGSize {
get {
guard let collectionView = collectionView else { return .zero }
let numberOfSections = collectionView.numberOfSections
let lastSection = numberOfSections - 1
let numberOfItems = collectionView.numberOfItems(inSection: lastSection)
let lastItem = numberOfItems - 1
guard let lastCell = layoutAttributesForItem(at: IndexPath(item: lastItem, section: lastSection)) else { return .zero }
return CGSize(width: collectionView.frame.width, height: lastCell.frame.maxY + sectionInset.bottom)
}
}
}
P.S.: I'm aware the cache doesn't actually serve any purpose at this point :)
I had this problem too, because I had code that depended on the content size of the collection view. My code was accessing the content size via the collectionView!.contentSize instead of collectionViewContentSize.
The former uses the collectionView property of UICollectionViewLayout, while the latter uses the custom-implemented layout property. In my code, the first time the layout was asked for attributes, contentSize had not been set yet.
Select the CollectionView and Goto Attribute Inspector. Uncheck The Prefetching Enabled CheckBox. This is Fixed my Issue. Screenshot