a few seconds read (About 52 words)

How to conform to Hashable for class in Swift

Issue #606

Use ObjectIdentifier

A unique identifier for a class instance or metatype.

1
2
3
4
5
6
7
8
9
final class Worker: Hashable {
    static func == (lhs: Worker, rhs: Worker) -> Bool {
        return ObjectIdentifier(lhs) == ObjectIdentifier(rhs)
    }

    func hash(into hasher: inout Hasher) {
        hasher.combine(ObjectIdentifier(self))
    }
}
2 minutes read (About 260 words)

How to edit selected item in list in SwiftUI

Issue #605

I use custom TextView in a master detail application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import SwiftUI

struct TextView: NSViewRepresentable {
    @Binding var text: String

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeNSView(context: Context) -> NSTextView {
        let textView = NSTextView()
        textView.delegate = context.coordinator
        return textView
    }

    func updateNSView(_ nsView: NSTextView, context: Context) {
        guard nsView.string != text else { return }
        nsView.string = text
    }

    class Coordinator: NSObject, NSTextViewDelegate {
        let parent: TextView

        init(_ textView: TextView) {
            self.parent = textView
        }

        func textDidChange(_ notification: Notification) {
            guard let textView = notification.object as? NSTextView else { return }
            self.parent.text = textView.string
        }
    }
}

No matter which item user selects, textView always updates the first one

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
struct Book {
   var name: String = ""
}

class Store: ObservableObject {
    @Published var books: [Book] = []
}

struct MainView: View {
    @EnvironmentObject var store: Store

    var body: some View {
        List {
            ForEach(store.books.enumerated().map({ $0 }), id: \.element.id) { index, book in {
                Text(book.name)
                .onTapGesture {
                    self.store.selectedIndex = index
                }
            }
        }

        HStack {
            TextView($store.books[store.selectedIndex].name)
        }
    }
}

The fix is to pass selected object instead of using subscript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
struct MainView: View {
    @EnvironmentObject var store: Store

    var body: some View {
        List {
            ForEach(store.books.enumerated().map({ $0 }), id: \.element.id) { index, book in {
                Text(book.name)
                .onTapGesture {
                    self.store.selectedBook = self.store.books[index]
                }
            }
        }

        HStack {
            TextView($store.selectedBook.name)
        }
    }
}

And we need to save selectedBook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Store: ObservableObject {
    @Published var books: [Book] = []

    @Published var selectedBook: Book = Book(name: "") {
        didSet {
            saveSelected()
        }
    }

    func saveSelected() {
        guard let index = self.books.firstIndex(where: { $0.id == selectedBook.id }) else {
            return
        }

        books[index] = selectedBook
    }
}

Read more

Updated at 2020-06-01 02:13:51

a few seconds read (About 100 words)

How to log in SwiftUI

Issue #604

I see that the modifier needs to do something on the content, otherwise it is not getting called!
This logs on the modifier, when the View is created. A View won’t be recreated unless necessary

1
2
3
4
5
6
7
8
9
10
11
12
13
14
struct LogModifier: ViewModifier {
    let text: String
    func body(content: Content) -> some View {
        print(text)
        return content
            .onAppear {}
    }
}

extension View {
    func log(_ text: String) -> some View {
        self.modifier(LogModifier(text: text))
    }
}
1
2
3
4
VStack {
    Text("")
        .log("a text")
}

Another simpler way is to make an extension

1
2
3
4
5
6
extension View {
    func log(_ any: Any) -> Self {
        print("\(any)")
        return self
    }
}
2 minutes read (About 234 words)

How to mask with UILabel

Issue #603

Need to set correct frame for mask layer or UILabel, as it is relative to the coordinate of the view to be masked

1
2
3
4
5
6
7
8
9
let aView = UIView(frame: .init(x: 100, y: 110, width: 200, height: 100))

let textLayer = CATextLayer()
textLayer.foregroundColor = UIColor.white.cgColor
textLayer.string = "Hello world"
textLayer.font = UIFont.preferredFont(forTextStyle: .largeTitle)
textLayer.frame = aView.bounds

aView.layer.mask = textLayer

Use sizeToFit to ensure frame for UILabel

1
2
3
4
5
6
7
8
9
let label = UILabel()
label.frame.origin = CGPoint(x: 80, y: 80)

label.textColor = UIColor.black
label.font = UIFont.preferredFont(forTextStyle: .largeTitle)
label.text = "ABC"
label.sizeToFit()

aView.mask = label

Change bounds.origin

1
2
label.frame.origin = CGPoint(x: 50, y: 50)
aView.bounds.origin = label.frame.origin

Adding label to view hierarchy seems to remove masking effect. Need to set mask later

1
2
3
view.addSubview(aView)
view.addSubview(label)
aView.mask = label

Can’t add overlayView to UILabel and use UILabel as mask, cause cycler CALayer

After using UILabel as mask, its superview is nil

1
2
aView.mask = label
label.superview == nil

Mask with snapshot from UILabel. Need to set correct frame for aView and maskLayer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let maskLayer = CALayer()
maskLayer.contents = label.makeScreenshot().cgImage
maskLayer.contentsGravity = .resizeAspect

aView.frame = label.bounds
maskLayer.frame = aView.bounds
aView.layer.mask = maskLayer
label.addSubview(aView)

extension UIView {
    func makeScreenshot() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: self.bounds)
        return renderer.image { (context) in
            self.layer.render(in: context.cgContext)
        }
    }
}
a few seconds read (About 23 words)

How to avoid pitfalls in SwiftUI

Issue #602

Identify by unique id

