The article is now available on my blog:

https://www.artemnovichkov.com/blog/keyboard-layout-guide

A common task making app layout is keyboard avoidance. Since iOS 14.0 it works automatically for SwiftUI views. What’s about old, but good UIKit? Previously we used keyboard notifications, checked keyboard height, and updated related constraints. iOS 15 introduces a new layout guide — UIKeyboardLayoutGuide. It’s super intuitive if you’re familiar with other guides like safeAreaLayoutGuide and readableContentGuide. Let’s try to use it in a simple example — we have a login screen with text fields and a login button pinned to the bottom.

Base usage

We add just two constraints with system spacing:

view.addSubview(loginButton)
let buttonBottom = view.keyboardLayoutGuide.topAnchor.constraint(equalToSystemSpacingBelow: loginButton.bottomAnchor, multiplier: 1.0)
let buttonTrailing = view.keyboardLayoutGuide.trailingAnchor.constraint(equalToSystemSpacingAfter: loginButton.trailingAnchor, multiplier: 1.0)
NSLayoutConstraint.activate([buttonBottom, buttonTrailing])

Now loginButton layout follows keyboard changes. When the keyboard is offscreen, keyboardLayoutGuide.topAnchor matches the view's safeAreaLayoutGuide.bottomAnchor.

That's all, thank you for coming to my TED talk! Wait, the keyboard is no so simple, especially on iPadOS. You can undock and drag it to any place. Luckily, the keyboard guide helps us to handle these cases.

Working with floating keyboards

At first, we must enable keyboard tracking, it's disabled by default:

view.keyboardLayoutGuide.followsUndockedKeyboard = true

Now, loginButton starts to follow the keyboard:

It works great, but here we have edge cases. When we move the keyboard at the top, loginButton may be outside of the view frame.

Actually, UIKeyboardLayoutGuide is a subclass of UITrackingLayoutGuide. It's a layout guide that automatically activates and deactivates constraints depending on its nearness to edges. To use it, we replace buttonTrailing constraint with:

let buttonTop = view.keyboardLayoutGuide.topAnchor.constraint(equalToSystemSpacingBelow: loginButton.bottomAnchor, multiplier: 1.0)
buttonTop.identifier = "buttonTop"
view.keyboardLayoutGuide.setConstraints([buttonTop], activeWhenAwayFrom: .top)

buttonTop constraint will be active only when the keyboard is away from the top. Finally, we add buttonBottom constraint to pin loginButton at the keyboard bottom:

let buttonBottom = loginButton.topAnchor.constraint(equalToSystemSpacingBelow: view.keyboardLayoutGuide.bottomAnchor, multiplier: 1.0)
buttonBottom.identifier = "buttonBottom"
view.keyboardLayoutGuide.setConstraints([buttonBottom], activeWhenNearEdge: .top)

Note: configuring identifiers for NSLayoutConstraint allows you to find constraints easily during debugging.

Here is a final demo of our example. I've added some leading and trailing constraints as well. Check out UIKeyboardLayoutGuideExample on Github.

Related resources

• Use the floating keyboard on your iPad by Apple
• Your guide to keyboard layout by Apple
• Adjust Your Layout with Keyboard Layout Guide by Apple
• SwiftUI keyboard avoidance by Federico Zanetello

Twitter · Telegram · Github

The article is now available on my blog:

https://www.artemnovichkov.com/blog/async-image

iOS 15.0 beta gives us new SwiftUI views, and one of them is AsyncImage. It loads and displays an image from the given URL.

Let's start with a basic example:

import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: url)
    }
}

By default, it shows a gray background and replaces it with the loaded image:

Optionally we can change scale to use for the image. In the example below the image size will be reduced by half:

import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: url, scale: 2)
    }
}

To update the appearance of AsyncImage, we can use an initializer with content and placeholder view builders. Here we able to modify a final image and show a custom placeholder view:

import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: url) { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fit)
        } placeholder: {
            Image(systemName: "photo")
                .imageScale(.large)
                .foregroundColor(.gray)
        }
        .ignoresSafeArea()
    }
}

If we want to handle an error state, we can use another initializer with AsyncImagePhase. It's a simple enum with three cases: empty, success, and error.

import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: url, content: view)
    }

    @ViewBuilder
    private func view(for phase: AsyncImagePhase) -> some View {
        switch phase {
        case .empty:
            ProgressView()
        case .success(let image):
            image
                .resizable()
                .aspectRatio(contentMode: .fit)
        case .failure(let error):
            VStack(spacing: 16) {
                Image(systemName: "xmark.octagon.fill")
                    .foregroundColor(.red)
                Text(error.localizedDescription)
                    .multilineTextAlignment(.center)
            }
        @unknown default:
            Text("Unknown")
                .foregroundColor(.gray)
        }
    }
}

Here we show a spinner during loading, resized image if loading is successful, and an error message if something is wrong.

To specify animations between phase changes, we can optionally add Transition:

import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")
    private let transaction: Transaction = .init(animation: .linear)

    var body: some View {
        AsyncImage(url: url,
                   transaction: transaction,
                   content: view)
    }
    ...
}

And, of course, we can use AsyncImage inside List to show multiple images:

import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        List {
            ForEach(0..<10) { _ in
                AsyncImage(url: url,
                           content: view)
                    .listRowInsets(.init(.zero))
            }
        }
        .listStyle(.plain)
    }
    ...
}

If you want to play with AsyncImage by yourself, check out AsyncImageExample project on Github.

References

• AsyncImage Documentation by Apple
• Transactions in SwiftUI by Majid Jabrayilov

Twitter · Telegram · Github

The article is now available on my blog:

https://www.artemnovichkov.com/blog/bluetooth-and-swiftui

Last year I bought BEKANT desk. It looks minimalistic and... boring, so I wanted to add some RGB lightning. I chose a cheap no-name RGB stripe with a controller that works with IR and Bluetooth as well. The seller recommends using HappyLighting app. It works well enough, supports default styles like pulsating and strobe effects, syncs with music and surround sound. But the interface is a bit strange:

