Forem: Konstantin Semianov

Building a SwiftUI LoadingButtonStyle

Konstantin Semianov — Tue, 03 Sep 2024 17:28:05 +0000

Cover photo by Ashim D’Silva on Unsplash

Intro

When creating an application, quite often clicking a button means triggering some asynchronous action. If this action is non-blocking for your UX, you might consider making an optimistic update. For example, when you tap a like button, you just let the app behave as if the request has already been completed successfully and increment the like counter, but roll-back if it actually fails later. However, this is not always possible. Consider user authentication. A user enters credentials and the app has to wait until the server responds. The app should always provide feedback on the loading process, otherwise, a user might think that something broke, try to tap the button multiple times or even abandon the app altogether. The simplest way to communicate the loading process is to show a progress indicator instead/alongside the button label. Let's explore how to do it with the ButtonStyle API in SwiftUI.

Demo

Let's start with the simplest SwiftUI button:

import SwiftUI

#Preview {
    Button("Click me") { print("Clicked") }
}

Create a new ButtonStyle and implement its only requirement makeBody function:

struct LoadingButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
    }
}

#Preview {
    Button("Click me") { print("Clicked") }
        .buttonStyle(LoadingButtonStyle())
}

At the moment, our custom button style is not doing much, and even removes the default behavior with foreground style, pressed state and disabled animation. Let's bring it closer to the original:

struct LoadingButtonStyle: ButtonStyle {
    @Environment(\.isEnabled) private var isEnabled

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundStyle(Color.accentColor)
            .opacity(configuration.isPressed ? 0.2 : 1)
            .animation(.default, value: isEnabled)
    }
}

Now, we need to add a boolean flag to our style to indicate whether it is currently in the loading state:

struct LoadingButtonStyle: ButtonStyle {
    @Environment(\.isEnabled) private var isEnabled
    private var isLoading: Bool

    init(isLoading: Bool) {
        self.isLoading = isLoading
    }

    func makeBody(configuration: Configuration) -> some View {
        HStack(spacing: 8) {
            if isLoading {
                ProgressView()
            }

            configuration.label
        }
        .foregroundStyle(Color.accentColor)
        .opacity(configuration.isPressed ? 0.2 : 1)
        .animation(.default, value: isEnabled)
        .animation(.default, value: isLoading)
    }
}

It is also possible to substitute the original label with the ProgressView if that's what you wish. Just replace the HStack with this:

ZStack {
    ProgressView().opacity(isLoading ? 1 : 0)

    configuration.label.opacity(isLoading ? 0 : 1)
}

Now, how do we preview this? Let's create a function that imitates some asynchronous work that lasts for 2 seconds:

private func performWork() async {
    try? await Task.sleep(nanoseconds: 2_000_000_000)
}

Now let's define a container for preview purposes and see what we get:

private struct PreviewContainer: View {
    @State private var loadingTask: Task<Void, Never>?
    private var isLoading: Bool { loadingTask != nil }

    var body: some View {
        Button("Click me") {
            guard loadingTask == nil else {
                return
            }

            loadingTask = Task {
                await performWork()

                await MainActor.run {
                    loadingTask = nil
                }
            }
        }
        .buttonStyle(LoadingButtonStyle(isLoading: isLoading))
        .disabled(isLoading)
        .onDisappear {
            loadingTask?.cancel()
            loadingTask = nil
        }
    }
}

#Preview {
    PreviewContainer()
}

Note that we save the asynchronous action to our state and cancel the task if the button happens to disappear before the asynchronous operation completes. This will help avoid an undefined behavior when a user already navigated away from the screen and then the operation completes. Furthermore, when the async operation is in progress, it’s important to ensure that additional taps on the button do not trigger multiple concurrent tasks, leading to a race condition. Here guard loadingTask == nil and .disabled(isLoading) help with that.

It is also possible to manage more states for the button. For example, normal, loading, success and failure. For this you'd just create an enum for all your states and change isLoading: Bool variable to something like buttonState: ButtonState and adjust makeBody accordingly. But we'll leave this as an exercise to the reader.

Final thoughts

We've built our LoadingButtonStyle as a reusable component for handling button asynchronous state. It's important to resist the allure of just creating a separate view for every little thing instead of making a reusable component for your design system. This is crucial for ensuring design consistency across your app, and it will help you iterate on your codebase more quickly.

Getting started with Swift-C++ interop

