<p>At WWDC 22, UIKit got a many improvements with iOS 16. These additions are new components, shortcuts for easier development, using SwiftUI in UIKit, self-sizing cells and more…</p>
<p>In this article, we will talk about these features added to UIKit with iOS 16 and provide code samples for each. Let’s start exploring…</p>
<h3>UIPageControl</h3>
<p><a href="https://developer.apple.com/documentation/uikit/uipagecontrol" target="_blank" rel="noopener ugc nofollow">Apple Documentation</a></p>
<p>Which we enjoy using and makes our work easier UIPageControl now can control layout direction as horizontal and vertical. In addition, custom image features have been added based on each state.</p>
<pre data-label="UIPageControl.swift"><code class="language-swift">private lazy var pageControl: UIPageControl = {
    let pageControl = UIPageControl()
    pageControl.currentPage = .zero
    pageControl.numberOfPages = 3
    pageControl.direction = .leftToRight // In example we used also topToBottom
    pageControl.preferredIndicatorImage = UIImage(systemName: &quot;star&quot;)
    pageControl.preferredCurrentPageIndicatorImage = UIImage(systemName: &quot;star.fill&quot;)
    return pageControl
}()</code></pre>
<p><img class="aligncenter wp-image-2916 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1i8TTTVUFHnnfsMQX_27txA.gif" alt="UIPageControl Example" width="600" height="1299" /></p>
<h3>Self-resizing Cells</h3>
<p><a class="au lg" href="https://developer.apple.com/documentation/uikit/uicollectionview/4001100-selfsizinginvalidation" target="_blank" rel="noopener nofollow">Apple Documentation</a></p>
<p>UICollectionView and UITableView now have self-resizing cells. The “<strong>selfSizingInvalidation</strong>” parameter is enabled by default. In our example we will perform it on the UICollectionView. This is because you need to use <strong>UICollectionLayoutListConfiguration</strong> and <strong>UICollectionViewCompositionalLayout</strong> as collectionViewLayout in UICollectionView. Also need to add the subviews inside the contentView in your cells. You can call <strong>self.invalidateIntrinsicContentSize()</strong> from inside the cell to trigger the resize operation manually.</p>
<pre data-label="SelfResizingCells.swift"><code class="language-swift">private lazy var collectionView: UICollectionView = { [weak self] in
    var config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    let layout = UICollectionViewCompositionalLayout.list(using: config)
    let collectionView = UICollectionView(
        frame: .zero,
        collectionViewLayout: layout
    )
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.dataSource = self
    collectionView.register(
        SelfResizingCollectionViewCell.self,
        forCellWithReuseIdentifier: SelfResizingCollectionViewCell.description()
    )

    //Enable by default
    collectionView.selfSizingInvalidation = .enabledIncludingConstraints
    return collectionView
}()</code></pre>
<p><img class="aligncenter wp-image-2917 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1uxFfHTf7DLdcMa6hGaO1Pw.gif" alt="Self-resizing cell example" width="600" height="1299" /></p>
<h3>SwiftUI View In UITableView &amp; UICollectionView (UIHostingConfiguration)</h3>
<p><a href="https://developer.apple.com/documentation/SwiftUI/UIHostingConfiguration" target="_blank" rel="noopener ugc nofollow">Apple Documentation</a></p>
<p>Now you can use your SwiftUI views with UIHostingConfiguration in UITableView and UICollectionView. The best part is that you can use the cells you have created with both UIKit and SwiftUI together.</p>
<pre data-label="UIHostingConfigurationExample.swift"><code class="language-swift">extension UIHostingConfigurationExample: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -&gt; Int {
        return contentDatas.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -&gt; UITableViewCell {
        let contentData = contentDatas[indexPath.row]
        let cell = indexPath.row == 0 ? createSwiftUICell(with: contentData) : createUIKitCell(with: contentData)
        return cell
    }
}

private extension UIHostingConfigurationExample {
    func createSwiftUICell(with contentData: ContentData) -&gt; UITableViewCell {
        let cell = UITableViewCell()
        cell.contentConfiguration = UIHostingConfiguration {
            CustomSwiftUICell(contentData: contentData)
        }
        return cell
    }