I'm an iOS developer who learns SwiftUI and Combine, so I decided to write my own app 🧑🏻‍💻. It's a proof of concept, but in the future, I can add more features like a watchOS companion app, Siri support, widgets, etc. At the end of the article, you can find a link to a Github repo with source code. Here is a final demo:

Bluetooth: Delegates -> Combine

With the power of CoreBluetooth framework, you can check Bluetooth state, scan for peripherals, discover required services and characteristics. By default, it works via Delegate pattern and knows nothing about Combine. If you aren't familiar with CoreBluetooth, I recommend checking this tutorial by Ray Wendenlich team. The basic algorithm for reading and writing data is:

1. Find Bluetooth device a.k.a. peripheral.
2. Discover its services. Every service is a collection of data related to peripheral features. For instance, heart rate or lightning services.
3. Discover characteristics for specific services. Every characteristic provides information about the peripheral state. Also, you can write data for characteristics to update the peripheral states.

I wrote a simple BluetoothManager object that works with CBCentralManager and CBPeripheral and broadcasts any updates. I decided to use Combine for it. With the magic of publishers, I can subscribe to needed updates and filter/map them in a more declarative way.

Here is an example of working with states and peripherals:

import Combine
import CoreBluetooth

final class BluetoothManager: NSObject {
    
    private var centralManager: CBCentralManager!
    
    var stateSubject: PassthroughSubject<CBManagerState, Never> = .init()
    var peripheralSubject: PassthroughSubject<CBPeripheral, Never> = .init()
    
    func start() {
        centralManager = .init(delegate: self, queue: .main)
    }
    
    func connect(_ peripheral: CBPeripheral) {
        centralManager.stopScan()
        peripheral.delegate = self
        centralManager.connect(peripheral)
    }
}

extension BluetoothManager: CBCentralManagerDelegate {
    
    func centralManagerDidUpdateState(_ central: CBCentralManager) {
        stateSubject.send(central.state)
    }
    
    func centralManager(_ central: CBCentralManager, didDiscover peripheral: CBPeripheral, advertisementData: [String : Any], rssi RSSI: NSNumber) {
        peripheralSubject.send(peripheral)
    }
}

In the app views, I subscribe to required subjects and show related states. Here is an example of discovering services:

manager.servicesSubject
    .map { $0.filter { Constants.serviceUUIDs.contains($0.uuid) } }
    .sink { [weak self] services in
        services.forEach { service in
            self?.peripheral.discoverCharacteristics(nil, for: service)
        }
    }
    .store(in: &cancellables)

To work with specific devices, you must know identifiers for services and characteristics to read and write data. Unfortunately, my controller has no documentation about its protocol, but I found an awesome description on Github. The author reverse-engineered the protocol and described almost all data formats. They look strange and have plenty of magic constants, but who don't use them in projects 😅. I added the required identifiers to the app based on the documentation used them for filtering:

enum Constants {
    static let readServiceUUID: CBUUID = .init(string: "FFD0")
    static let writeServiceUUID: CBUUID = .init(string: "FFD5")
    static let serviceUUIDs: [CBUUID] = [readServiceUUID, writeServiceUUID]
    static let readCharacteristicUUID: CBUUID = .init(string: "FFD4")
    static let writeCharacteristicUUID: CBUUID = .init(string: "FFD9")
}

SwiftUI: states and view models

For every view in the app I added view model to split layout and business logic. View models support ObservableObject protocol, work with BluetoothManager, manage subject subscriptions, and have @Published for view updates. The downside of this approach is no convenient way to pass BluetoothManager to every model. Initially, I wanted to use @EnvironmentObject and pass it to all child views, but it works well only in View itself. Finally, I just added it lazily to all view models:

import SwiftUI
import CoreBluetooth
import Combine

final class DevicesViewModel: ObservableObject {
    
    @Published var state: CBManagerState = .unknown
    @Published var peripherals: [CBPeripheral] = []
    
    private lazy var manager: BluetoothManager = .shared
    private lazy var cancellables: Set<AnyCancellable> = .init()
    
    deinit {
        cancellables.cancel()
    }
    
    func start() {
        manager.stateSubject
            .sink { [weak self] state in
                self?.state = state
            }
            .store(in: &cancellables)
        manager.peripheralSubject
            .filter { [weak self] in self?.peripherals.contains($0) == false }
            .sink { [weak self] in self?.peripherals.append($0) }
            .store(in: &cancellables)
        manager.start()
    }
}

Views create their own model and handle it with @StateObject:

struct DevicesView: View {
    
    @StateObject private var viewModel: DevicesViewModel = .init()
}

Ping me if you're good in SwiftUI dependency injection topic, I really appreciate feedback for this logic.

Debugging the app, I found that onAppear called twice for some views. People on forums confirm it and fill radars. In the app, I just added a silly check with a state flag:

struct DeviceView: View {
    
    @State private var didAppear = false
    
    var body: some View {
        content()
            .onAppear {
                guard didAppear == false else {
                    return
                }
                didAppear = true
                viewModel.connect()
            }
    }
}

I didn't want to reinvent the color wheel and used ColorPicker for color selection:

ColorPicker("Change stripe color",
            selection: $viewModel.state.color,
            supportsOpacity: false)

I used it in UIKit projects a few times, you can just show it on any user action. But in SwiftUI it shows a default interface with no customization.

There are two options for selection binding — Color and CGColor. I choose the second one because it is easy to get color components from it.

Conclusion

The more I use SwiftUI, the more I like its concepts. In pair with Combine, it makes app logic more expressive. And I'm still sure that developing pet projects are a great way to combine fun and learning.

The final project is available on Github. Feel free to check it and share your feedback. Thanks for reading!

Related resources

• Transferring Data Between Bluetooth Low Energy Devices by Apple
• SwiftUI Property Wrappers by Donny Wals
• SwiftUI Color Picker by Sean Allen

Twitter · Telegram · Github

The article is now available on my blog:

https://www.artemnovichkov.com/blog/custom-popups-in-swiftui

