10 little UIKit ideas it’s best to know

Customized UIColor with darkish mode assist

Darkish mode and lightweight mode should not comply with the very same design patterns, typically you want to make use of a border when your app is in mild mode, however in darkish mode you may need to disguise the additional line.

One potential answer is to outline a customized UIColor based mostly the given UITraitCollection. You’ll be able to verify the userInterfaceStyle property of a trait to verify for darkish look type.

extension UIColor {
    static var borderColor: UIColor {
        .init { (trait: UITraitCollection) -> UIColor in
            if trait.userInterfaceStyle == .darkish {
                return UIColor.clear
            }
            return UIColor.systemGray4
        }
    }
}

Based mostly on this situation you possibly can simply return totally different colours each for mild and darkish mode. You’ll be able to create your individual set of static colour variables by extending the UIColor object. It is a will need to have little trick if you’re planning to assist darkish mode and also you’d prefer to create customized colours. ?

Observing trait assortment modifications

This subsequent one can also be associated to darkish mode assist, typically you’d prefer to detect look modifications of the person interface and that is the place the traitCollectionDidChange perform will be useful. It is accessible on views, controllers and cells too, so it is fairly an common answer.

class MyCustomView: UIView {
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        guard traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) else {
            return
        }
        layer.borderColor = UIColor.borderColor.cgColor
    }
}

For instance, inside this perform you possibly can verify if the trait assortment has a distinct look type and you may replace your CoreGraphics layers in keeping with that. The CoreGraphics framework is a low stage software and in the event you work with layers and colours it’s a must to manually replace them if it involves darkish mode assist, however the traitCollectionDidChange technique might help you numerous. ?

UIButton with context menus

Creating buttons obtained lots simpler with iOS 15, however do you know you can additionally use a button to show a context menu? It is very straightforward to current a UIMenu you simply must set the menu and the showsMenuAsPrimaryAction property of the button to true.

import UIKit

class TestViewController: UIViewController {
    
    weak var button: UIButton!

    override func loadView() {
        tremendous.loadView()
     
        let button = UIButton(body: .zero)
        button.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(button)
        self.button = button

        NSLayoutConstraint.activate([
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            button.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            button.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            button.heightAnchor.constraint(equalToConstant: 44),
        ])
    }

    override func viewDidLoad() {
        tremendous.viewDidLoad()

        button.setTitle("Open menu", for: .regular)
        button.setTitleColor(.systemGreen, for: .regular)
        button.menu = getContextMenu()
        button.showsMenuAsPrimaryAction = true
    }

    func getContextMenu() -> UIMenu {
        .init(title: "Menu",
              youngsters: [
                UIAction(title: "Edit", image: UIImage(systemName: "square.and.pencil")) { _ in
                    print("edit button clicked")
                },
                UIAction(title: "Delete", image: UIImage(systemName: "trash"), attributes: .destructive) { _ in
                    print("delete action")
                },
              ])
    }
    
}

This fashion the UIButton will act as a menu button, you possibly can assign numerous actions to your menu merchandise. I imagine this API is very useful in some circumstances, these days I choose to make use of context menus as an alternative of swipe-to-x-y actions, as a result of it’s kind of extra handy for the person if we visually present them (often with 3 dots) that there are extra actions accessible on a given UI component. ?

Do not be afraid of subclassing views

UIKit is an OOP framework and I extremely suggest to subclass customized views as an alternative of multi-line view configuration code snippets inside your view controller. The earlier code snippet is a good instance for the other, so let’s repair that actual fast.

import UIKit

class MenuButton: UIButton {

    @accessible(*, unavailable)
    override init(body: CGRect) {
        tremendous.init(body: body)
        
        self.initialize()
    }

    @accessible(*, unavailable)
    required public init?(coder: NSCoder) {
        tremendous.init(coder: coder)
        
        self.initialize()
    }
   
    public init() {
        tremendous.init(body: .zero)
        
        self.initialize()
    }
    
    open func initialize() {
        self.translatesAutoresizingMaskIntoConstraints = false

        setTitle("Open menu", for: .regular)
        setTitleColor(.systemGreen, for: .regular)
        menu = getContextMenu()
        showsMenuAsPrimaryAction = true
    }
    
    func getContextMenu() -> UIMenu {
        .init(title: "Menu",
              youngsters: [
                UIAction(title: "Edit", image: UIImage(systemName: "square.and.pencil")) { _ in
                    print("edit button clicked")
                },
                UIAction(title: "Delete", image: UIImage(systemName: "trash"), attributes: .destructive) { _ in
                    print("delete action")
                },
              ])
    }

    func layoutConstraints(in view: UIView) -> [NSLayoutConstraint] {
        [
            centerYAnchor.constraint(equalTo: view.centerYAnchor),
            leadingAnchor.constraint(equalTo: view.leadingAnchor),
            trailingAnchor.constraint(equalTo: view.trailingAnchor),
            heightAnchor.constraint(equalToConstant: 44),
        ]
    }
}