Konstantin Semianov — Wed, 14 Dec 2022 15:20:17 +0000

Photo by Pablo García Saldaña on Unsplash.

Playing around with Swift toolchain experimental features.

Intro

Swift is a very comfortable language. It has some quirks and a learning curve, but ultimately you can ship production-ready code with it pretty fast. However, sometimes you have performance-critical sections and Swift just doesn't cut it. In such cases, a popular choice is using C++. And the question arises "how do I call this C++ func from Swift"? Usually, you have to write an Objective-C wrapper that will act as a public interface for your C++ code. And Swift toolchain can import Objective-C declarations to Swift. The main limitation is that you cannot use C++ classes in Objective-C, only simple POD structs.

We'll write a Sieve of Eratosthenes algorithm with both C++ and Swift. Then learn how to enable C++ interop, call C++ code from Swift, and compare implementation performance. Keep in mind that the feature is experimental and subject to changes. This publication compiles on Xcode Version 14.2

Algorithm

The Sieve of Eratosthenes finds all prime numbers less than or equal N. Prime number is an integer that's divisible only by itself and 1. The algorithm creates a boolean array to indicate if each number is prime. And progressively iterates over them, marking all multiples as not prime.

Here is the Swift implementation.

// primes.swift

func primes(n: Int) -> [Int] {
    var isPrime = [Bool](repeating: true, count: n + 1)

    for value in stride(from: 2, to: n + 1, by: 1) where isPrime[value] {
        if value * value > n { break }

        for multiple in stride(from: value * 2, to: n + 1, by: value) {
            isPrime[multiple] = false
        }
    }

    var result = [Int]()

    for value in stride(from: 2, to: n + 1, by: 1) where isPrime[value] {
        result.append(value)
    }

    return result
}

For C++ we need a header and a source file. Note, that we typedef to have a cleaner name for referring to std::vector<long>.

// primes.hpp

#include <vector>

typedef std::vector<long> VectorLong;

VectorLong primes(const long &n);

// primes.cpp
#include <algorithm>

#include "primes.hpp"

VectorLong primes(const long &n) {
    std::vector<char> isPrime(n + 1); // faster than std::vector<bool>
    std::fill(isPrime.begin(), isPrime.end(), true);

    for (long value = 2; value * value <= n; ++value) {
        if (!isPrime[value]) { continue; }

        for (long multiple = value * 2; multiple <= n; multiple += value) {
            isPrime[multiple] = false;
        }
    }

    VectorLong result;

    for (long value = 2; value <= n; ++value) {
        if (!isPrime[value]) { continue; }

        result.push_back(value);
    }

    return result;
}

Project structure

We'll do a Swift Package with two separate targets to hold our Swift and C++ code. To import C++ code from Swift, we need a modulemap.

// module.modulemap

module CXX {
    header "CXX.hpp"
    requires cplusplus
}

// CXX.hpp

#include "primes.hpp"

And do not forget to pass -enable-experimental-cxx-interop to the Swift target in Package.swift.

// swift-tools-version: 5.7

import PackageDescription

let package = Package(
    name: "SwiftCXXInteropExample",
    platforms: [
        .macOS(.v12),
    ],
    products: [
        .library(name: "CXX", targets: ["CXX"]),
        .executable(name: "CLI", targets: ["CLI"])
    ],
    dependencies: [],
    targets: [
        .target(name: "CXX"),
        .executableTarget(
            name: "CLI",
            dependencies: ["CXX"],
            swiftSettings: [.unsafeFlags(["-enable-experimental-cxx-interop"])]
        )
    ]
)

See the doc from Apple for more info on how to enable C++ interop.

Trying out

It's much easier to use our VectorLong from Swift with conformance to RandomAccessCollection and, happily, it's really easy to do.

import CXX

extension VectorLong: RandomAccessCollection {
    public var startIndex: Int { 0 }
    public var endIndex: Int { size() }
}

Now we can call our C++ function from Swift and print the results to the console.

let cxxVector = primes(100)
let swiftArray = [Int](cxxVector)
print(swiftArray)

Let's see if our C++ implementation actually performs faster.

let signposter = OSSignposter()

let count = 100
let n = 10_000_000

for _ in 0..<count {
    let state = signposter.beginInterval("C++")
    let _ = primes(n)
    signposter.endInterval("C++", state)
}