1
2
3
ForEach(store.blogs.enumerated().map({ $0 }), id: \.element.id) { index, blog in

}

##

a few seconds read (About 38 words)

How to use application will terminate in macOS

Issue #601

On Xcode 11, applicationWillTerminate is not called because of default automatic termination on in Info.plist. Removing NSSupportsSuddenTermination to trigger will terminate notification

1
2
3
func applicationWillTerminate(_ notification: Notification) {
    save()
}
1
2
3
4
<key>NSSupportsAutomaticTermination</key>
<true/>
<key>NSSupportsSuddenTermination</key>
<true/>
a few seconds read (About 52 words)

How to sync multiple CAAnimation

Issue #600

Use same CACurrentMediaTime

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
final class AnimationSyncer {
    static let now = CACurrentMediaTime()

    func makeAnimation() -> CABasicAnimation {
        let animation = CABasicAnimation(keyPath: "opacity")
        animation.fillMode = .forwards
        animation.fromValue = 0
        animation.toValue = 1
        animation.repeatCount = .infinity
        animation.duration = 2
        animation.beginTime = Self.now
        animation.autoreverses = true
        animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        return animation
    }
}
a few seconds read (About 41 words)

How to use TabView with enum in SwiftUI

Issue #599

Specify tag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
enum Authentication: Int, Codable {
    case key
    case certificate
}


TabView(selection: $authentication) {
    KeyAuthenticationView()
        .tabItem {
            Text("🔑 Key")
        }
        .tag(Authentication.key)
    CertificateAuthenticationView()
        .tabItem {
            Text("📰 Certificate")
        }
        .tag(Authentication.certificate)
}

Updated at 2021-02-23 00:45:29

6 minutes read (About 898 words)

How to build SwiftUI style UICollectionView data source in Swift

Issue #598

It’s hard to see any iOS app which don’t use UITableView or UICollectionView, as they are the basic and important foundation to represent data. UICollectionView is very basic to use, yet a bit tedious for common use cases, but if we abstract over it, then it becomes super hard to customize. Every app is unique, and any attempt to wrap around UICollectionView will fail horribly. A sensable approach for a good abstraction is to make it super easy for normal cases, and easy to customize for advanced scenarios.

I’m always interested in how to make UICollectionView easier and fun to write and have curated many open sources here data source. Many of these data source libraries try to come up with totally different namings and complex paradigm which makes it hard to onboard, and many are hard to customize.

In its simplest form, what we want in a UICollectionView data source is cell = f(state), which means our cell representation is just a function of the state. We just want to set model to the cell, the correct cell, in a type safe manner.

Generic data source

The basic is to make a generic data source that sticks with a particular cell

1
2
3
4
5
class DataSource<T>: NSObject {
    let items: [T]
    let configure: (T, UICollectionViewCell) -> Void
    let select: (UICollectionViewCell, IndexPath) -> Void
}

This works for basic usage, and we can create multiple DataSource for each kind of model. The problem is it’s hard to subclass DataSource as generic in Swift and inheritance for ObjcC NSObject don’t work well.

Check for the types

Seeing the problem with generic data source, I’ve tried another approach with Upstream where it’s easier to declare sections and models.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let sections: [Section] = [
    Section(
        header: Header(model: Model.header("Information"), viewType: HeaderView.self),
        items: [
            Item(model: Model.avatar(avatarUrl), cellType: AvatarCell.self),
            Item(model: Model.name("Thor"), cellType: NameCell.self),
            Item(model: Model.location("Asgard"), cellType: NameCell.self)
        ]
    ),
    Section(
        header: Header(model: Model.header("Skills"), viewType: HeaderView.self),
        items: [
            Item(model: Model.skill("iOS"), cellType: SkillCell.self),
            Item(model: Model.skill("Android"), cellType: SkillCell.self)
        ]
    )
]

adapter.reload(sections: sections)

This uses the Adapter pattern and we need to handle AdapterDelegate. To avoid the generic problem, this Adapter store items as Any, so we need to type cast all the time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
extension ProfileViewController: AdapterDelegate {
    func configure(model: Any, view: UIView, indexPath: IndexPath) {
        guard let model = model as? Model else {
            return
        }

        switch (model, view) {
        case (.avatar(let string), let cell as Avatarcell):
            cell.configure(string: string)
        case (.name(let name), let cell as NameCell):
            cell.configure(string: name)
        case (.header(let string), let view as HeaderView):
            view.configure(string: string)
        default:
            break
        }
    }
}

The benefit is that we can easily subclass this Adapter manager to customize the behaviour, here is how to make accordion 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class AccordionManager<T>: Manager<T> {
    private var collapsedSections = Set<Int>()
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return collapsedSections.contains(section)
            ? 0 : sections[section].items.count
    }
    
    func toggle(section: Int) {
        if collapsedSections.contains(section) {
            collapsedSections.remove(section)
        } else {
            collapsedSections.insert(section)
        }
        
        let indexSet = IndexSet(integer: section)
        tableView?.reloadSections(indexSet, with: .automatic)
    }
}

SwiftUI

SwiftUI comes in iOS 13 with a very concise and easy to use syntax. SwiftUI has good diffing so we just need to update our models so the whole content will be diffed and rendered again.

1
2
3
4
5
6
7
8
9
10
11
12
var body: some View {
    List {
        ForEach(blogs) { blog in
            VStack {
                Text(blog.name)
            }
            .onTap {
                print("cell was tapped")
            }
        }
    }
}

SwiftUI style with diffing

I built DeepDiff before and it was used by many people. Now I’m pleased to introduce Micro which is a SwiftU style with DeepDiff powered so it performs fast diffing whenever state changes.

