What’s new in UIKit 🤫

5 min readDec 13, 2023

Hello everyone! I’m excited to explore enhancements and updates to UIKit and learn how to build better iOS, iPadOS, and Mac Catalyst apps. We’ll showcase the latest features and improvements in UIKit, sharing API refinements, performance enhancements, and much more. Be sure to check out my primary article at this link: link 🚀

Before reading this article, try my application, which will help you improve your English. Link 🔗

We often find it tiring to rebuild our application just to see small changes whenever UIKit has new updates. Now, with the use of “Preview” macros, we can generate previews for UIViewController and UIView automatically.

We can create our UIViewController or UIView and wrap it with the ‘Preview’ macro, as you can see in the image above.

import UIKit

class PreviewViewController: UIViewController {
    
    let label: UILabel = {
       let label = UILabel()
        label.text = "Wow🤩"
        label.textColor = .black
        label.font = .boldSystemFont(ofSize: 32)
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .systemBackground
        
        view.addSubview(label)
        
//        label.text = "UIkit Best Framework!!!"
//        label.textColor = .red
//        label.font = .boldSystemFont(ofSize: 20)
        
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

}

// MARK: - UIViewController

//#Preview("PreviewViewController", traits: .defaultLayout, body: {
//    PreviewViewController()
//})

//#Preview("PreviewViewController") {
//    PreviewViewController()
//}

// MARK: - UIView

//#Preview(traits: .defaultLayout, body: {
//    let view = UIView()
//    view.backgroundColor = .green
//    return view
//})

//class MyView: UIView {
//    override init(frame: CGRect) {
//        super.init(frame: frame)
//        
//        backgroundColor = .yellow
//    }
//    
//    required init?(coder: NSCoder) {
//        fatalError("init(coder:) has not been implemented")
//    }
//}
//
//#Preview("MyView", traits: .defaultLayout, body: {
//    MyView()
//})

You can comment out my code and work with Preview to see how great it is! 😊 Also, definitely check the below video👇

New method update in ViewController life cycle

ViewIsAppearing() — viewIsAppearing(): The system calls this method once each time a view controller’s view appears after the viewWillAppear(_:) call. In contrast to viewWillAppear(_:), the system calls this method after it adds the view controller’s view to the view hierarchy, and the superview lays out the view controller’s view. By the time the system calls this method, both the view controller and its view have received updated trait collections and the view has accurate geometry. Calls between viewWillAppear and viewDidAppear methods.

You can see the above image and figure out where it is called and so on.

Animated symbol images 🥶

New universal animations for all symbols.
Unified API across UI frameworks.
Composite layer annotations for custom symbols.

import UIKit

class PreviewViewController: UIViewController {
    let imageView: UIImageView = {
       let imageView = UIImageView(image: UIImage(systemName: "bell.and.waves.left.and.right"))
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .systemBackground
        
        view.addSubview(imageView)
        
        //imageView.addSymbolEffect(.pulse)
        
        //imageView.addSymbolEffect(.scale)
        
        imageView.addSymbolEffect(.variableColor.iterative)
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 2, execute: {
            self.imageView.removeSymbolEffect(ofType: .variableColor)
        })
        
        NSLayoutConstraint.activate([
            imageView.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor),
            imageView.widthAnchor.constraint(equalToConstant: 150),
            imageView.heightAnchor.constraint(equalToConstant: 150)
        ])
    }

}

// MARK: - UIViewController

#Preview("PreviewViewController", traits: .defaultLayout, body: {
    PreviewViewController()
})

You can comment out my code and work with animation to see how great it is! 😊 Also, definitely check the below video👇

Setting up UIContentUnavailableConfiguration 🚀

Now, you can easily display an empty state to the user and achieve a more user-friendly interface.

The UIContentUnavailableConfiguration offers us a few opportunities. For example, empty, loading, and search.

override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .systemBackground
        
        var config = UIContentUnavailableConfiguration.empty()
        // var config = UIContentUnavailableConfiguration.loading()
        
        config.image = UIImage(systemName: "star.fill")
        config.text = "No Favorites"
        config.secondaryText = "Your favorite translation will appear here."
        
        self.contentUnavailableConfiguration = config
}

Dynamic line-height adjustments 🔥

Some fonts include ascenders and descenders, extending beyond these lines. Ascenders rise above the x-height, and descenders hang below the baseline. In languages like Arabic, Hindi, and Thai, these may require more vertical space, potentially causing issues like collisions or clipping.

To address this, we introduced a dynamic line-height adjustment feature, ensuring UILabels adapt their line-heights for optimal legibility. iOS 17 enhances line-breaking behavior for languages such as Chinese, German, Japanese, and Korean, applying distinct rules based on the text style used.