for _ in 0..<count {
    let state = signposter.beginInterval("Swift")
    let _ = primes(n: n)
    signposter.endInterval("Swift", state)
}

Slightly faster with an average duration of 26 ms vs. 28 ms for Swift.

Final thoughts

We were able to directly use std::vector in Swift. I personally haven't found a convenient way to round-trip between Swift Map and std::map, Set and std::set. Nevertheless, C++ interop is rapidly developing and the future seems bright.

CppInteroperability folder in the Swift repo contains more information on interop features, limitations and plans.

See the full code at https://github.com/ksemianov/SwiftCXXInteropExample

Building a hexagonal grid with the SwiftUI Layout protocol

Konstantin Semianov — Fri, 09 Dec 2022 07:20:55 +0000

The component we are about to make is available as a Swift Package.

Intro

SwiftUI is really good at building a hierarchy of rectangular frames. With the recent addition of Grid it became even better. However, today we want to build a crazy hexagonal layout. Of course, there is no dedicated layout type for this. So we build our own with the Layout protocol!

Drawing one hexagon

Let's first define a shape for our grid cell. For this, we need to implement func path(in rect: CGRect) -> Path to satisfy Shape protocol requirement. We basically need to find the largest size of a hexagon that fits inside the rect, compute its vertices and draw lines between them. Here is the complete code to do a flat-top hexagon.

struct Hexagon: Shape {
    static let aspectRatio: CGFloat = 2 / sqrt(3)

    func path(in rect: CGRect) -> Path {
        var path = Path()

        let center = CGPoint(x: rect.midX, y: rect.midY)
        let width = min(rect.width, rect.height * Self.aspectRatio)
        let size = width / 2
        let corners = (0..<6)
            .map {
                let angle = -CGFloat.pi / 3 * CGFloat($0)
                let dx = size * cos(angle)
                let dy = size * sin(angle)

                return CGPoint(x: center.x + dx, y: center.y + dy)
            }

        path.move(to: corners[0])
        corners[1..<6].forEach { point in
            path.addLine(to: point)
        }

        path.closeSubpath()

        return path
    }
}

Coordinates

We'll need to place our hexagons somewhere. And for that, we need a coordinate system. The easiest to understand is the offset coordinate system, but other coordinates could be used with the same success (e.g. axial coordinates). We'll take an odd-q variation of the offset coordinates. It basically just defines cells as pairs of rows and columns. And each odd column is shifted by 1/2 down. We will need to provide these coordinates to the layout system and it's done by creating a key conforming to LayoutValueKey.

struct OffsetCoordinate: Hashable {
    var row: Int
    var col: Int
}

protocol OffsetCoordinateProviding {
    var offsetCoordinate: OffsetCoordinate { get }
}

struct OffsetCoordinateLayoutValueKey: LayoutValueKey {
    static let defaultValue: OffsetCoordinate? = nil
}

Layout protocol

The protocol has 2 requirements:

sizeThatFits controls how much space the view needs
placeSubviews controls the placement of subviews within the available space

And optionally:

makeCache to avoid extra computations

Caching

Let's define our cached data for the layout protocol. First, we'll need to know the top left coordinates of the grid to correctly calculate offsets from the bounds' top left corner. Then we'll need to know how big is the grid in terms of full rows and columns of cells.

struct CacheData {
    let offsetX: Int
    let offsetY: Int
    let width: CGFloat
    let height: CGFloat
}

func makeCache(subviews: Subviews) -> CacheData? {
    let coordinates = subviews.compactMap { $0[OffsetCoordinateLayoutValueKey.self] }

    if coordinates.isEmpty { return nil }

    let offsetX = coordinates.map { $0.col }.min()!
    let offsetY = coordinates.map { $0.row }.min()!

    let coordinatesX = coordinates.map { CGFloat($0.col) }
    let minX: CGFloat = coordinatesX.min()!
    let maxX: CGFloat = coordinatesX.max()!
    let width = maxX - minX + 4 / 3

    let coordinatesY = coordinates.map { CGFloat($0.row) + 1 / 2 * CGFloat($0.col & 1) }
    let minY: CGFloat = coordinatesY.min()!
    let maxY: CGFloat = coordinatesY.max()!
    let height = maxY - minY + 1

    return CacheData(offsetX: offsetX, offsetY: offsetY, width: width, height: height)
}

`sizeThatFits`