    func createUIKitCell(with contentData: ContentData) -&gt; UITableViewCell {
        let cell = CustomUIKitCell()
        cell.configure(with: contentData)
        return cell
    }
}</code></pre>
<p><img class="aligncenter wp-image-2918 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1gUYuw9jlN3nMNzREHqjgbA.jpg" alt="UIHostingConfiguration Example" width="828" height="1792" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1gUYuw9jlN3nMNzREHqjgbA.jpg 828w, https://ac.appcircle.io/wp-content/uploads/2022/06/1gUYuw9jlN3nMNzREHqjgbA-139x300.jpg 139w, https://ac.appcircle.io/wp-content/uploads/2022/06/1gUYuw9jlN3nMNzREHqjgbA-476x1030.jpg 476w, https://ac.appcircle.io/wp-content/uploads/2022/06/1gUYuw9jlN3nMNzREHqjgbA-768x1662.jpg 768w, https://ac.appcircle.io/wp-content/uploads/2022/06/1gUYuw9jlN3nMNzREHqjgbA-710x1536.jpg 710w, https://ac.appcircle.io/wp-content/uploads/2022/06/1gUYuw9jlN3nMNzREHqjgbA-693x1500.jpg 693w, https://ac.appcircle.io/wp-content/uploads/2022/06/1gUYuw9jlN3nMNzREHqjgbA-326x705.jpg 326w" sizes="(max-width: 828px) 100vw, 828px" /></p>
<h3>UIDevice Deprecations</h3>
<p><a href="https://developer.apple.com/documentation/uikit/uidevice" target="_blank" rel="noopener nofollow">Apple Documentation</a></p>
<pre data-label="UIDevice.swift"><code class="language-swift"> // Synonym for model. Prior to iOS 16, user-assigned device name (e.g. @&quot;My iPhone&quot;).
 // In iOS 16 =&gt; iPhone 13 Pro Max
 // Now it reports device name
 UIDevice().name

 //Now UIDevice().orientation now supported 
 //use preferredInterfaceOrientationForPresentation
 UIDevice().orientation
 UIViewController().preferredInterfaceOrientationForPresentation</code></pre>
<h3>Customizing Sheets</h3>
<p><a href="https://developer.apple.com/documentation/uikit/uisheetpresentationcontroller/detent" target="_blank" rel="noopener nofollow">Apple Documentation </a></p>
<p>Sheets entered our lives with iOS 15. Now receive detents in custom sizes with iOS 16 apart from the predefined detents. Calculated detents shouldn’t account safe area.</p>
<pre data-label="UISheetPresentationController.swift"><code class="language-swift">extension UISheetPresentationController.Detent.Identifier {
    static let developerDefiened = UISheetPresentationController.Detent.Identifier(&quot;developerDefiened&quot;)
}

final class UISheetPresentationControllerExample: UIViewController {