With Micro we can just use the familiar forEach to declare Cell, and the returned State will tell DataSource to update the UICollectionView.

Every time state is assigned, UICollectionView will be fast diffed and reloaded. The only requirement is that your model should conform to DiffAware with diffId so DeepDiff knows how to diff for changes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let dataSource = DataSource(collectionView: collectionView)
dataSource.state = State {
    ForEach(blogs) { blog in
        Cell<BlogCell>() { context, cell in
            cell.nameLabel.text = blog.name
        }
        .onSelect { context in 
            print("cell at index \(context.indexPath.item) is selected")
        }
        .onSize { context in 
            CGSize(
                width: context.collectionView.frame.size.width, 
                height: 40
            )
        }
    }
}

DataSource is completely overridable, if you want to customize any methods, just subclass DataSource, override methods and access its state.models 

1
2
3
4
5
6
class CustomDataSource: DataSource {
    override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let blog = state.models[indexPath.item] as? Blog
        print(blog)
    }
}

Diffable data source in iOS 13

In iOS 13, Apple adds Using Collection View Compositional Layouts and Diffable Data Sources which is very handy.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
func makeDataSource() -> UITableViewDiffableDataSource<Section, Contact> {
    let reuseIdentifier = cellReuseIdentifier

    return UICollectionViewDiffableDataSource(
        collectionView: collectionView,
        cellProvider: {  collectionView, indexPath, blog in
            let cell = tableView.dequeueReusableCell(
                withIdentifier: reuseIdentifier,
                for: indexPath
            )

            cell.textLabel?.text = blog.name
            cell.detailTextLabel?.text = blog.email
            return cell
        }
    )
}

This is iOS 13+ only, and the main components are the cellProvider acting as cellForItemAtIndexPath, and the snapshot for diffing. It also supports section.

1
2
let snapshot = NSDiffableDataSourceSnapshot<Section, Blog>()
dataSource.apply(snapshot, animatingDifferences: animate)
a few seconds read (About 36 words)

How to make round border in SwiftUI

Issue #597

1
2
3
4
5
6
7
8
TextView(font: R.font.text!, lineCount: nil, text: $text, isFocus: $isFocus)
.padding(8)
.background(R.color.inputBackground)
.cornerRadius(10)
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(isFocus ? R.color.inputBorderFocus : Color.clear, lineWidth: 1)
)
a few seconds read (About 29 words)

How to mock in Swift

Issue #596

Unavailable init

1
2
3
4
5
UNUserNotificationCenter.current().getNotificationSettings(completionHandler: { (settings: UNNotificationSettings) in
    let status: UNAuthorizationStatus = .authorized
    settings.setValue(status.rawValue, forKey: "authorizationStatus")
    completionHandler(settings)
})
a minute read (About 126 words)

How to add drag and drop in SwiftUI

Issue #594

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
struct SelectFileView: View {
    let buttonTitle: String
    @State var isDrop: Bool = false

    var body: some View {
        VStack(alignment: .leading) {
            Button(action: {}) {
                Text(buttonTitle)
            }
            .buttonStyle(ActionButtonStyle())
            .offset(x: -16)
            Text("Alternatively, you can drag and drop file here")
                .font(.footnote)
                .foregroundColor(Color.gray)
        }
        .border(isDrop ? R.color.separator : Color.clear)
        .onDrop(of: [Constants.urlFileType], delegate: self)
        .padding(.bottom, 32)
    }
}

extension SelectFileView: DropDelegate {
    func dropEntered(info: DropInfo) {
        self.isDrop = true
    }

    func dropExited(info: DropInfo) {
        self.isDrop = false
    }

    func performDrop(info: DropInfo) -> Bool {
        guard
            let itemProvider = info.itemProviders(for: [Constants.urlFileType]).first
        else { return false }

        itemProvider.loadItem(forTypeIdentifier: Constants.urlFileType, options: nil) { item, error in
            guard
                let data = item as? Data,
                let url = URL(dataRepresentation: data, relativeTo: nil)
            else { return }
            
        }

        return true
    }
}

Updated at 2020-07-09 01:45:55

a minute read (About 170 words)

How to make radio button group in SwiftUI

Issue #592

Use picker with Radio style

Hard to customize

1
2
3
4
Picker(selection: Binding<Bool>.constant(true), label: EmptyView()) {
    Text("Production").tag(0)
    Text("Sandbox").tag(1)
}.pickerStyle(RadioGroupPickerStyle())

Use custom view

Use contentShape to make whole button tappable.
Make custom Binding for our enum

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
struct EnvironmentView: View {
    @Binding var input: Input

    var body: some View {
        VStack(alignment: .leading) {
                RadioButton(text: "Production", isOn: binding(for: .production))
                RadioButton(text: "Sandbox", isOn: binding(for: .sandbox))
         }
    }

    private func binding(for environment: Input.Environment) -> Binding<Bool> {
        Binding<Bool>(
            get: { self.input.environment == environment },
            set: { flag in
                if flag {
                    self.input.environment = environment
                }
            }
        )
    }
}

struct RadioButton: View {
    let text: String
    @Binding var isOn: Bool

    var body: some View {
        Button(action: {
            self.isOn.toggle()
        }) {
            HStack(alignment: .top) {
                Circle()
                    .fill(isOn ? R.color.primary : Color.clear)
                    .overlay(Circle().stroke(R.color.primary))
                    .frame(width: 18, height: 18)
                Text(text)
                    .foregroundColor(R.color.text)
            }
            .contentShape(Rectangle())
        }
        .buttonStyle(RadioButtonStyle())
    }
}