Two months ago my friend @iamnalimov and I published jstnmbr app on ProductHunt. The idea of the app is very simple — count everything: books, push-ups, glasses of water. Of course, I choose SwiftUI for implementation. In this article, I want to highlight the key moments of implementing custom popups. It won't be in the tutorial format, we'll add a specific layout, but I hope it helps you in using overlays, geometry readers, and modifiers in your projects. If you have any questions or ideas on how to improve it, ping me on Twitter.

Design is the key

Let's start with the design. Popups may contain different content, but the appearance and behavior are the same. Superviews are covered with blur overlay, popups have the same background color, top left and right rounded corners, and ability to dismissing:

We want to implement a familiar API interface for presenting like alerts or action sheets:

.popup(isPresented: $isPresented) {
    popupView
}

Here we have a Binding<Bool> for presenting state and @ViewBuilder for popup content. Internally it will contain two parts:

1. Custom ViewModifier that will show popups via overlays.
2. View extension for convenience interface and blur overlays.

Modifiers And View Extensions

Initially, we create OverlayModifier:

import SwiftUI

struct OverlayModifier<OverlayView: View>: ViewModifier {
    
    @Binding var isPresented: Bool
    @ViewBuilder var overlayView: () -> OverlayView
    
    init(isPresented: Binding<Bool>, @ViewBuilder overlayView: @escaping () -> OverlayView) {
        self._isPresented = isPresented
        self.overlayView = overlayView
    }
}

It contains isPresented state and the popup content. To conform ViewModifier protocol, we must implement body(content:) function. In our case it just optionally adds an overlay based on the state:

func body(content: Content) -> some View {
    content.overlay(isPresented ? overlayView() : nil)
}

Pay attention to overlayView(). Its body will be called only when popups is presented. View knows nothing about this modifier, so we extend View protocol with popup presentation:

extension View {
    
    func popup<OverlayView: View>(isPresented: Binding<Bool>,
                                  blurRadius: CGFloat = 3,
                                  blurAnimation: Animation? = .linear,
                                  @ViewBuilder overlayView: @escaping () -> OverlayView) -> some View {
        blur(radius: isPresented.wrappedValue ? blurRadius : 0)
            .animation(blurAnimation)
            .allowsHitTesting(!isPresented.wrappedValue)
            .modifier(OverlayModifier(isPresented: isPresented, overlayView: overlayView))
    }
}

Let's describe every modifier:

1. blur adds a blur overlay to superview if the popup is presented. We have a default value in function parameters to reuse the same radius and modify for specific popups if needed.
2. animation adds an animation for blur overlay if needed.
3. allowsHitTesting disables user interactions in superview if the popup is presented.
4. modifier applies custom OverlayModifier with passed overlayView.

We're ready to show popups, but we don't have any yet 😅. Let's make a basic PopupView with a common appearance according to our goals:

• It may contain different content inside;
• It has a background color and rounded top left and top right corners;
• It is showed from the bottom with animation.

Popup Layout

Let's create a simple view named NamePopupView that knows nothing about popup logic:

The app may show different popups, so we create a reusable BottomPopupView to show different content:

struct BottomPopupView<Content: View>: View {
    
    @ViewBuilder var content: () -> Content
    
    var body: some View {
        content()
    }
}

Now we can show it in .popup modifier:

.popup(isPresented: $isPresented) {
	BottomPopupView {
		NamePopupView(isPresented: $isPresented)
	}
}

By default, overlays are shown in the center of the superview. To pin it to the bottom we wrap the content into VStack with Spacer:

VStack {
	Spacer()
	content()
	    .background(Color.white)
	    .cornerRadius(radius: 16, corners: [.topLeft, .topRight])
}

Default cornerRadius modifier works for all corners, so here we use a custom modifier for it:

struct RoundedCornersShape: Shape {
    
    let radius: CGFloat
    let corners: UIRectCorner
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

extension View {
    
    func cornerRadius(radius: CGFloat, corners: UIRectCorner = .allCorners) -> some View {
        clipShape(RoundedCornersShape(radius: radius, corners: corners))
    }
}

All is now ready, and here is the result:

Insets for Safe Area have added automatically, but we want to overlay superviews at the bottom too. To read and use Safe Area insets, we add GeometryReader:

GeometryReader { geometry in
	VStack {
	    Spacer()
	    content()
		    .padding(.bottom, geometry.safeAreaInsets.bottom)
		    .background(Color.white)
		    .cornerRadius(radius: 16, corners: [.topLeft, .topRight])
	}
	.edgesIgnoringSafeArea([.bottom])
}

To pin our popup at the bottom, we add .edgesIgnoringSafeArea modifier. According to the content, we add a bottom padding with the bottom inset before .background modifier. With this logic background color will appear as expected.

Since iOS 14 we even have an automatic keyboard avoidance:

Animations

The layout is finished 🥳, but there is no animation. Luckily SwiftUI has easy-to-use modifiers for animations and transitions:

GeometryReader { geometry in
    ...
}
.animation(.easeOut)
.transition(.move(edge: .bottom))

Source Code

You can find the final project on Github. Thanks for reading!

Related Articles

• Custom Popup in SwiftUI by Vadim Bulavin
• How to use GeometryReader without breaking SwiftUI layout by Majid Jabrayilov
• SwiftUI keyboard avoidance by Federico Zanetello

Twitter · Telegram · Github

The article is now available on my blog:

https://www.artemnovichkov.com/blog/result-builders

One of the key features of SwiftUI is a declarative syntax for layout. It is available thanks to result builders, previously called function builders. With result builders, we can implicitly build up a final value from a sequence of components. The final revision of this feature is released in Swift 5.4, and Xcode 12.5 suggests code completions and fix-its for it. I guess it's a good sign for exploring it and making action sheets more declarative!

Preparation

We'll create a simple SwiftUI app, where we can select ingredients for sandwich.

struct ContentView: View {
    
    @State private var ingredients: [String] = []
    @State private var isActionSheetPresented = false
    