    private func presentBottomSheet() {
        let vc = SFSymbolsExample()
        vc.view.backgroundColor = .white
        guard let sheet = vc.sheetPresentationController else {
            return
        }

       //  sheet.largestUndimmedDetentIdentifier = .developerDefiened - You can add if clear background.

        sheet.detents = [
            .custom(identifier: .developerDefiened) { context in
                context.maximumDetentValue * self.multiplier
            }
        ]
        self.present(vc, animated: true)
    }
}</code></pre>
<p><img class="aligncenter wp-image-2919 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1_8_lWj4BX08viCJsH8Xz2Q.gif" alt="UISheetPresentationController Example" width="600" height="1299" /></p>
<h3>SF Symbols</h3>
<p><a href="https://developer.apple.com/documentation/uikit/uiimage/3955178-init" target="_blank" rel="noopener nofollow">Apple Documentation</a></p>
<p>In iOS 15 and earlier monochrome rendering was used by default but in iOS 16 hierarchical rendering is used. If you want to use monochrome in your application you can continue using monochrome by triggering <strong>UIImage.SymbolConfiguration.preferringMonochrome()</strong>.</p>
<p>Also with iOS 16, Variable Symbols has entered our lives. Now we can create our symbols according to the value of the variable. You can even use with other rendering modes such as palette configuration.</p>
<pre data-label="SFSymbols.swift"><code class="language-swift">@objc private func sliderDidValueChange(_ sender: UISlider) {
    imageView.image = UIImage(
        systemName: &quot;wifi&quot;,
        variableValue: Double(sender.value),
        configuration: UIImage.SymbolConfiguration(paletteColors: [.orange])
    )
}</code></pre>
<p><img class="aligncenter wp-image-2940 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/image.gif" alt="SF Symbols" width="600" height="1299" /></p>
<h3>UICalendarView</h3>
<p><a href="https://developer.apple.com/documentation/uikit/uicalendarview" target="_blank" rel="noopener nofollow">Apple Documentation</a></p>
<p>When you need to use a calendar in your projects, you can now do it standalone with <strong>UICalendarView</strong>. The prominent features and the conveniences it provides to you are as follows:</p>
<ul>
<li>Different types of selection behaviors such as Single or Multiple selection</li>
<li>Setting your desired dates as selectable or non-selectable</li>
<li>To be able to give a custom view as well as various default decorations</li>
<li>UICalendarView represent NSDateComponenets instead of NSDate and gives us more correct date value</li>
</ul>
<p>Let’s take a look at the code side. UICalendarView has all the customizations you need. I have adjusted the configurations that need to be done while initializing as I want but the important thing to mention here is that the <strong>selectionBehavior</strong>determines whether the calendar will be multiselection or single selection. We need to add <strong>UICalendarSelectionMultiDateDelegate</strong> for multi selection, <strong>UICalendarSelectionSingleDateDelegate</strong> for single selection.</p>
<pre data-label="UICalendarView.swift"><code class="language-swift">    private lazy var calendarView: UICalendarView = {
        let calendarView = UICalendarView()
        calendarView.calendar = Calendar(identifier: .gregorian)
        calendarView.timeZone = .autoupdatingCurrent
        calendarView.locale = .current
        calendarView.fontDesign = .default
        calendarView.delegate = self
        calendarView.visibleDateComponents = DateComponents(calendar: Calendar(identifier: .gregorian), year: 2022, month: 6, day: 1)

        // Set singleDateSelection if you want to set for Single Selection
        calendarView.selectionBehavior = multiDateSelection
        calendarView.selectionBehavior = singleDateSelection
        return calendarView
    }()

    private lazy var multiDateSelection: UICalendarSelectionMultiDate = {
        let multiDateSelection = UICalendarSelectionMultiDate(delegate: self)
        return multiDateSelection
    }()

    private lazy var singleDateSelection: UICalendarSelectionSingleDate = {
        let singleDateSelection = UICalendarSelectionSingleDate(delegate: self)
        return singleDateSelection
    }()</code></pre>