struct RadioButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .padding(.vertical, 4)
            .padding(.horizontal, 8)
            .border(SeparatorShapeStyle(), width: 0)
            .background(Color.clear)
    }
}
a minute read (About 215 words)

How to make borderless material NSTextField in SwiftUI for macOS

Issue #590

Use custom NSTextField as it is hard to customize TextFieldStyle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import SwiftUI

struct MaterialTextField: View {
    let placeholder: String
    @Binding var text: String
    @State var isFocus: Bool = false

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            BorderlessTextField(placeholder: placeholder, text: $text, isFocus: $isFocus)
                .frame(maxHeight: 40)
            Rectangle()
                .foregroundColor(isFocus ? R.color.separatorFocus : R.color.separator)
                .frame(height: isFocus ? 2 : 1)
        }
    }
}

class FocusAwareTextField: NSTextField {
    var onFocusChange: (Bool) -> Void = { _ in }

    override func becomeFirstResponder() -> Bool {
        let textView = window?.fieldEditor(true, for: nil) as? NSTextView
        textView?.insertionPointColor = R.nsColor.action
        onFocusChange(true)
        return super.becomeFirstResponder()
    }
}

struct BorderlessTextField: NSViewRepresentable {
    let placeholder: String
    @Binding var text: String
    @Binding var isFocus: Bool

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeNSView(context: Context) -> NSTextField {
        let textField = FocusAwareTextField()
        textField.placeholderAttributedString = NSAttributedString(
            string: placeholder,
            attributes: [
                NSAttributedString.Key.foregroundColor: R.nsColor.placeholder
            ]
        )
        textField.isBordered = false
        textField.delegate = context.coordinator
        textField.backgroundColor = NSColor.clear
        textField.textColor = R.nsColor.text
        textField.font = R.font.text
        textField.focusRingType = .none
        textField.onFocusChange = { isFocus in
            self.isFocus = isFocus
        }

        return textField
    }

    func updateNSView(_ nsView: NSTextField, context: Context) {
        nsView.stringValue = text
    }

    class Coordinator: NSObject, NSTextFieldDelegate {
        let parent: BorderlessTextField

        init(_ textField: BorderlessTextField) {
            self.parent = textField
        }

        func controlTextDidEndEditing(_ obj: Notification) {
            self.parent.isFocus = false
        }

        func controlTextDidChange(_ obj: Notification) {
            guard let textField = obj.object as? NSTextField else { return }
            self.parent.text = textField.stringValue
        }
    }
}
2 minutes read (About 369 words)

How to make focusable NSTextField in macOS

Issue #589

Use onTapGesture

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import SwiftUI

struct MyTextField: View {
    @Binding
    var text: String
    let placeholder: String
    @State
    private var isFocus: Bool = false

    var body: some View {
        FocusTextField(text: $text, placeholder: placeholder, isFocus: $isFocus)
            .padding()
            .cornerRadius(4)
            .overlay(
                RoundedRectangle(cornerRadius: 4)
                    .stroke(isFocus ? Color.accentColor: Color.separator)
            )
            .onTapGesture {
                isFocus = true
            }
    }
}

private struct FocusTextField: NSViewRepresentable {
    @Binding
    var text: String
    let placeholder: String
    @Binding
    var isFocus: Bool

    func makeNSView(context: Context) -> NSTextField {
        let tf = NSTextField()
        tf.focusRingType = .none
        tf.isBordered = false
        tf.isEditable = true
        tf.isSelectable = true
        tf.drawsBackground = false
        tf.delegate = context.coordinator
        tf.placeholderString = placeholder
        return tf
    }

    func updateNSView(
        _ nsView: NSTextField,
        context: Context
    ) {
        nsView.font = NSFont.preferredFont(forTextStyle: .body, options: [:])
        nsView.textColor = NSColor.labelColor
        nsView.stringValue = text
    }

    func makeCoordinator() -> FocusTextField.Coordinator {
        Coordinator(parent: self)
    }

    class Coordinator: NSObject, NSTextFieldDelegate  {
        let parent: FocusTextField
        init(parent: FocusTextField) {
            self.parent = parent
        }

        func controlTextDidBeginEditing(_ obj: Notification) {
            parent.isFocus = true
        }

        func controlTextDidEndEditing(_ obj: Notification) {
            parent.isFocus = false
        }

        func controlTextDidChange(_ obj: Notification) {
            let textField = obj.object as! NSTextField
            parent.text = textField.stringValue
        }
    }
}

becomeFirstResponder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class FocusAwareTextField: NSTextField {
    var onFocusChange: (Bool) -> Void = { _ in }

    override func becomeFirstResponder() -> Bool {
        let textView = window?.fieldEditor(true, for: nil) as? NSTextView
        textView?.insertionPointColor = R.nsColor.action
        onFocusChange(true)
        return super.becomeFirstResponder()
    }
}

textField.delegate // NSTextFieldDelegate
func controlTextDidEndEditing(_ obj: Notification) {
    onFocusChange(false)
}

NSTextField and NSText

https://stackoverflow.com/questions/25692122/how-to-detect-when-nstextfield-has-the-focus-or-is-its-content-selected-cocoa

When you clicked on search field, search field become first responder once, but NSText will be prepared sometime somewhere later, and the focus will be moved to the NSText.

I found out that when NSText is prepared, it is set to self.currentEditor() . The problem is that when becomeFirstResponder()’s call, self.currentEditor() hasn’t set yet. So becomeFirstResponder() is not the method to detect it’s focus.