    var body: some View {
        VStack {
            Text(ingredients.joined())
                .font(.system(.title))
            Button("Make a sandwich") {
                isActionSheetPresented = true
            }
        }
        .padding()
        .actionSheet(isPresented: $isActionSheetPresented) {
            let buttons = [ActionSheet.Button.default(Text("🍞")) {
                ingredients.append("🍞")
            },
            ActionSheet.Button.cancel()]
            return ActionSheet(title: Text("Select an ingredient"), message: nil, buttons: buttons)
        }
    }
}

When we tap on the button, ActionSheet is presented with buttons from the array in the initializer. The syntax for action buttons, especially with defined actions, looks a bit complicated. Let's improve it with a custom result builder.

Basics

We create a ButtonsBuilder struct with @resultBuilder attribute. To start using it, we must implement at least one static buildBlock function:

@resultBuilder
struct ButtonsBuilder {

    static func buildBlock(_ components: ActionSheet.Button...) -> [ActionSheet.Button] {
        components
    }
}

Here we have a variadic parameter with ActionSheet.Button and just return it as is.

Because ActionSheet knows nothing about our builder, we create a new initializer with title, message, and the builder:

extension ActionSheet {
    
    init(title: Text, message: Text? = nil, @ButtonsBuilder buttons: () -> [ActionSheet.Button]) {
        self.init(title: title, message: message, buttons: buttons())
    }
}

Now we're ready to refactor ActionSheet configuration:

.actionSheet(isPresented: $isActionSheetPresented) {
    ActionSheet(title: Text("Select an ingredient"), message: nil) {
        ActionSheet.Button.default(Text("🍞")) {
            ingredients.append("🍞")
        }
        ActionSheet.Button.cancel()
    }
}

Looks great!

What if?.. Working with conditions

Result builders may build a partial result depending on some conditions. In our app, we add a new State and Toggle . If it is enabled, we add cucumbers and tomatoes otherwise.

// In States section
@State private var likeCucumbers = true

// Below Text in ContentView
Toggle("I love cucumbers", isOn: $likeCucumbers)

To support if-else conditions in our builder, we must implement buildEither(first:) and buildEither(second:) functions:

@resultBuilder
struct ButtonsBuilder {
    
    ...
    
    static func buildEither(first components: [ActionSheet.Button]) -> [ActionSheet.Button] {
        components
    }
    
    static func buildEither(second components: [ActionSheet.Button]) -> [ActionSheet.Button] {
        components
    }
}

If we try to add if-else statement like this:

if likeCucumbers {
	ActionSheet.Button.default(Text("🥒")) {
		ingredients.append("🥒")
	}
}
else {
	ActionSheet.Button.default(Text("🍅")) {
		ingredients.append("🍅")
	}
}

We have an error:

Cannot pass array of type '[ActionSheet.Button]' (aka 'Array<Alert.Button>') as variadic arguments of type 'ActionSheet.Button' (aka 'Alert.Button')

We can solve the error by defining a new protocol and implementing it by both a single ActionSheet.Button and a collection of ButtonsConvertible:

protocol ButtonsConvertible {
    
    var buttons: [ActionSheet.Button] { get }
}

extension ActionSheet.Button: ButtonsConvertible {
    
    var buttons: [ActionSheet.Button] {
        [self]
    }
}

extension Array: ButtonsConvertible where Element == ButtonsConvertible {

    var buttons: [ActionSheet.Button] { self.flatMap(\.buttons) }
}

In ButtonsBuilder we replace all ActionSheet.Button with ButtonsConvertible. And finally, we implement buildFinalResult function that gets all ButtonsConvertible and maps it to buttons:

@resultBuilder
struct ButtonsBuilder {
    
    static func buildBlock(_ components: ButtonsConvertible...) -> [ButtonsConvertible] {
        components
    }
    
    ...
    
    static func buildFinalResult(_ components: [ButtonsConvertible]) -> [ActionSheet.Button] {
        components.flatMap(\.buttons)
    }
}

Now likeCucumbers check builds successfully.

Using ForEach for Actions

SwiftUI has an awesome ForEach element. It gets different data collections and converts them to views via @ViewBuilder. I was wondering if there is any chance to use it for buttons 🤔. Of course, let's start with an extension:

extension ForEach: ButtonsConvertible where Content == ActionSheet.Button {

    var buttons: [ActionSheet.Button] {
        data.map(content)
    }
}

Here we declare that Content generic must be ActionSheet.Button and map data to buttons via content closure.

ActionSheet.Button is a simple typealias for Alert.Button, and Alert.Button is just a struct that doesn't conform View protocol. To solve it, we implement it and return Never for the body:

extension ActionSheet.Button: View {

    public var body: Never {
        fatalError()
    }
}

Because we don't use ForEach for rendering, the body will never be called. And it works now!

ForEach(["🧅", "🧄"], id: \.self) { string in
	ActionSheet.Button.default(Text(string)) {
		ingredients.append(string)
	}
}

We can explicitly add ids like in the example, use Identifiable array or even ranges inside ForEach. The downside of this trick is that we can accidentally use ActionSheet.Button inside any body and get fatalError in runtime.

Conclusion

Result builder is a great enhancement in Swift language. In certain cases, it improves code readability dramatically. If you want to play with the example, check ResultBuilderExample repo.

Thanks for reading 🙏

References

• Official documentation by Apple
• Result builders in Swift explained with code examples by Antoine v.d. SwiftLee
• awesome-function-builders by community

Twitter · Telegram · Github

The article is now available on my blog:

https://www.artemnovichkov.com/blog/swiftui-offline

I continue developing an app for saving and reading articles. In my previous post, I covered interesting cases of using sheets in SwiftUI. Now I want to describe my journey with offline mode.

There are situations when users are unable to download web content: bad connection, airplane mode, etc. WKWebView has useful APIs for saving its content in different formats. Let's check it out!

Note: Examples are written in Swift 5.4 and tested on iOS 14.5 with Xcode 12.5 (12E262).

Preparation

In the app user can save URL content without explicit previewing. To deal with it, we use a simple WKWebView wrapper called WebDataManager:

import WebKit

final class WebDataManager: NSObject {
    