class TestViewController: ViewController {
    
    weak var button: MenuButton!

    override func loadView() {
        tremendous.loadView()
     
        let button = MenuButton()
        view.addSubview(button)
        self.button = button
        NSLayoutConstraint.activate(button.layoutConstraints(in: view))
    }

    override func viewDidLoad() {
        tremendous.viewDidLoad()
        
    }
}

As you possibly can see the code contained in the view controller is closely decreased and many of the button configuration associated logic is now encapsulated contained in the MenuButton subclass. This strategy is nice as a result of you possibly can focus much less on view configuration and extra on your corporation logic contained in the view controller. It’s going to additionally make it easier to to suppose in reusable elements.

One extra be aware right here is that I are likely to create my interfaces from code that is why I mark the pointless init strategies with the @accessible(*, unavailable) flag so different individuals in my workforce cannot name them by chance, however that is only a private desire. ?

All the time massive navigation title

I do not learn about you, however for me all of the apps have glitches if it involves the massive title function within the navigation bar. For private tasks I’ve obtained sick and uninterested in this and I merely pressure the massive title show mode. It is comparatively easy, here is the right way to do it.

import UIKit

class TestNavigationController: UINavigationController {

    override init(rootViewController: UIViewController) {
        tremendous.init(rootViewController: rootViewController)
        
        initialize()
    }

    @accessible(*, unavailable)
    required init?(coder aDecoder: NSCoder) {
        tremendous.init(coder: aDecoder)

        initialize()
    }
    
    open func initialize() {
        navigationBar.prefersLargeTitles = true
        navigationItem.largeTitleDisplayMode = .all the time
        
        
        navigationBar.tintColor = .systemGreen
        
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.backgroundColor = .systemBackground
        navigationBar.standardAppearance = navBarAppearance
        navigationBar.scrollEdgeAppearance = navBarAppearance
    }
}

class TestViewController: UIViewController {
    
    override func loadView() {
        tremendous.loadView()
        
        
        view.addSubview(UIView(body: .zero))
        
        
    }
}

let controller = TestNavigationController(rootViewController: TestViewController())

You simply must set two properties (you possibly can subclass UINavigationController or set these inside your view controller, however I choose subclassing) plus it’s a must to add an empty view to your view hierarchy to forestall collapsing if you’re planning to make use of a UIScrollView, UITableView or UICollectionView contained in the view controller.

Since this tip can also be based mostly on my private desire, I’ve additionally included a number of extra customization choices within the snippet. In case you check out the initialize technique you possibly can see the right way to change the tint colour and the background colour of the navigation bar. ?

Customized separators for navigation and tab bars

Since many apps choose to have a custom-made navigation bar and tab bar look it is fairly a standard follow when it’s a must to additionally add a separator line to tell apart person interface components a bit extra. That is how one can remedy it by utilizing a single bar separator class.

import UIKit 

class BarSeparator: UIView {
    
    let peak: CGFloat = 0.3

    init() {
        tremendous.init(body: CGRect(x: 0, y: 0, width: 0, peak: peak))
        
        translatesAutoresizingMaskIntoConstraints = false
        backgroundColor = .systemGray4
    }
    
    @accessible(*, unavailable)
    required init?(coder: NSCoder) {
        tremendous.init(coder: coder)
    }
    
    func layoutConstraints(for navigationBar: UINavigationBar) -> [NSLayoutConstraint] {
        [
            widthAnchor.constraint(equalTo: navigationBar.widthAnchor),
            heightAnchor.constraint(equalToConstant: CGFloat(height)),
            centerXAnchor.constraint(equalTo: navigationBar.centerXAnchor),
            topAnchor.constraint(equalTo: navigationBar.bottomAnchor),
        ]
    }
    
    func layoutConstraints(for tabBar: UITabBar) -> [NSLayoutConstraint] {
        [
            widthAnchor.constraint(equalTo: tabBar.widthAnchor),
            heightAnchor.constraint(equalToConstant: CGFloat(height)),
            centerXAnchor.constraint(equalTo: tabBar.centerXAnchor),
            topAnchor.constraint(equalTo: tabBar.topAnchor),
        ]
    }
}

class MyNavigationController: UINavigationController {
    
   override func viewDidLoad() {
        tremendous.viewDidLoad()
        
        let separator = BarSeparator()
        navigationBar.addSubview(separator)
        NSLayoutConstraint.activate(separator.layoutConstraints(for: navigationBar))
    }
}

class MyTabBarController: UITabBarController {
    
    override func viewDidLoad() {
        tremendous.viewDidLoad()
        
        let separator = BarSeparator()
        tabBar.addSubview(separator)
        NSLayoutConstraint.activate(separator.layoutConstraints(for: tabBar))
    }   
}