On the other hand, when focus is moved to NSText, text field’s resignFirstResponder() is called, and you know what? self.currentEditor() has set. So, this is the moment to tell it’s delegate that that text field got focused

Use NSTextView

Any time you want to customize NSTextField, use NSTextView instead

1
2
3
4
5
6
7
8
// NSTextViewDelegate
func textDidBeginEditing(_ notification: Notification) {
    parent.isFocus = true
}

func textDidEndEditing(_ notification: Notification) {
    parent.isFocus = false
}

Updated at 2021-02-23 22:32:07

a minute read (About 206 words)

How to observe focus event of NSTextField in macOS

Issue #589

becomeFirstResponder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class FocusAwareTextField: NSTextField {
    var onFocusChange: (Bool) -> Void = { _ in }

    override func becomeFirstResponder() -> Bool {
        let textView = window?.fieldEditor(true, for: nil) as? NSTextView
        textView?.insertionPointColor = R.nsColor.action
        onFocusChange(true)
        return super.becomeFirstResponder()
    }
}

textField.delegate // NSTextFieldDelegate
func controlTextDidEndEditing(_ obj: Notification) {
    onFocusChange(false)
}

NSTextField and NSText

https://stackoverflow.com/questions/25692122/how-to-detect-when-nstextfield-has-the-focus-or-is-its-content-selected-cocoa

When you clicked on search field, search field become first responder once, but NSText will be prepared sometime somewhere later, and the focus will be moved to the NSText.

I found out that when NSText is prepared, it is set to self.currentEditor() . The problem is that when becomeFirstResponder()’s call, self.currentEditor() hasn’t set yet. So becomeFirstResponder() is not the method to detect it’s focus.

On the other hand, when focus is moved to NSText, text field’s resignFirstResponder() is called, and you know what? self.currentEditor() has set. So, this is the moment to tell it’s delegate that that text field got focused

Use NSTextView

Any time you want to customize NSTextField, use NSTextView instead

1
2
3
4
5
6
7
8
// NSTextViewDelegate
func textDidBeginEditing(_ notification: Notification) {
    parent.isFocus = true
}

func textDidEndEditing(_ notification: Notification) {
    parent.isFocus = false
}
a few seconds read (About 47 words)

How to change caret color of NSTextField in macOS

Issue #588

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class FocusAwareTextField: NSTextField {
    var onFocus: () -> Void = {}
    var onUnfocus: () -> Void = {}

    override func becomeFirstResponder() -> Bool {
        onFocus()
        let textView = window?.fieldEditor(true, for: nil) as? NSTextView
        textView?.insertionPointColor = R.nsColor.action
        return super.becomeFirstResponder()
    }

    override func resignFirstResponder() -> Bool {
        onUnfocus()
        return super.resignFirstResponder()
    }
}
2 minutes read (About 363 words)

How to make TextView in SwiftUI for macOS

Issue #587

Use NSTextVIew

From https://github.com/twostraws/ControlRoom/blob/main/ControlRoom/NSViewWrappers/TextView.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import SwiftUI

/// A wrapper around NSTextView so we can get multiline text editing in SwiftUI.
struct TextView: NSViewRepresentable {
    @Binding private var text: String
    private let isEditable: Bool

    init(text: Binding<String>, isEditable: Bool = true) {
        _text = text
        self.isEditable = isEditable
    }

    init(text: String) {
        self.init(text: Binding<String>.constant(text), isEditable: false)
    }

    func makeNSView(context: Context) -> NSScrollView {
        let text = NSTextView()
        text.backgroundColor = isEditable ? .textBackgroundColor : .clear
        text.delegate = context.coordinator
        text.isRichText = false
        text.font = NSFont.monospacedSystemFont(ofSize: NSFont.systemFontSize, weight: .regular)
        text.autoresizingMask = [.width]
        text.translatesAutoresizingMaskIntoConstraints = true
        text.isVerticallyResizable = true
        text.isHorizontallyResizable = false
        text.isEditable = isEditable

        let scroll = NSScrollView()
        scroll.hasVerticalScroller = true
        scroll.documentView = text
        scroll.drawsBackground = false

        return scroll
    }

    func updateNSView(_ view: NSScrollView, context: Context) {
        let text = view.documentView as? NSTextView
        text?.string = self.text

        guard context.coordinator.selectedRanges.count > 0 else {
            return
        }

        text?.selectedRanges = context.coordinator.selectedRanges
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, NSTextViewDelegate {
        var parent: TextView
        var selectedRanges = [NSValue]()

        init(_ parent: TextView) {
            self.parent = parent
        }

        func textDidChange(_ notification: Notification) {
            guard let textView = notification.object as? NSTextView else { return }
            parent.text = textView.string
            selectedRanges = textView.selectedRanges
        }
    }
}

Use xib

Create a xib called ScrollableTextView, and drag just Scrollable text view as top object

Screenshot 2020-01-29 at 06 49 55

Connect just the textView property

1
2
3
4
5
import AppKit

class ScrollableTextView: NSScrollView {
    @IBOutlet var textView: NSTextView!
}

Conform to NSViewRepresentable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import SwiftUI

struct TextView: NSViewRepresentable {
    @Binding var text: String

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeNSView(context: Context) -> ScrollableTextView {
        var views: NSArray?
        Bundle.main.loadNibNamed("ScrollableTextView", owner: nil, topLevelObjects: &views)
        let scrollableTextView = views!.compactMap({ $0 as? ScrollableTextView }).first!
        scrollableTextView.textView.delegate = context.coordinator
        return scrollableTextView
    }

    func updateNSView(_ nsView: ScrollableTextView, context: Context) {
        guard nsView.textView.string != text else { return }
        nsView.textView.string = text
    }