<p>In our article, we will look at the part for multiselection, but you can examine the sample project in single selection. Our functions that come with <strong>UICalendarSelectionMultiDateDelegate</strong> allow us to select and determine whether the date of the presented <strong>DateComponents</strong> object is appropriate.</p>
<pre data-label="UICalendarSelectionMultiDateDelegate.swift"><code class="language-swift">extension UICalendarViewExample: UICalendarSelectionMultiDateDelegate {
    func multiDateSelection(_ selection: UICalendarSelectionMultiDate, didDeselectDate dateComponents: DateComponents) {
        selectedDates.removeAll(where: { dateComponents == $0 })
    }

    func multiDateSelection(_ selection: UICalendarSelectionMultiDate, didSelectDate dateComponents: DateComponents) {
        selectedDates.append(dateComponents)
    }

    func multiDateSelection(_ selection: UICalendarSelectionMultiDate, canSelectDate dateComponents: DateComponents) -&gt; Bool {
        dateComponents.isDatePassed()
    }

    func multiDateSelection(_ selection: UICalendarSelectionMultiDate, canDeselectDate dateComponents: DateComponents) -&gt; Bool {
        dateComponents.isDatePassed()
    }
}</code></pre>
<p>The feature that I personally like the most, which allows us to customize our calendars decorators. At this point, we need to add the UICalendarViewDelegate protocol to our Controller so that we can use the decorators. Afterwards, it allows us to use the default decorators in UIKit as well as add custom decorators.</p>
<pre data-label="UICalendarViewDelegate.swift"><code class="language-swift">extension UICalendarViewExample: UICalendarViewDelegate {
    func calendarView(_ calendarView: UICalendarView, decorationFor dateComponents: DateComponents) -&gt; UICalendarView.Decoration? {
        guard let event = eventDays.filter({ $0.dateComponents.isSameDate(with: dateComponents) }).first else {
            return nil
        }

        switch event.decorationType {
        case .none:
            return nil
        case .defaultDecorator:
            return .default(color: .purple, size: .large)
        case .image:
            return .image(.init(systemName: &quot;applelogo&quot;), color: .red)
        case .customView:
            return .customView {
                let label = UILabel()
                label.text = &quot;WWDC&quot;
                label.textColor = event.titleColor
                label.font = .boldSystemFont(ofSize: 10)
                return label
            }
        }
    }
}</code></pre>
<p>That’s it for now with UICalendarView. Tt’s time to review other innovations. You can get more detailed information about its use from the sample project link at the end of our article.</p>
<p><img class="aligncenter wp-image-2921 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1Na0i8BUbsEBaoKPA-fTFOw.gif" alt="UICalendarView Example" width="600" height="1299" /></p>
<h3>Improved Navigation Bars</h3>
<p><a href="https://developer.apple.com/documentation/uikit/uinavigationbardelegate/3987959-navigationbarnstoolbarsection" target="_blank" rel="noopener nofollow">Apple Documentation</a></p>
<p>Now, with iOS 16, two different navigation styles have entered our lives, these are Browser and Editor. It enables us to make our browser-based applications more user-friendly with the Editor style interface and document based and Browser style. Center items instead of TitleView allow us to offer more options to our users, and when there are application windows side by side, they automatically move items that do not fit on the screen into the overflow menu. Additionally Mac Catalyst take advantage improve navigation Bar without code required.</p>
<p><img class="alignnone wp-image-2922 size-large" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1QPqIMUgNltg8otzUuvo2Pw-1030x563.png" alt="Navigation bars" width="1030" height="563" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1QPqIMUgNltg8otzUuvo2Pw-1030x563.png 1030w, https://ac.appcircle.io/wp-content/uploads/2022/06/1QPqIMUgNltg8otzUuvo2Pw-300x164.png 300w, https://ac.appcircle.io/wp-content/uploads/2022/06/1QPqIMUgNltg8otzUuvo2Pw-768x420.png 768w, https://ac.appcircle.io/wp-content/uploads/2022/06/1QPqIMUgNltg8otzUuvo2Pw-705x385.png 705w, https://ac.appcircle.io/wp-content/uploads/2022/06/1QPqIMUgNltg8otzUuvo2Pw.png 1400w" sizes="(max-width: 1030px) 100vw, 1030px" /></p>
<h3>Find And Replace</h3>
<p>Another innovation that comes with iOS 16 is Find and replace. It’s designed to work on text, unlike higher-level in-app searches. It can be activated with only one flag for UIKit views such as UITextView and WKWebView.</p>
<p><img class="alignnone wp-image-2923 size-large" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1D_eL4OLSOJQ_VWdJazeLig-1030x598.png" alt="Find and replace" width="1030" height="598" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1D_eL4OLSOJQ_VWdJazeLig-1030x598.png 1030w, https://ac.appcircle.io/wp-content/uploads/2022/06/1D_eL4OLSOJQ_VWdJazeLig-300x174.png 300w, https://ac.appcircle.io/wp-content/uploads/2022/06/1D_eL4OLSOJQ_VWdJazeLig-768x446.png 768w, https://ac.appcircle.io/wp-content/uploads/2022/06/1D_eL4OLSOJQ_VWdJazeLig-705x409.png 705w, https://ac.appcircle.io/wp-content/uploads/2022/06/1D_eL4OLSOJQ_VWdJazeLig.png 1400w" sizes="(max-width: 1030px) 100vw, 1030px" /></p>
<h3>Edit Menu</h3>
<p><a href="https://developer.apple.com/documentation/uikit/uieditmenuinteraction" target="_blank" rel="noopener nofollow">Apple Documentation</a></p>
<p>Now in iOS 16 edit menu has mature update. On touch intereaction you have new reddesign menu which is more interactive. Also we have more full featured context menu for pointers. To provide this new features you can use with <strong>UIEditMenuInteraction API</strong> as a full replacment of <strong>UIMenuController (Deprecated)</strong>.</p>
<p><img class="alignnone wp-image-2924 size-large" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1qAJBpQqGCAO16-PBhRL9Zg-1030x619.png" alt="Edit menu" width="1030" height="619" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1qAJBpQqGCAO16-PBhRL9Zg-1030x619.png 1030w, https://ac.appcircle.io/wp-content/uploads/2022/06/1qAJBpQqGCAO16-PBhRL9Zg-300x180.png 300w, https://ac.appcircle.io/wp-content/uploads/2022/06/1qAJBpQqGCAO16-PBhRL9Zg-768x461.png 768w, https://ac.appcircle.io/wp-content/uploads/2022/06/1qAJBpQqGCAO16-PBhRL9Zg-705x424.png 705w, https://ac.appcircle.io/wp-content/uploads/2022/06/1qAJBpQqGCAO16-PBhRL9Zg.png 1400w" sizes="(max-width: 1030px) 100vw, 1030px" /></p>
<h3>UIPasteControl</h3>
<p><a href="https://developer.apple.com/documentation/uikit/uipastecontrol" target="_blank" rel="noopener nofollow">Apple Documentation</a></p>
<p>Before iOS 16 in copy-paste operations has banner displayed to user now it’s replaced by an alert. This permission alert is automatically prompted by the system and you can access the content according to the answer. If CustomPasteControl exists you need to replace them with UIPasteControl.</p>
<p><img class="alignnone wp-image-2925 size-large" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1eBIFC2cUMpwVRTdx-dzdHQ-1030x853.png" alt="UI Paste control" width="1030" height="853" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1eBIFC2cUMpwVRTdx-dzdHQ-1030x853.png 1030w, https://ac.appcircle.io/wp-content/uploads/2022/06/1eBIFC2cUMpwVRTdx-dzdHQ-300x249.png 300w, https://ac.appcircle.io/wp-content/uploads/2022/06/1eBIFC2cUMpwVRTdx-dzdHQ-768x636.png 768w, https://ac.appcircle.io/wp-content/uploads/2022/06/1eBIFC2cUMpwVRTdx-dzdHQ-705x584.png 705w, https://ac.appcircle.io/wp-content/uploads/2022/06/1eBIFC2cUMpwVRTdx-dzdHQ.png 1400w" sizes="(max-width: 1030px) 100vw, 1030px" /></p>
<p>That’s all for now what Apple has brought for UIKit with iOS 16 at WWDC. To have more ideas about the incoming innovations, you can check our sample project from the link below. Stay tuned.</p>
<p>GitHub =&gt; <a href="https://github.com/ferhanakkan/WhatsNewInUIKit" target="_blank" rel="noopener nofollow">https://github.com/ferhanakkan/WhatsNewInUIKit</a></p>


Save time, reduce costs and increase developer productivity now.

UIKit got a lot of cool new features at WWDC22. Here's the new features added to UIKit with iOS 16 and how to use them with code samples.

What’s New in UIKit at iOS 16, WWDC22

Related Posts

Secure and Simplify iOS Code Signing with Appcircle

What is Xcode Cloud, and Why Consider Alternatives?

Automate Your Mobile Code Reviews with Danger CI

Deploy iOS and Android Apps to AWS Device Farm and Run Tests

What’s New in UIKit at iOS 16, WWDC22

Related Posts

Subscribe to Appcircle Circle