    private lazy var webView: WKWebView = {
        let webView = WKWebView()
        webView.navigationDelegate = self
        return webView
    }()
    
    private var completionHandler: ((Result<Data, Error>) -> Void)?
    
    func createData(url: URL, completionHandler: @escaping (Result<Data, Error>) -> Void) {
        self.completionHandler = completionHandler
        webView.load(.init(url: url))
    }
}

We create a web view without frame, because we don't want to show it. Also, WebDataManager has a convenience function with completion to handle web content. For all formats it will return Data that we can store locally.

To work with web navigation, we must conform WKNavigationDelegate and implement didFinish and didFail functions:

extension WebDataManager: WKNavigationDelegate {
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // save loaded content
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        completionHandler?(.failure(error))
    }
}

These functions will be called on navigation changes. Now we are ready to save the content, and our first station will be takeSnapshot.

Snapshots

Since iOS 11.0 WKWebView has takeSnapshot function. It has an optional WKSnapshotConfiguration to specify a capture behavior. In the final, it returns a generated image.

// declared in WebDataManager
enum DataError: Error {
    case noImageData
}

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    let config = WKSnapshotConfiguration()
    webView.takeSnapshot(with: config) { [weak self] image, error in
        if let error = error {
            self?.completionHandler?(.failure(error))
            return
        }
        guard let pngData = image?.pngData() else {
            self?.completionHandler?(.failure(DataError.noImageData))
            return
        }
        self?.completionHandler?(.success(pngData))
    }
}

Remember zero frame of the web view? Because of it, we have an unknown error here:

Error Domain=WKErrorDomain Code=1 "An unknown error occurred" UserInfo={NSLocalizedDescription=An unknown error occurred}

To fix it, we can get a contentSize and set it to config's rect:

config.rect = .init(origin: .zero, size: webView.scrollView.contentSize)

Now we have the image data, can save it locally and show in the app:

import SwiftUI

struct SnapshotContentView: View {
    
    let url: URL
    
    var body: some View {
        if let image = UIImage(contentsOfFile: url.path) {
            ScrollView {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            }
        }
        else {
            Text("Fail to load image")
        }
    }
}

Let's highlight a few cons of this approach:

• Images have fixed sizes and may look bad on different screens;
• We can't copy text from contents and open URLs.

Luckily, the next approach has no these issues.

PDF

With iOS 14.0 WKWebView got a new createPDF function. It already returns a Result object that we can just pass to our completionHandler:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.createPDF { [weak self] result in
        self?.completionHandler?(result)
    }
}

For a record, the function also takes WKPDFConfiguration object with the only option — a rect to capture a portion of the web view.

SwiftUI has no views for PDF content. But with helping of UIViewRepresentable we can use PDFView from PDFKit framework:

import SwiftUI
import PDFKit

struct PDFContentView: UIViewRepresentable {
    
    let url: URL
    
    func makeUIView(context: Context) -> PDFView {
        let view = PDFView()
        view.autoScales = true
        view.document = PDFDocument(url: url)
        return view
    }
    
    func updateUIView(_ pdfView: PDFView, context: Context) {
    }
}

Now we can copy text and even open URLs in Safari, but web content is still static. For instance, animations are gone, drop-down lists will be collapsed forever.

Web archive

The last approach in this article is web archives. A web archive is a file that archives inside it all the content of one web page. And since iOS 14.0 we can work with it easily:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.createWebArchiveData { [weak self] result in
        self?.completionHandler?(result)
    }
}

Of course, we have another wrapper, but for WKWebView:

import SwiftUI
import WebKit

struct WebArchiveContentView: UIViewRepresentable {
    
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        WKWebView()
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {
        webView.loadFileURL(url, allowingReadAccessTo: url)
    }
}

With the magic of web archives web page logic is working as well. With an internet connection, the web view will navigate to tapped content links.

Conclusion

Finally, for the app I choose web archives, but all approaches are helpful based on app purposes. The last thing I want to add is a size of rendered contents. For my blog's main page the sizes are:

• .png — 1,8 Mb;
• .pdf — 2,3 Mb;
• .webarchive — 5,3 Mb.

I don't mind it (yet 😅), but I'm planning to add features for clearing saved data and download archives for selected articles.

If you want to play with examples and test your URLs, an example project with all three saving options is available here.

Twitter · Telegram · Github

The article is now available on my blog:

https://www.artemnovichkov.com/blog/sheet-happens

Developing pet projects is one of the best ways to learn new things. Since SwiftUI 1.0 I've been writing an app for saving and reading articles. I rewrote it twice from scratch, added and removed features based on my user experience, used new APIs, etc.

I had a few interesting cases implementing modal views a.k.a. sheets in SwiftUI. The main goal of this article is to summarize my experience and use it as a reference for the future. I simplify code examples to focus on specific logic. Let's start with showing.

Note: Examples are written in Swift 5.3.2 and work on iOS 14.0 with Xcode 12.4 (12D4e).

Showing sheets

There are two options for showing sheets.

The first one is based on Binding<Bool> value. It can be stored via @State property wrapper and good for sheets that need no external data:

struct ArticlesView: View {

    @State var isSettingsViewPresented = false
    
    var body: some View {
        Button("Show Settings") {
            isSettingsViewPresented = true
        }
        .sheet(isPresented: $isSettingsViewPresented) {
            SettingsView()
        }
    }
}

struct SettingsView: View {

    var body: some View {
        Text("Settings")
    }
}

The second one is based on Binding<Item?> value where the item is an optional Identifiable object. it's a good choice if we want to pass any data to sheets. For instance, a selected article for reading. Pay attention that the selected article is not optional in sheet content closure:

// A simple struct with article data
struct Article: Identifiable {

    let id: UUID
    let title: String
}

struct ArticlesView: View {

    @State var article: Article?
    
    var body: some View {
        Button("Show Article") {
            article = .init(id: .init(), title: "Awesome article")
        }
        .sheet(item: $article) { article in
            ArticleDetailsView(article: article)
        }
    }
}

// A view for article showing
struct ArticleDetailsView: View {