    class Coordinator: NSObject, NSTextViewDelegate {
        let parent: TextView

        init(_ textView: TextView) {
            self.parent = textView
        }

        func textDidChange(_ notification: Notification) {
            guard let textView = notification.object as? NSTextView else { return }
            self.parent.text = textView.string
        }
    }
}

There seems to be a bug that if we have open and close curly braces, any character typed into NSTextView will move the cursor to the end. This is easily fixed with a check in updateNSView

Updated at 2021-02-24 21:50:17

2 minutes read (About 287 words)

How to use custom font in SwiftUI

Issue #586

In macOS

Add fonts to target. In Info.plist, just need to specify font locations, most of the time they are at Resources folder

ATSApplicationFontsPath (String - macOS) identifies the location of a font file or directory of fonts in the bundle’s Resources directory. If present, macOS activates the fonts at the specified path for use by the bundled app. The fonts are activated only for the bundled app and not for the system as a whole. The path itself should be specified as a relative directory of the bundle’s Resources directory. For example, if a directory of fonts was at the path /Applications/MyApp.app/Contents/Resources/Stuff/MyFonts/, you should specify the string Stuff/MyFonts/ for the value of this key.

1
2
<key>ATSApplicationFontsPath</key>
<string>.</string>

Define font weight as enums, and base on ContentSizeCategory

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
enum OpenSans: String {
    case bold = "OpenSans-Bold"
    case semiBold = "OpenSans-SemiBold"
    case extraBold = "OpenSans-ExtraBold"
    case light = "OpenSans-Light"
    case regular = "OpenSans-Regular"
}

enum FiraCode: String {
    case bold = "FiraCode-Bold"
    case medium = "FiraCode-Medium"
    case light = "FiraCode-Light"
    case regular = "FiraCode-Regular"
    case retina = "FiraCode-Retina"
}

extension ContentSizeCategory {
    var size: CGFloat {
        switch self {
        case .small:
            return 14
        case .medium:
            return 16
        case .large:
            return 20
        default:
            return 14
        }
    }
}

extension View {
    func customFont(_ font: OpenSans, category: ContentSizeCategory) -> some View {
        return self.customFont(font.rawValue, category: category)
    }

    func customFont(_ name: String, category: ContentSizeCategory) -> some View {
        return self.font(.custom(name, size: category.size))
    }
}

Then we can specify font weight, thanks to function overloading

1
2
Text("Welcome")
    .customFont(OpenSans.bold, category: .large)

In iOS

Observe @Environment(\.sizeCategory) var sizeCategory in ViewModifier

Read more

a minute read (About 153 words)

How to use Firebase Crashlytics in macOS app

Issue #585

New Firebase Crashlytics

Follow the new Firebase Crashlytics guide Get started with Firebase Crashlytics using the Firebase Crashlytics SDK

CocoaPods

Specify FirebaseCore for community managed macOS version of Firebase

1
2
3
4
5
6
7
8
9
10
platform :osx, '10.13'

target 'MyMacApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  
  pod 'FirebaseCore'
  pod 'Firebase/Crashlytics'

end

Signing and capabilities

Under Hardware runtime, check Disable library validation
Under App sandbox, enable Outgoing connections (Client)

Run script

Add a new run script build phrase to the last

1
"${PODS_ROOT}/FirebaseCrashlytics/run"

In that build phase, under Input Files, specify dsym and info plist file for dsym to be recognized

1
2
$(SRCROOT)/$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)
${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}/Contents/Resources/DWARF/${TARGET_NAME}

AppDelegate

1
2
3
4
import FirebaseCore
import FirebaseCrashlytics

FirebaseApp.configure()
a minute read (About 196 words)

How to test drag and drop in UITests

Issue #583

In UITests, we can use press from XCUIElement to test drag and drop

1
2
3
4
5
let fromCat = app.buttons["cat1"].firstMatch
let toCat = app.buttons["cat2"]
let fromCoordinate = fromCat.coordinate(withNormalizedOffset: CGVector(dx: 0, dy: 0))
let toCoordinate = toCat.coordinate(withNormalizedOffset: CGVector(dx: 0, dy: -0.5))
fromCoordinate.press(forDuration: 1, thenDragTo: toCoordinate)

and then take screenshot

1
2
3
4
5
let screenshot = XCUIScreen.main.screenshot()
let attachment = XCTAttachment(screenshot: screenshot)
attachment.lifetime = .keepAlways
attachment.name = name
add(attachment)

Screenshot capturing happens after the action, so it may be too late. One way is to inject launch arguments, like app.launchArguments.append("--dragdrop") to alter some code in the app.

We can also swizzle gesture recognizer to alter behavior

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
extension UILongPressGestureRecognizer {
    @objc var uiTests_state: UIGestureRecognizer.State {
        let state = self.uiTests_state
        if state == .ended {
            return .changed
        } else {
            return state
        }
    }
}

let originalSelector = #selector(getter: UILongPressGestureRecognizer.state)
let swizzledSelector = #selector(getter: UILongPressGestureRecognizer.uiTests_state)

let originalMethod = class_getInstanceMethod(UILongPressGestureRecognizer.self, originalSelector)!
let swizzledMethod = class_getInstanceMethod(UILongPressGestureRecognizer.self, swizzledSelector)!

let didAddMethod = class_addMethod(UILongPressGestureRecognizer.self, originalSelector, method_getImplementation(swizzledMethod), method_getTypeEncoding(swizzledMethod))