This one is pretty straightforward. We just need to take the width of the hex cell such that it fits inside the proposal. And then multiply it by the corresponding width and height of the grid in terms of cell width.

func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout CacheData?) -> CGSize {
    guard let cache else { return .zero }

    let size = proposal.replacingUnspecifiedDimensions()
    let step = min(size.width / cache.width, size.height / cache.height / Hexagon.aspectRatio)

    return CGSize(width: step * cache.width, height: step * cache.height * Hexagon.aspectRatio)
}

`placeSubviews`

Here we compute the step between subsequent hexagons. And then placing each hexagon at its corresponding place with the correct size.

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout CacheData?) {
    guard let cache else { return }

    let size = proposal.replacingUnspecifiedDimensions()
    let step = min(size.width / cache.width, size.height / cache.height / Hexagon.aspectRatio)
    let width = step * 4 / 3
    let proposal = ProposedViewSize(width: width, height: width / Hexagon.aspectRatio)
    let x = width / 2 + bounds.minX
    let y = width / Hexagon.aspectRatio / 2 + bounds.minY

    for subview in subviews {
        guard let coord = subview[OffsetCoordinateLayoutValueKey.self] else { continue }

        let dx: CGFloat = step * CGFloat(coord.col - cache.offsetX)
        let dy: CGFloat = step * Hexagon.aspectRatio * (CGFloat(coord.row - cache.offsetY) + 1 / 2 * CGFloat(coord.col & 1))
        let point = CGPoint(x: x + dx, y: y + dy)

        subview.place(at: point, anchor: .center, proposal: proposal)
    }
}

HexGrid

At this point, the HexLayout is already usable. However, the rule that all subviews should have a coordinate is not enforced. So it's better to do a thin wrapper that will provide this compile-time guarantee to component consumers. While at it, we'll clip the subviews with the shape of the hexagon to make the call site even cleaner.

struct HexGrid<Data, ID, Content>: View where Data: RandomAccessCollection, Data.Element: OffsetCoordinateProviding, ID: Hashable, Content: View {
    let data: Data
    let id: KeyPath<Data.Element, ID>
    let content: (Data.Element) -> Content

    init(_ data: Data,
         id: KeyPath<Data.Element, ID>,
         @ViewBuilder content: @escaping (Data.Element) -> Content) {
        self.data = data
        self.id = id
        self.content = content
    }

    var body: some View {
        HexLayout {
            ForEach(data, id: id) { element in
                content(element)
                    .clipShape(Hexagon())
                    .layoutValue(key: OffsetCoordinateLayoutValueKey.self,
                                 value: element.offsetCoordinate)
            }
        }
    }
}

extension HexGrid where ID == Data.Element.ID, Data.Element: Identifiable {
    init(_ data: Data,
         @ViewBuilder content: @escaping (Data.Element) -> Content) {
        self.init(data, id: \.id, content: content)
    }
}

Usage

Now we can finally define our data model and use the ready component to get the image from the beginning of the article:

struct HexCell: Identifiable, OffsetCoordinateProviding {
    var id: Int { offsetCoordinate.hashValue }
    var offsetCoordinate: OffsetCoordinate
    var colorName: String
}

let cells: [HexCell] = [
    .init(offsetCoordinate: .init(row: 0, col: 0), colorName: "color1"),
    .init(offsetCoordinate: .init(row: 0, col: 1), colorName: "color2"),
    .init(offsetCoordinate: .init(row: 0, col: 2), colorName: "color3"),
    .init(offsetCoordinate: .init(row: 1, col: 0), colorName: "color4"),
    .init(offsetCoordinate: .init(row: 1, col: 1), colorName: "color5")
]

HexGrid(cells) { cell in
    Color(cell.colorName)
}

But you can put images or literally any view into subviews! Just be aware that the layout assumes subviews fill the contents of the hexagon cell.