    @State var article: Article
    
    var body: some View {
        Text(article.title)
    }
}

An interesting moments:

• if id of the selected article will be changed, the presented sheet will be dismissed and replaced with a new sheet;
• if the selected article becomes nil at any moment, the sheet will be dismissed as well.

For both showing options we can optionally add onDismiss closure that executed when the sheet dismisses:

struct ArticlesView: View {

    @State var article: Article?
    
    var body: some View {
        Button("Show Article") {
            article = .init(id: .init(), title: "Awesome article")
        }
        .sheet(item: $article, onDismiss: onDismiss) { article in
            ArticleDetailsView(article: article)
        }
    }
       
    private func onDismiss() {
        print("dismisses")
    }
}

By default, we can dismiss sheets via swipe gestures. But what if we want to dismiss sheets based on another user action or app logic?

Dismissing sheets

There are two options to dismiss sheets too. If we use Binding<Bool>, we can pass it to a sheet via @Binding property wrapper and update its value. Bindings allow to change values in parent views:

// in ArticlesView
.sheet(isPresented: $isSettingsViewPresented) {
    SettingsView(isSettingsViewPresented: $isSettingsViewPresented)
}

struct SettingsView: View {
    
    @Binding var isSettingsViewPresented: Bool
    
    var body: some View {
        ZStack {
            Text("Settings")
            VStack {
                Spacer()
                Button("Dismiss") {
                    isSettingsViewPresented = false
                }
            }
        }
    }
}

Another option is more universal and based on presentationMode environment:

struct SettingsView: View {
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        ZStack {
            Text("Settings")
            VStack {
                Spacer()
                Button("Dismiss") {
                    presentationMode.wrappedValue.dismiss()
                }
            }
        }
    }
}

This environment indicates whether a view is currently presented by another view.

Sheets and ForEach

The app with only one article is a bit useless, so let's create List and make articles rows via ForEach:

struct ArticlesView: View {

    let articles: [Article] = [.init(id: .init(), title: "Awesome article"),
                               .init(id: .init(), title: "Another awesome article")]
    @State var isArticleDetailsViewPresented: Bool = false
    
    var body: some View {
        NavigationView {
            List {
                ForEach(articles) { article in
                    Text(article.title)
                        .onTapGesture {
                            isArticleDetailsViewPresented = true
                        }
                        .sheet(isPresented: $isArticleDetailsViewPresented) {
                            ArticleDetailsView(article: article)
                        }
                }
            }
            .navigationTitle("Articles")
        }
    }
}

Here we use Binding<Bool> for sheet state and update its value on tap action. Because we have the articles in enumeration, we can pass it to ArticleDetailsView. Everything looks fine, the app builds successfully. But ArticleDetailsView presents only with "Awesome article" title for the first article. Ok, remember this case and try to update sheets logic in the next article section after another example.

Multiple sheets

Previously we used one sheet for the selected article. In my app, I show different views according to the internet connection. If the internet is available, I show SafariView with the url of the selected article, and WebArchiveView with saved web archive data.

At first, we update our models:

struct Article: Identifiable {

    let id: UUID
    let title: String
    let url: URL
}

extension URL: Identifiable {
    
    public var id: String {
        absoluteString
    }
}

extension String: Identifiable {
    
    public var id: String {
        self
    }
}

URL and String types must conform Identifiable protocol for using in sheet bindings.

Next, we update ArticlesView with multiple sheets. To simplify the example let's show different views based on Bool state:

struct ArticlesView: View {

    let article: Article = .init(id: .init(),
                                 title: "Sheet happens",
                                 url: URL(string: "https://blog.artemnovichkov.com/editor/sheet-happens")!)
    
    @State var url: URL?
    @State var title: String?
    @State var isOn = true
    
    var body: some View {
        HStack {
            Button("Show Article") {
                if isOn {
                    url = article.url
                }
                else {
                    title = article.title
                }
            }
            .sheet(item: $url) { url in
                SafariView(url: url)
            }
            .sheet(item: $title) { title in
                WebArchiveView(title: title)
            }
            Toggle("", isOn: $isOn)
        }
        .padding()
    }
}

Finally, we add views with different states and body content:

struct SafariView: View {
    
    @State var url: URL
    
    var body: some View {
        Text("Content of " + url.absoluteString)
    }
}

struct WebArchiveView: View {
    
    @State var title: String
    
    var body: some View {
        Text("Web archive data of \(title) article")
    }
}

Here we have another strange behavior — only WebArchiveView will be shown. It's a known issue in SwiftUI, but don't give up, let's fix it!

Fixing multiple sheets

We create Sheet enum with cases for every sheet. It must conform Identifiable as well:

enum Sheet: Identifiable {
    
    case url(URL)
    case webArchive(String)
    
    var id: String {
        switch self {
        case .url(let url):
            return url.id
        case .webArchive(let title):
            return title.id
        }
    }
}

In ArticlesView we replace states with only one with Sheet value and use one sheet modifier:

struct ArticlesView: View {

    let article: Article = .init(id: .init(),
                                 title: "Sheet happens",
                                 url: URL(string: "https://blog.artemnovichkov.com/editor/sheet-happens")!)
    
    @State var sheet: Sheet?
    @State var isOn = true
    
    var body: some View {
        HStack {
            Button("Show Article") {
                if isOn {
                    sheet = .url(article.url)
                }
                else {
                    sheet = .webArchive(article.title)
                }
            }
            .sheet(item: $sheet) { sheet in
                switch sheet {
                case .url(let url):
                    SafariView(url: url)
                case .webArchive(let title):
                    WebArchiveView(title: title)
                }
            }
            Toggle("", isOn: $isOn)
        }
        .padding()
    }
}

Now, with sheet state, both views will be presented 🎉

If we want to reuse these sheets in another view, we can conform View protocol and return related views in body:

enum Sheet: View, Identifiable {
    
    case url(URL)
    case webArchive(String)
    
    var id: String {
        switch self {
        case .url(let url):
            return url.id
        case .webArchive(let title):
            return title.id
        }
    }
    