if didAddMethod {
    class_replaceMethod(UILongPressGestureRecognizer.self, swizzledSelector, method_getImplementation(originalMethod), method_getTypeEncoding(originalMethod))
} else {
    method_exchangeImplementations(originalMethod, swizzledMethod)
}
6 minutes read (About 906 words)

How to set corner radius in iOS

Issue #582

Use View Debugging

Run on device, Xcode -> Debug -> View debugging -> Rendering -> Color blended layer
On Simulator -> Debug -> Color Blended Layer

Corner radius

Okay. Talked to a Core Animation engineer again:

  • cornerRadius was deliberately improved in Metal so it could be used everywhere.
  • Using a bitmap is WAY heavier in terms of memory and performance.
  • CALayer maskLayer is still heavy.

https://developer.apple.com/documentation/quartzcore/calayer/1410818-cornerradius

Setting the radius to a value greater than 0.0 causes the layer to begin drawing rounded corners on its background. By default, the corner radius does not apply to the image in the layer’s contents property; it applies only to the background color and border of the layer. However, setting the masksToBounds property to true causes the content to be clipped to the rounded corners.

https://developer.apple.com/documentation/quartzcore/calayer/1410896-maskstobounds

When the value of this property is true, Core Animation creates an implicit clipping mask that matches the bounds of the layer and includes any corner radius effects. If a value for the mask property is also specified, the two masks are multiplied to get the final mask value.

Mask layer

layer.cornerRadius, with or without layer.maskedCorners causes blending
Use mask layer instead of layer.cornerRadius to avoid blending, but mask causes offscreen rendering

1
2
3
4
5
6
7
8
let mask = CAShapeLayer()
let path = UIBezierPath(
    roundedRect: bounds,
    byRoundingCorners: [.topLeft, .topRight, .bottomLeft, .bottomRight],
    cornerRadii: CGSize(width: 20, height: 20)
)
mask.path = path.cgPath
layer.mask = mask

Offscreen rendering

Instruments’ Core Animation Tool has an option called Color Offscreen-Rendered Yellow that will color regions yellow that have been rendered with an offscreen buffer (this option is also available in the Simulator’s Debug menu). Be sure to also check Color Hits Green and Misses Red. Green is for whenever an offscreen buffer is reused, while red is for when it had to be re-created.

Offscreen drawing on the other hand refers to the process of generating bitmap graphics in the background using the CPU before handing them off to the GPU for onscreen rendering. In iOS, offscreen drawing occurs automatically in any of the following cases:

Core Graphics (any class prefixed with CG)
The drawRect() method, even with an empty implementation.
CALayers with a shouldRasterize property set to YES.
CALayers using masks (setMasksToBounds) and dynamic shadows (setShadow).
Any text displayed on screen, including Core Text.
Group opacity (UIViewGroupOpacity).

Instruments

Read more

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@abstract Sets the corner rounding method to use on the ASDisplayNode.
There are three types of corner rounding provided by Texture: CALayer, Precomposited, and Clipping.

- ASCornerRoundingTypeDefaultSlowCALayer: uses CALayer's inefficient .cornerRadius property. Use
this type of corner in situations in which there is both movement through and movement underneath
the corner (very rare). This uses only .cornerRadius.

- ASCornerRoundingTypePrecomposited: corners are drawn using bezier paths to clip the content in a
CGContext / UIGraphicsContext. This requires .backgroundColor and .cornerRadius to be set. Use opaque
background colors when possible for optimal efficiency, but transparent colors are supported and much
more efficient than CALayer. The only limitation of this approach is that it cannot clip children, and
thus works best for ASImageNodes or containers showing a background around their children.

- ASCornerRoundingTypeClipping: overlays 4 separate opaque corners on top of the content that needs
corner rounding. Requires .backgroundColor and .cornerRadius to be set. Use clip corners in situations
in which is movement through the corner, with an opaque background (no movement underneath the corner).
Clipped corners are ideal for animating / resizing views, and still outperform CALayer.

Generally, on iOS, pixel effects and Quartz / Core Graphics drawing are not hardware accelerated, and most other things are.
The following things are not hardware accelerated, which means that they need to be done in software (offscreen):
Anything done in a drawRect. If your view has a drawRect, even an empty one, the drawing is not done in hardware, and there is a performance penalty.
Any layer with the shouldRasterize property set to YES.
Any layer with a mask or drop shadow.
Text (any kind, including UILabels, CATextLayers, Core Text, etc).
Any drawing you do yourself (either onscreen or offscreen) using a CGContext.

For example, writing your own draw method with Core Graphics means your rendering will technically be done in software (offscreen) as opposed to being hardware accelerated like it is when you use a normal CALayer. This is why manually rendering a UIImage with a CGContext is slower than just assigning the image to a UIImageView.

if layer’s contents is nil or this contents has a transparent background, you just need to set cornerRadius. For UILabel, UITextView and UIButton, you can just set layer’s backgroundColor and cornerRadius to get a rounded corner. Note: UILabel’s backgroundColor is not its layer’s backgroundColor.

3 minutes read (About 407 words)

How to work with SceneDelegate in iOS 12

Issue #580

Events

open url

Implement scene(_:openURLContexts:) in your scene delegate.

If the URL launches your app, you will get scene(_:willConnectTo:options:) instead and it’s in the options.

life cycle

Here’s how it works: If you have an “Application Scene Manifest” in your Info.plist and your app delegate has a configurationForConnectingSceneSession method, the UIApplication won’t send background and foreground lifecycle messages to your app delegate. That means the code in these methods won’t run:

applicationDidBecomeActive
applicationWillResignActive
applicationDidEnterBackground
applicationWillEnterForeground
The app delegate will still receive the willFinishLaunchingWithOptions: and didFinishLaunchingWithOptions: method calls so any code in those methods will work as before.

UIApplication notifications

Notifications still trigger in iOS 13 if adopting SceneDelegate

1
2
UIApplication.didBecomeActiveNotification
UIApplication.willResignActiveNotification

https://developer.apple.com/documentation/uikit/app_and_environment/scenes/preparing_your_ui_to_run_in_the_foreground

Use foreground transitions to prepare your app’s UI to appear onscreen. An app’s transition to the foreground is usually in response to a user action. For example, when the user taps the app’s icon, the system launches the app and brings it to the foreground. Use a foreground transition to update your app’s UI, acquire resources, and start the services you need to handle user requests.

All state transitions result in UIKit sending notifications to the appropriate delegate object:

In iOS 13 and later—A UISceneDelegate object.
In iOS 12 and earlier—The UIApplicationDelegate object.

You can support both types of delegate objects, but UIKit always uses scene delegate objects when they are available. UIKit notifies only the scene delegate associated with the specific scene that is entering the foreground. For information about how to configure scene support, see Specifying the Scenes Your App Supports.

keyWindow

Show most recent activeUIWindow

1
UIApplication.shared.keyWindow

This property holds the UIWindow object in the windows array that is most recently sent the makeKeyAndVisible() message.

AppDelegate vs SceneDelegate

Get sceneDelegate from AppDelegate

1
UIApplication.shared.openSessions.first?.scene?.delegate

order

1
2
3
4
SceneDelegate.sceneDidBecomeActive
UIApplication.didBecomeActiveNotification
SceneDelegate.sceneWillResignActive
UIApplication.willResignActiveNotification

Read more

a few seconds read (About 111 words)

How to handle radio group for NSButton

Issue #579

Use same action, or we can roll our own implementation

An NSButton configured as a radio button (with the -buttonType set to NSRadioButton), will now operate in a radio button group for applications linked on 10.8 and later. To have the button work in a radio group, use the same -action for each NSButton instance, and have the same superview for each button. When these conditions are met, checking one button (by changing the -state to 1), will uncheck all other buttons (by setting their -state to 0).

1
2
3
4
5
6
7
import Omnia

@IBAction func onModeButtonTouch(_ sender: NSRadioButton) {
    for button in [mode1Button, mode2Button] {
        button?.isOn = button === sender
    }
}
3 minutes read (About 427 words)

How to specify locale in Swift

Issue #578

Locale

Read Language and Locale IDs

1
2
zh-Hans_HK
[language designator]-[script designator]_[region designator]

Language IDs

A language ID identifies a language used in many regions, a dialect used in a specific region, or a script used in multiple regions. To specify a language used in many regions, use a language designator by itself. To specify a specific dialect, use a hyphen to combine a language designator with a region designator. To specify a script, combine a language designator with a script designator. For example, to specify common English, use the en language designator as the language ID. To specify the English language as it is used in the United Kingdom, use en-GB as the language ID.

Locale IDs

A locale ID identifies a specific region and its cultural conventions—such as the formatting of dates, times, and numbers. To specify a locale, use an underscore character to combine a language ID with a region designator, as shown in Table B-5. For example, the locale ID for English-language speakers in the United Kingdom is en_GB, while the locale for English-speaking residents of the United States is en_US.

Example

1
2
3
4
5
6
7
8
9
10
let formatter = DateFormatter()
formatter.dateStyle = .medium
formatter.timeStyle = .short
formatter.locale = Locale.current

10. jan. 2018, 16:50 // nb_NO
10. jan. 2018, 16:50 // nb_US iOS 12
10. jan. 2018, 4:50 pm // nb_US iOS 13
10 Jan 2018 at 16:50 // en_NO
Jan 10, 2018 at 4:50 PM // en_US

Date format

Use DateFormatter Style

Example short

Specifies a short style, typically numeric only, such as “11/23/37” or “3:30 PM”.

Example medium

Specifies a medium style, typically with abbreviated text, such as “Nov 23, 1937” or “3:30:32 PM”.

From template

If you need to define a format that cannot be achieved using the predefined styles, you can use the setLocalizedDateFormatFromTemplate(_:) to specify a localized date format from a template.

1
2
3
4
5
6
7
8
9
10
11
12
let dateFormatter = DateFormatter()
let date = Date(timeIntervalSinceReferenceDate: 410220000)
 
// US English Locale (en_US)
dateFormatter.locale = Locale(identifier: "en_US")
dateFormatter.setLocalizedDateFormatFromTemplate("MMMMd") // set template after setting locale
print(dateFormatter.string(from: date)) // December 31
 
// British English Locale (en_GB)
dateFormatter.locale = Locale(identifier: "en_GB")
dateFormatter.setLocalizedDateFormatFromTemplate("MMMMd") // // set template after setting locale
print(dateFormatter.string(from: date)) // 31 December

Read more

Follow

Links

Recent

Archives

Tags

algorithm1
android34
apple script3
catalyst1
ci3
cloud2
cocoapods4
combine5
core data5
csharp1
css6
dart4
database2
design2
electron5
featured10
firebase7
flutter4
git3
github5
go2
google1
iOS174
javascript51
kotlin27
layout4
life14
links9
macOS137
machine learning2
maps4
networking1
node13
objc2
react24
react native14
realm1
rx3
script2
spm5
swift365
swiftUI103
tech14
terminal9
testing17
tool1
tweet3
unity1
voip4
watchOS11
web5
work1
wwdc1
xcode25

Subscribe to Updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.
×