This fashion you possibly can reuse the BarSeparator element so as to add a line to the underside of a navigation bar and to the highest of a tab bar. This snippet follows the very same ideas that I confirmed you earlier than, so you need to be acquainted with the subclassing ideas by now. ?

Customized tab bar gadgets

I struggled rather a lot with tab bar merchandise icon alignment, however this the way in which I can simply present / disguise the title and align the icons to the middle of the bar if there are not any labels.

import UIKit

class MyTabBarItem: UITabBarItem {
    
    override var title: String? {
        get { hideTitle ? nil : tremendous.title }
        set { tremendous.title = newValue }
    }
        
    personal var hideTitle: Bool {
        true
    }

    personal func offset(_ picture: UIImage?) -> UIImage? {
        if hideTitle {
            return picture?.withBaselineOffset(fromBottom: 12)
        }
        return picture
    }
    
    
    
    public comfort init(title: String?, picture: UIImage?, selectedImage: UIImage?) {
        self.init()

        self.title = title
        self.picture = offset(picture)
        self.selectedImage = offset(selectedImage)
    }

    override init() {
        tremendous.init()
    }

    @accessible(*, unavailable)
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been applied")
    }
}


tabBarItem = MyTabBarItem(title: "Residence", picture: UIImage(systemName: "home"), selectedImage: nil)

I would additionally like to say that SF Symbols are wonderful. In case you are not utilizing these sort of icons simply but I extremely suggest to have a look. Apple made a very nice job with this assortment, there are such a lot of beautiful icons that you should utilize to visually enrich your app, so do not miss out. ?

loadView vs viewDidLoad

Lengthy story brief, it’s best to all the time instantiate and place constraints to your views contained in the loadView technique and configure your views contained in the viewDidLoad perform.

I all the time use implicitly unwrapped weak non-obligatory variables for customized views, because the addSubview perform will create a powerful reference to the view when it’s added to the view hierarchy. We do not need to have retain cycles, proper? That’d be actual unhealthy for our utility. ?

import UIKit

class MyCollectionViewController: ViewController {
    
    weak var assortment: UICollectionView!

    override func loadView() {
        tremendous.loadView()
        
        view.addSubview(UIView(body: .zero))
        
        let assortment = UICollectionView(body: .zero, collectionViewLayout: UICollectionViewFlowLayout())
        assortment.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(assortment)
        self.assortment = assortment
        NSLayoutConstraint.activate([
            
        ])
    }
    
    override func viewDidLoad() {
        tremendous.viewDidLoad()
        
        assortment.backgroundColor = .systemBackground
        assortment.alwaysBounceVertical = true
        assortment.dragInteractionEnabled = true
        assortment.dragDelegate = self
        assortment.dropDelegate = self

        if let flowLayout = assortment.collectionViewLayout as? UICollectionViewFlowLayout {
            flowLayout.sectionHeadersPinToVisibleBounds = true
        }
        
        assortment.register(MyCell.self,
                            forCellWithReuseIdentifier: MyCell.identifier)
    }

Anyway, I would go together with a customized subclass for the gathering view right here as properly and perhaps outline a configure technique then name that one as an alternative of inserting the whole lot on to the controller. The choice is all the time up-to-you, I am simply making an attempt to point out you the some potential options. ?

Stack views & auto-layout anchors

Benefit from stack views and auto format anchors as a lot as potential. If you’re going to create person interfaces programmatically in Swift with the assistance of UIKit, then it will be a vital talent to grasp these methods in any other case you are going to battle lots.

I have already got a tutorial about utilizing auto format programmatically and one other one about mastering auto-layout anchors, they had been printed a number of years in the past, however the ideas are nonetheless legitimate and the code nonetheless works. I even have yet another article that it’s best to learn if you wish to be taught about constructing kinds utilizing stack views. Studying these sort of issues helped me lots to create complicated screens hassle-free. I am additionally utilizing yet another “greatest follow” to create assortment views.

When SwiftUI got here out I had the sensation that finally I would do the identical with UIKit, however in fact Apple had the required tooling to assist the framework with view builders and property wrappers. Now that we have now SwiftUI I am nonetheless not utilizing it as a result of I really feel prefer it lacks numerous options even in 2022. I do know it is nice and I’ve created a number of prototypes for screens utilizing it, but when it involves a fancy utility my intestine tells me that I ought to nonetheless go together with UIKit. ?

Create a reusable elements library

My remaining recommendation on this tutorial is that it’s best to construct a customized Swift package deal and transfer all of your elements there. Possibly for the primary time it will eat numerous time however if you’re engaged on a number of tasks it should pace up improvement course of in your second, third, and many others. app.

You’ll be able to transfer all of your customized base courses right into a separate library and create particular ones in your utility. You simply must mark them open, you should utilize the supply API to handle what can be utilized and what ought to be marked as unavailable.

I’ve numerous tutorials in regards to the Swift Package deal Supervisor on my weblog, this can be a nice method to get acquainted with it and you can begin constructing your individual library step-by-step. ?