    var body: some View {
        switch self {
        case .url(let url):
            SafariView(url: url)
        case .webArchive(let title):
            WebArchiveView(title: title)
        }
    }
}

// in ArticlesView
.sheet(item: $sheet) { $0 }

The final code for the example is available here.

Updates for iOS & iPadOS 14.5 Beta 3

According to release notes, we can now apply multiple sheet(isPresented:onDismiss:content:) and fullScreenCover(item:onDismiss:content:) modifiers in the same view hierarchy. (74246633). But if we need to support previous versions (oh, come on, of course we need 😀), we can use the way described above.

Conclusion

As we can see, SwiftUI has a simple and declarative way for showing sheets with bindings magic. But in real apps with different layouts we must use it wisely and know edge cases of its behavior. Feel free to ping on Twitter, ask your questions related to this article, highlight grammar mistakes , or share your cases. Thanks for reading!

Twitter · Telegram · Github

The article is now available on my blog:

https://www.artemnovichkov.com/blog/developing-xcode-extensions-tips-and-tricks

You all see these beautiful code screenshots on Twitter. I often use Carbon for my tweets, but Raycast team released ray.so that looks prettier and has options for customization via query parameters. I decided to write an Xcode Source Extension for it. Here is my journey, enjoy the reading!

The app is first

Extensions can be installed only within main apps, and it's a good chance to use SwiftUI for macOS development. My app contains options for sharing: colors, background, dark mode, and paddings. Finally, the app looks like this:

All selected options are saved to UserDefaults and shared to the extension via app groups. The app is based on SwiftUI App template, and it is very limited for configuration. For instance, it is very hard to disable the fullscreen toolbar button.

Since macOS 11.0 SDK you can use defaultAppStorage(_:) for scenes and views in your apps. All nested @AppStorage property wrappers will use it by default. In theory. But it doesn't work for me, so I set all stores explicitly:

private static let defaults = UserDefaults(suiteName: Constants.suiteName)!

@AppStorage(Constants.darkModeKey, store: Self.defaults)
var darkMode: Bool = true

And there is no way to check which store is used in @AppStorage. If you know how to fix it, ping me on Twitter.

Continue with extension

It was my first Xcode Source Extension, so I dived into documentation and open source extensions. Personally, I think it's hard to develop and debug. By the way, here is my final code for getting a selected code:

private func selectedCode(from buffer: XCSourceTextBuffer) -> String {
var text = ""
var spacesCount = 0
for case let range as XCSourceTextRange in buffer.selections {
    for lineNumber in range.start.line...range.end.line {
        if lineNumber >= buffer.lines.count {
            continue
        }
        guard let line = buffer.lines[lineNumber] as? String else {
            continue
        }
        if spacesCount == 0 {
            let currentSpacesCount = line.prefix(while: { $0 == " " }).count
            if currentSpacesCount > 0 {
                spacesCount = currentSpacesCount
            }
        }
        let substring = line.dropFirst(spacesCount)
        text.append(String(substring))
    }
    return text.trimmingCharacters(in: .whitespacesAndNewlines)
}

Except extension-specific logic like spacing and trimming, you should work withXCSourceTextBuffer,XCSourceTextRange,XCSourceTextPosition etc.

When you run your extension, Xcode launches a special instance of Xcode. Sometimes extensions just not show up in Editor menu. Folks on StackOverflow, Apple Forums and Github issues advise to sign extensions with a real certificate, rename Xcode and of course clean/relaunch your projects. Erica Sadun wrote a good article about debugging.

Finally, when the extension gets selected code, it opens special URL with saved options viaNSWorkspace.shared.open.

To use any installed extensions, select Editor menu in Xcode, and all extensions with commands will appear at the bottom:

Bonus: Key bindings

To be more productive, you can associate a keyboard shortcut with the extension command in Xcode > Preferences... > Key Bindings menu. I use ⌃ + ⌥ + ⌘ + R, because it doesn't conflict with default bindings.

Results

To check the final project, you can open RaySo repository and install the app. Regardless all caveats, I'm happy with the result. Now it's so easy to share my code right from Xcode! I just want to add several good articles that help me:

• Xcode Source Editor Extension Tutorial: Getting Started by Vadim Bulavin
• Xcode​Kit and Xcode Source Editor Extensions by Zoë Smith

Twitter · Telegram · Github

The article is now available on my blog:

https://www.artemnovichkov.com/blog/custom-environment-value-for-share-actions

SwiftUI has a lot of modern and useful features. One of my favourite is @Environment property wrapper. It allows you to get system-wide settings, for instance, current locale or color scheme. Since iOS 14.0 you can useopenURL value to open URLs from apps easily.

@available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)
extension EnvironmentValues {

/// Opens a URL using the appropriate system service.
    public var openURL: OpenURLAction { get }
}

With just a one line of code you can extend behaviour of you views:

import SwiftUI

struct ContentView: View {

    @Environment(\.openURL) var openURL
    
    var body: some View {
        Button("Share") {
            openURL(URL(string: "https://blog.artemnovichkov.com")!)
        }
    }
}

I was wondering how it works under the hood and tried to implement the same trick for sharing activity items withUIActivityViewController. Let's check the result!

Keys and values

At first we should create a custom key, conform toEnvironmentKey protocol and set a default value. It will be an empty struct for now:

struct ShareAction {}

struct ShareActionEnvironmentKey: EnvironmentKey {

    static let defaultValue: ShareAction = .init()
}

Next, we should extendEnvironmentValues to make ourShareAction be available from the environment:

extension EnvironmentValues {

    var share: ShareAction {
        self[ShareActionEnvironmentKey]
    }
}

The last thing is addingcallAsFunction inShareAction struct to use the same syntax:

struct ShareAction {

    func callAsFunction(_ activityItems: [Any]) {
        let vc = UIActivityViewController(activityItems: activityItems, applicationActivities: nil)
        UIApplication.shared.windows.first?.rootViewController?.present(vc, animated: true, completion: nil)
    }
}

Unfortunately, there is no SwiftUI-way to open this controller. If you use a better way, let me know!