HexGrid(cells) { cell in
    AsyncImage(url: cell.url) { image in
        image.resizable().aspectRatio(contentMode: .fill)
    } placeholder: {
        ProgressView().frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Based on public domain photos downloaded from PIXNIO.

Final thoughts

We've learned how to provide values to LayoutSubview proxy and build a fun non-trivial layout.

For more information on hexagonal grids see this fantastic guide

See the full code at https://github.com/ksemianov/HexGrid

Building a wrapping HStack with the SwiftUI Layout protocol

Konstantin Semianov — Wed, 07 Dec 2022 07:40:15 +0000

The component we are about to make is available as a Swift Package.

Intro

It's Monday morning and your project manager gives you a task to add a list of tags to the product details page. You say "easy" and whip up the following in 10 minutes.

HStack {
    ForEach(tags) {
        TagView(text: $0.text)
    }

    Spacer(minLength: .zero)
}.padding(.horizontal)

After the QA team takes a look they report a bug when there are many tags.

You go ahead and make it horizontally scrollable.

ScrollView(.horizontal, showsIndicators: false) {
    LazyHStack {
        ForEach(tags) {
            TagView(text: $0.text)
        }
    }.padding(.horizontal)
}.frame(height: 56)

The disadvantage is that you have to know the height of tag views in advance.

The design team asks to wrap tags on subsequent lines when they do not fit the view width. And now your "easy" turned into "hard". One of your colleagues suggests wrapping a custom UICollectionView with a UIViewRepresentable. And another to try the new Layout protocol. You decide to go with Layout...

Layout protocol

The protocol has 2 requirements:

sizeThatFits controls how much space the view needs
placeSubviews controls the placement of subviews within the available space

Note, that sizeThatFits may be called multiple times during the layout process. It will try different size proposals. At the time of writing, on iOS it will normally just try to pass all available space. On macOS it will also try a .zero size proposal so that the minimum window size may be computed. Thus, to support macOS, we'll need to compute the minimal size of the view.

Approach outline

We'll take the minimum size to be the maximum size of subviews given a .zero proposal. Whenever the proposal is less than the minimum size, we'll just return the minimum size early.

func minSize(subviews: Subviews) -> CGSize {
    subviews
        .map { $0.sizeThatFits(.zero) }
        .reduce(CGSize.zero) { CGSize(width: max($0.width, $1.width), height: max($0.height, $1.height)) }
}

To compute both size and placements we'll need to arrange the subviews into rows first. The main idea is to iterate over subviews and increment X coordinate by subview's width + horizontal spacing if it will still fit into container width, or go to the next row, otherwise. This will allow us to get X offsets for all subviews. Then we'll iterate over rows and increment Y coordinate by max height subview's height + vertical spacing. This will allow us to get Y offsets for all rows.

Once we have the row arrangements, the width will fill all the available space.

let width = proposal.width ?? rows.map { $0.width }.reduce(.zero) { max($0, $1) }

And the height will be the vertical offset of the last row + its height.

var height: CGFloat = .zero
if let lastRow = rows.last {
    height = lastRow.yOffset + lastRow.height
}

The subviews will be placed at their corresponding offsets + bounds min point.

for row in rows {
    for element in row.elements {
        let x: CGFloat = element.xOffset
        let y: CGFloat = row.yOffset
        let point = CGPoint(x: x + bounds.minX, y: y + bounds.minY)

        subviews[element.index].place(at: point, anchor: .topLeading, proposal: proposal)
    }
}

Row arrangement

For each row, we'll need to know subview indices, sizes and X offsets. Also, overall row Y offset, row width and height.

struct Row {
    var elements: [(index: Int, size: CGSize, xOffset: CGFloat)] = []
    var yOffset: CGFloat = .zero
    var width: CGFloat = .zero
    var height: CGFloat = .zero
}

func arrangeRows(proposal: ProposedViewSize,
                         subviews: Subviews,
                         cache: inout ()) -> [Row] {
    let minSize = minSize(subviews: subviews)
    if minSize.width > proposal.width ?? .infinity,
       minSize.height > proposal.height ?? .infinity {
        return []
    }

    let sizes = subviews.map { $0.sizeThatFits(proposal) }

    var currentX = CGFloat.zero
    var currentRow = Row()
    var rows = [Row]()

    for index in subviews.indices {
        var spacing = CGFloat.zero
        if let previousIndex = currentRow.elements.last?.index {
            spacing = horizontalSpacing(subviews[previousIndex], subviews[index])
        }

        let size = sizes[index]

        if currentX + size.width + spacing > proposal.width ?? .infinity,
           !currentRow.elements.isEmpty {
            currentRow.width = currentX
            rows.append(currentRow)
            currentRow = Row()
            spacing = .zero
            currentX = .zero
        }

        currentRow.elements.append((index, sizes[index], currentX + spacing))
        currentX += size.width + spacing
    }

    currentRow.width = currentX
    rows.append(currentRow)

    var currentY = CGFloat.zero
    var previousMaxHeightIndex: Int?

    for index in rows.indices {
        let maxHeightIndex = rows[index].elements
            .max { $0.size.height < $1.size.height }!
            .index

        let size = sizes[maxHeightIndex]

        var spacing = CGFloat.zero
        if let previousMaxHeightIndex {
            spacing = verticalSpacing(subviews[previousMaxHeightIndex], subviews[maxHeightIndex])
        }

        rows[index].yOffset = currentY + spacing
        currentY += size.height + spacing
        rows[index].height = size.height
        previousMaxHeightIndex = maxHeightIndex
    }

    return rows
}

Spacing

We'll allow a horizontal and vertical spacing overrides or use system provided spacings if nil. LayoutSubview proxy allows to get the system spacing for a pair of subviews.

func horizontalSpacing(_ lhs: LayoutSubview, _ rhs: LayoutSubview) -> CGFloat {
    if let horizontalSpacing { return horizontalSpacing }

    return lhs.spacing.distance(to: rhs.spacing, along: .horizontal)
}

func verticalSpacing(_ lhs: LayoutSubview, _ rhs: LayoutSubview) -> CGFloat {
    if let verticalSpacing { return verticalSpacing }

    return lhs.spacing.distance(to: rhs.spacing, along: .vertical)
}

Layout properties

The Layout protocol has an optional layoutProperties parameter that allows controlling StackOrientation. It affects the way Spacer and Divider are treated. For example, with stackOrientation = .horizontal the Spacer will only expand horizontally. Thus it will allow enforcing a line (row) break in the container. It has a caveat that it will have double spacing between the split rows and the default system spacing will be zero.

static var layoutProperties: LayoutProperties {
    var properties = LayoutProperties()
    properties.stackOrientation = .horizontal

    return properties
}

Alignment

We'll allow controlling the alignment value inside the container. Except Layout protocol doesn't provide an easy way to implement various text baseline alignment values: .leadingFirstTextBaseline, .centerLastTextBaseline, etc. The rest of the values correspond to UnitPoint values.

extension UnitPoint {
    init(_ alignment: Alignment) {
        switch alignment {
        case .leading:
            self = .leading
        case .topLeading:
            self = .topLeading
        case .top:
            self = .top
        case .topTrailing:
            self = .topTrailing
        case .trailing:
            self = .trailing
        case .bottomTrailing:
            self = .bottomTrailing
        case .bottom:
            self = .bottom
        case .bottomLeading:
            self = .bottomLeading
        default:
            self = .center
        }
    }
}

let anchor = UnitPoint(alignment)

We'll need to make a correction in placeSubviews with the anchor value.

let xCorrection = anchor.x * (bounds.width - row.width)
let yCorrection = anchor.y * (row.height - element.size.height)

Caching

We'll cache the minimal size of the container and row arrangements to improve performance. The row arrangement depends on both proposal and subview sizes. Whenever these change, the row arrangement should be recomputed

struct Cache {
    var minSize: CGSize
    var rows: (Int, [Row])?
}

func makeCache(subviews: Subviews) -> Cache {
    Cache(minSize: minSize(subviews: subviews))
}

func updateCache(_ cache: inout Cache, subviews: Subviews) {
    cache.minSize = minSize(subviews: subviews)
}

func computeHash(proposal: ProposedViewSize, sizes: [CGSize]) -> Int {
    let proposal = proposal.replacingUnspecifiedDimensions(by: .infinity)

    var hasher = Hasher()

    for size in [proposal] + sizes {
        hasher.combine(size.width)
        hasher.combine(size.height)
    }

    return hasher.finalize()
}

// In `arrangeRows` beginning
let hash = computeHash(proposal: proposal, sizes: sizes)
if let (oldHash, oldRows) = cache.rows,
   oldHash == hash {
    return oldRows
}

// In `arrangeRows` end
cache.rows = (hash, rows)

Usage

After all this work we can finally redefine our tag list.

WrappingHStack(alignment: .leading) {
    ForEach(tags) {
        TagView(text: $0.text)
    }
}.padding()

Limitations

The container, by design, doesn't support subviews that grow infinitely in the vertical axis. How would you even define the height in this case?

Final thoughts

We've written our wrapping hstack (sometimes also called flow layout) container in a universal way that can handle a wide variety of subviews. It definitely wasn't easy and we can now appreciate the simplicity with which we use standard HStack and VStack.

See the full code at https://github.com/ksemianov/WrappingHStack

Originally posted on https://ksemianov.github.io/articles/wrapping-hstack/

How to Create a Swift Package From a C++ Library

Konstantin Semianov — Tue, 12 Jan 2021 12:13:45 +0000

Cover photo by Kira auf der Heide on Unsplash.

This tutorial will guide you through the process of creating your own Swift package. It will provide bindings for a popular C++ linear algebra library — Eigen. For simplicity’s sake, only a subset of Eigen’s functionality will be ported to Swift.

Challenges of C++ and Swift Interop

C++ to Swift bindings are a complicated story that heavily depends on what kind of C++ code you wish to port. These two languages do not have apparent one-to-one API mapping. While there are automatic binding solutions present (e.g. Scapix, Gluecodium), they can successfully map only a subset of C++ language. You may benefit from such binding solutions if you are a library developer who is willing to write code that is easily convertible to other languages. However, if you wish to use a third-party library, then usually you are in for a rough ride. In such cases, you might have only one choice - write bindings manually.

Swift's team already provides C and Objective-C interoperability in their toolchains. At the same time, C++ interop has a manifest with no clear implementation timeline. This manifest discusses possible designs and tradeoffs for C++ and Swift interoperability. One of the most challenging issues is importing templates. It may seem that C++ templates and Swift generics are similar. However, they have important differences. At the time of writing, Swift doesn't support non-type template parameters, template template parameters, and parameter packs. Also, Swift generics are constraint-based (similar to C++20 concepts). At the same time, C++ templates perform syntactic substitution, i.e. attempt to substitute template with concrete type at the call site and see if the type supports the syntax invoked in the template. All in all, if you wish to call heavily templated C++ library from Swift, tough luck!

Problem Setup

Let's try to make manual bindings for a heavily templated C++ library Eigen. This a popular library for linear algebra: matrices, vectors, numerical solvers, and related algorithms. The basic strategy for the wrapper will be as follows: pick a concrete type, wrap it into Objective-C class which will be imported to Swift.

One of the ways to import Objective-C API to Swift is adding C++ library directly to Xcode project and providing a bridging header. However, you usually want your wrapper to compile as a separate module. In this case, you need the help of a package manager. Swift's team heavily promotes Swift Package Manager (SPM). Historically, SPM lacked some features which prohibited many developers from migrating to it. However, it imporved drastically over the years. In Xcode 12 you can finally bundle resources with your package and even use a package in a Swift playground.

In this tutorial, we'll create an SPM package SwiftyEigen. As a concrete type to use, we'll take a floating-point matrix with an arbitrary number of rows and columns. The Matrix class will have an initializer, subscript and inverse method that calculates the inverse of a matrix. The complete project is hosted at https://github.com/ksemianov/SwiftyEigen.

Project Structure

SPM has a useful template for creating a new library:



foo@bar:~$ mkdir SwiftyEigen && cd SwiftyEigen
foo@bar:~/SwiftyEigen$ swift package init
foo@bar:~/SwiftyEigen$ git init && git add . && git commit -m 'Initial commit'

Then we add our third-party library Eigen as submodule:



foo@bar:~/SwiftyEigen$ git submodule add https://gitlab.com/libeigen/eigen Sources/CPP
foo@bar:~/SwiftyEigen$ cd Sources/CPP && git checkout 3.3.9

Then we'll edit our package manifest Package.swift:



// swift-tools-version:5.3

import PackageDescription

let package = Package(
    name: "SwiftyEigen",
    products: [
        .library(
            name: "SwiftyEigen",
            targets: ["ObjCEigen", "SwiftyEigen"]
        )
    ],
    dependencies: [],
    targets: [
        .target(
            name: "ObjCEigen",
            path: "Sources/ObjC",
            cxxSettings: [
                .headerSearchPath("../CPP/"),
                .define("EIGEN_MPL2_ONLY")
            ]
        ),
        .target(
            name: "SwiftyEigen",
            dependencies: ["ObjCEigen"],
            path: "Sources/Swift"
        )
    ]
)

This package manifest is a recipe for package compilation. Swift build system will compile two separate targets for Objective-C and Swift. SPM doesn't allow mixing these two languages in the same target. ObjCEigen target uses sources from Sources/ObjC folder, adds Sources/CPP folder to header search paths and defines "EIGEN_MPL2_ONLY" to guarantee MPL2 license when using Eigen. SwiftyEigen target depends on ObjCEigen and uses sources from Sources/Swift folder.

Manual Bindings

No we provide a header for our Objective-C class and put it inside Sources/ObjCEigen/include folder:



#pragma once

#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface EIGMatrix: NSObject

@property (readonly) ptrdiff_t rows;
@property (readonly) ptrdiff_t cols;

- (instancetype)init NS_UNAVAILABLE;
+ (instancetype)matrixWithZeros:(ptrdiff_t)rows cols:(ptrdiff_t)cols
NS_SWIFT_NAME(zeros(rows:cols:));
+ (instancetype)matrixWithIdentity:(ptrdiff_t)rows cols:(ptrdiff_t)cols
NS_SWIFT_NAME(identity(rows:cols:));

- (float)valueAtRow:(ptrdiff_t)row col:(ptrdiff_t)col
NS_SWIFT_NAME(value(row:col:));
- (void)setValue:(float)value row:(ptrdiff_t)row col:(ptrdiff_t)col
NS_SWIFT_NAME(setValue(_:row:col:));

- (EIGMatrix*)inverse;

@end

NS_ASSUME_NONNULL_END

We have rows, and cols get properties, initializer with zeros and with identity, ways to get and set individual values and inverse method.

Implementation in Sources/ObjCEigen folder:



#import "EIGMatrix.h"

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdocumentation"
#import <Eigen/Dense>
#pragma clang diagnostic pop

#import <iostream>

using Matrix = Eigen::Matrix<float, Eigen::Dynamic, Eigen::Dynamic>;
using Map = Eigen::Map<Matrix>;

@interface EIGMatrix ()

@property (readonly) Matrix matrix;

- (instancetype)initWithMatrix:(Matrix)matrix;

@end

@implementation EIGMatrix

- (instancetype)initWithMatrix:(Matrix)matrix {
    self = [super init];
    _matrix = matrix;
    return self;
}

- (ptrdiff_t)rows {
    return _matrix.rows();
}

- (ptrdiff_t)cols {
    return _matrix.cols();
}

+ (instancetype)matrixWithZeros:(ptrdiff_t)rows cols:(ptrdiff_t)cols {
    return [[EIGMatrix alloc] initWithMatrix:Matrix::Zero(rows, cols)];
}

+ (instancetype)matrixWithIdentity:(ptrdiff_t)rows cols:(ptrdiff_t)cols {
    return [[EIGMatrix alloc] initWithMatrix:Matrix::Identity(rows, cols)];
}

- (float)valueAtRow:(ptrdiff_t)row col:(ptrdiff_t)col {
    return _matrix(row, col);
}

- (void)setValue:(float)value row:(ptrdiff_t)row col:(ptrdiff_t)col {
    _matrix(row, col) = value;
}

- (instancetype)inverse {
    const Matrix result = _matrix.inverse();
    return [[EIGMatrix alloc] initWithMatrix:result];
}

- (NSString*)description {
    std::stringstream buffer;
    buffer << _matrix;
    const std::string string = buffer.str();
    return [NSString stringWithUTF8String:string.c_str()];
}

@end

Now we expose our Objective-C code to Swift in Sources/Swift (for more info see Swift Forums):



@_exported import ObjCEigen

And provide a subscript for cleaner API:



extension EIGMatrix {
    public subscript(row: Int, col: Int) -> Float {
        get { return value(row: row, col: col) }
        set { setValue(newValue, row: row, col: col) }
    }
}

Usage Example

Now we can use this class as follows:



import SwiftyEigen

// Create a new 3x3 identity matrix
let matrix = EIGMatrix.identity(rows: 3, cols: 3)

// Change a specific value
let row = 0
let col = 1
matrix[row, col] = -2

// Calculate the inverse of a matrix
let inverseMatrix = matrix.inverse()

Finally, we can create a simple example project which showcases the capabilities of our wrapper library SwiftyEigen. It will allow to enter values for a 2x2 matrix and then calculate its inverse. For this you create a new iOS project in Xcode, drag-and-drop the package's folder from finder to Project navigator to add a local dependency, and add the SwiftyEigen framework in Example target's general settings. Then we write the UI and finish the project:

See complete code on GitHub.

References

Thank you for reading!