To read more about callable values of user-defined nominal types, check SE-0253 proposal on Github.

That's it, now we can use.share value and share activities from any view:

import SwiftUI

struct ContentView: View {

    @Environment(\.share) var share
    
    var body: some View {
        Button("Share") {
            share([URL(string: "https://blog.artemnovichkov.com")!])
        }
    }
}

Related Resources

The final code is available here, and there is a list of related articles:

• Environment Documentation
• What is @Environment in SwiftUI by Sarun W.
• The power of Environment in SwiftUI by Majid Jabrayilov
• How to use @EnvironmentObject to share data between views by Paul Hudson

Twitter · Telegram · Github

Я с 2014 года занимаюсь iOS-разработкой. Кроме кода я люблю писать тексты и обращать внимание на детали.

В последнее время контекстная реклама показывает мне много образовательных курсов, в том числе по iOS. Очень часто на такие курсы записываются люди из других профессий, далёких от разработки и IT. В программах курсов, с которыми я знакомился, есть ошибки, опечатки и неточности. Неподготовленный человек может пропустить их, но мой натренированный глаз и профессионально деформированный мозг легко подмечают такое.

Давайте вместе разберём тексты разных программ и чуть-чуть побомбим. Grammar nazi mode on.

Я не буду разбирать содержание курсов, полноту и актуальность различных модулей. Это тема для отдельной статьи.

Skillbox

Ссылка на программу

iOS-разработчик для начинающих

1. Введение в iOS разработку: переменные и константы

Так, давайте определимся, нужен дефис после iOS или нет?

3. Функции и опшиналы

Как только не обзывали тип Optional — опшионалы, опшиналы, опционалы... А какой вариант на русском вам больше нравится?

6. xcode.Сontroller и сториборд

Тут ребята собрали комбо, давайте разбираться:

• У разработчиков часто бомбит с ошибок в написании Xcode. Насколько можно доверять курсу, в описании которого название IDE так написано? Этим же грешат эйчары: в описании вакансий часто встречаются подобные ошибки, для меня это лакмусовая бумажка для вакансии. Вижу xCode — помечаю как прочитанное.
• xcode.Сontroller — имели в виду "Xcode, Сontroller". Но эти ошибки пропустили все люди, через которых проходит этот текст.

9. Autolayout, Constrains, StackView

В документации всегда пишут Auto Layout. Давайте называть технологии правильно! И опечаток вроде Constrains стоит избегать, правильно — Constraints. Или это не опечатка, что ещё хуже.

16. Подпись и отправка приложений в AppStore. Обзор iTunes connect

Ещё один хороший показатель того, как часто обновляют программу курса. iTunes connect давно переименовали в App Store Connect. Может, и в лекции показывают старый интерфейс?

4. Архитектуры приложений: MVC, MVVM, Viper, Amber

А тут уже интереснее. Первый три архитектуры популярны, они используются в реальных проектах. А вот что такое Amber? Я даже не слышал про неё. Может, я отстал, и каждый джун уже использует её в своих pet-проектах? Я провёл небольшое расследование и нашел репозиторий: всего 10 звезд, последние обновления были в 2017 году. Автор этой архитектуры — Никита Архипов, он же автор курса от Skillbox. Он даже хотел рассказать про Amber на AppsConf, но доклад почему-то отклонили. Вопрос: стоит ли молодым ребятам изучать её? Вопрос скорее риторический.

8. Взаимодействие с Objective С и С-кодом. Секретные фишки из Objective C

Секретная фишка — правильно писать "Objective-С".

SkillFactory

Ссылка на программу

Структуры и энумы

А чем "перечисляемый тип" не устроил? Хотя Google умный, Google всё равно подскажет.

Опшионалы. Строки. Классы

Давайте уже соберёмся всем сообществом и определимся, как правильно писать.

Клиент-серверное взаимодейтсвие. Протокол HTTP, RESTful APIs

Опечатки — они хитрые. Сразу и не заметишь. Жалко, что тут компилятор не может подсказать...

Unit-текстирование. TDD-тестирование. Фреймворк XCTest

Насколько я понял, теКстирование — это проверка локализации приложения?

Работа с Review Guideline и iTunesConnect

Та же ловушка. Apple, хватит менять сервисы, мы не успеваем!

Нетология

Ссылка на программу

познакомитесь с UIView и UIControl, их сабклассами и жизненным циклом UIView

Обычно говорят про жизненный цикл UIViewController, и на собеседованиях любят спрашивать. А тут и у UIView тоже появился жизненный цикл.

переход на модальный экран редактирования привычки с использованием стандартных компонентов iOS — UIDatePicker и UITextFieldOperations и Operations Queue: API для создания многопоточного кода

Нет времени объяснять и ставить пробелы в программе, пошли учиться!

научитесь проводить Unit- и UI-тесты приложения

Скорее всего докапываюсь, но обычно "проводят тестирование" или "пишут тесты".

Регистрация своего приложение на портале для разработчиков ВКонтакте

Падежи всем трудно даются.

Otus

Ссылка на программу

XCode, Storyboard, объекты UI, создание программно объектов, XIB

Про Xcode мы уже поговорили выше. А тут ещё и Yoda style: "создание программно объектов научишься ты!"

Fabric, Crashlitics

Ну и что, что сервисы deprecated, legacy кому-то надо поддерживать! А Crashlytics я и сам не всегда с первого раза правильно пишу.

Swiftlab

Ссылка на программу

Панаромирование

Панарома — интересный термин. А уж как его в разработке можно применить...

Щипки (pinching gesture)

Надеюсь, не рассказывают, как щипать коллегу в офисе. И тут Google в очередной раз выручает и показывает результаты про pinch gesture.

Автор курса (как и я при написании этой статьи) устал в конце и в описании модуля про Github просто скопировал описание модуля про Apple Watch. Повторение — мать учения.

И что теперь, вообще не учиться?

Конечно, нет! Нужно больше вникать в материалы курсов, сравнивать программы и не вестись на маркетинговые уловки.

Grammar nazi mode off.

Twitter | Telegram | Github