Issue #246

Use GMSMapStyle https://developers.google.com/maps/documentation/android-sdk/styling
Export styling json from https://mapstyle.withgoogle.com/

1
2

let mapStyleUrl = Bundle.main.url(forResource: "mapStyle", withExtension: "json")!
mapView.mapStyle = try? GMSMapStyle(contentsOfFileURL: mapStyleUrl)

To change overall color, search for mostly "elementType": "geometry" and "featureType": "water"

1
2
3
4
5
6
7
8

{
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#424242"
        }
    ]
}

1
2
3
4
5
6
7
8
9

{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#2E2E2E"
        }
    ]
}

Issue #245

Original post https://medium.com/fantageek/my-favourite-wwdc-2018-sessions-363d3fc9c9d5

Favourite WWDC 2018 sessions

This year I failed the lottery ticket to WWDC, and I also missed the keynote live stream because I was sailing on the Christian Radich outside Oslo fjord that day. Luckily all the videos are available on Apple Developer site very shortly, and we can watch them now on Chrome or the unofficial WWDC app on macOS. I recommend the WWDC macOS app as it allows to mark favourites and filter, also offers the ability to adjust play speed to 1.25 or 1.5 saves me some time watching.

This year WWDC focuses a lot on privacy, stability, and speed, which are all I wish, so many thanks to Apple engineers who made that happen, and the resit to install the so called more stable iOS 12 is real. As an iOS engineers, I like to focus more about the necessary things to me, that is about the Swift programming language, new changes in Cocoa Touch, enhancements in Xcode and testing tricks. I also like to explore more about machine learning so I’m very glad that Apple is investing more into this technology with the introduction of Turi Create and Create ML.

To me, APIs come and get deprecated very often and it’s good to know them, but the most important thing is to invest in your programming, debugging and testing skill which you can apply in many other platforms.

Continued from last year favourites list, below are my favourite sessions with personal notes. Things are listed in no particular order. Hope you find it useful.

Platforms State of the Union

If you don’t have time, you should watch only this session. Platform State of the Union is like keynote for developers as it highlights important changes.

• Privacy: Apple confirms on its commitment in privacy and security, also introduces password management feature and auto fill on iOS 12. Generating strong password, integrating with 3rd password management and quickly populating OTP field from SMS message have never been easier. GateKeeper gets some improvements as well and begins to require app to be notarised.

• iOS 12: huge improvement in performance, Siri gets smarter with Shortcut support, group calling in FaceTime and grouped notification. Also for emoji fan, Memoji was introduced.

• macOS 10.14 Mojave: more with Dark Mode. They demo mostly with Xcode in dark mode, which looks so cool. This year WWDC banner give hints about iOS and macOS cross-platform apps, which is partially true with Marzipan, a way to allow iOS apps to run on the mac.

• Xcode 10: with improvements in code editing and source control changes bar indicator. Debugging with memory debug tool, LLDB performance enhancement and particular the new build system completely rewritten in Swift with parallel tasks are exciting news.

• Swift 4.2: if you follow swift repo then Swift 4.2 may not be very surprising. There are also announcements for Swift 5 plan.

• Machine Learning: is never hotter than this. This year we see huge investments in machine learning with Create ML, Turi Create, Natural Language frameworks, CoreML 2, new detection capabilities in Vision.

• ARKit 2, watchOS 5, tvOS 12, AppStore Connect and AppStore Connect APIs are some other important news you don’t want to miss.

What’s new in Swift

Together with this session, I recommend you to read What’s new in Swift 4.2 summary which is very succinct. Besides improvement in complication and runtime, Swift 4.2 offers some new features: iterable enum case, synthesised Equatable and Hashable, handy functions for shuffling, random generating. To me, the need to explicitly handle Implicitly unwrapped optional is also a reasonable change.

What’s New in Cocoa Touch

This is a brief introduction to all changes coming to iOS 12, together with tips on how to be a good iOS citizen. Learn what can affect scrolling experience and prefetching technique, memory consumption and automatic backing stores, how to get the best from UIImage and UIImageView . AutoLayout engine got a lot of performance improvement so it won’t bother you any more. To me the most satisfying is to get all the UIKit notifications and classes reorganised under nested types, which makes code reasoning very easy.

Getting the Most out of Playgrounds in Xcode

I’ve written about Playground before and I’m very glad that Apple also invests a lot in it. The way people can interact and train model [Create ML](http://Introducing Create ML) in Playground is mesmerising. People may question how Playground works so well in session’s demos, but we can’t resist the new changes coming to Playground like Step by Step execution, markup rendering improvements and also how easy it is to consume custom frameworks. We can also now publish our own Playground through subscription.

What’s New in Core ML

Apple starts the machine learning trend last year with the introduction of Core ML. We might be excited and frustrated at the same time as Core ML is powerful but there’s no way we can customise it. Now the 2 parts tell us how to implement custom layer and model, techniques to reduce model size like quantisation and flexible model. This makes the foundation for improvement in Vision in object tracking and the debut of Natural Language framework. Machine learning has never been easier.

What’s New in Testing

I can’t miss any testing sessions as it is part of every day’s work. How can your program avoids regression bugs and ready for refactoring without any tests?

This session shows improvement in coverage and the introduction of xccov tool to help us build automation on top of coverage report. Parallel distributed testing in Xcode 10 can save us some time to have coffee. Another wonderful news is that tests have multiple order execution mode to avoid bugs due to implicit dependencies.

Testing Tips & Tricks 🌟

This is my most favourite. The session starts with a pyramid of tests with unit integration and end-to-end test analogy explanation, then to some very cool tips and tricks.

• Testing network request: I like the separation of APIRequest and APIRequestLoader with URLSession , dependency injection with default parameter and the customisation of URLProtocol in URLSessionConfiguration

• Testing notification: Notification is system wide and I try to avoid it as much as possible. This shows how to inject dependency with default parameter and use of own NotificationCenter instead of NotificationCenter.default to ease testing

• Testing location: build abstraction with LocationProvider and LocationFetcher . How to use custom protocol and protocol for delegate to mock during test

• Testing timer: how to use and mock RunLoop behaviour with Timer

Advanced Debugging with Xcode and LLDB

LLDB has been improved to enable to debugging reliability experience, issues with AST context corruption, Swift type resolution are now things in the past. We can review how to use some common LLDB commands with handy arguments, and how to use Xcode breakpoint to its best.

A Tour of UICollectionView 🌟

I begin to use UICollectionView more than UITableView , and it also has same code as NSCollectionView,which is more comfortable solution than the horrible NSTableView .

• Item size in UICollectionViewLayout : I often rely on UICollectionViewDelegateFlowLayout to specify item size but after watching this session, I feel like moving size related code to Layout object feels more like a good way to go

• Mosaic layout: This is not new, but good to watch again. You learn how to implement custom layout using cached layout attributes

• Data Source update: I didn’t expect Apple mentions this, but it is a good lesson on how UICollectionView handles batch update. I ‘ve written about this before in my A better way to update UICollectionView data in Swift with diff framework and that post gets a lot of attractions. In this session we need to remember that *ordering matters in data source update, but not in collection view update *❗️❗️❗️

Swift Generics

Generic was a core feature of Swift since the beginning, we all know that it helps us to implement generic code that can work with many types in a type safe manner. This session reminds that I ‘ve never learned enough, especially the reasonable design behind it.

The sessions showcases Collection protocol and its protocol inheritances: MutableCollection , BidirectionalCollection , RandomAccessCollection and how they can be combined to provide generic functionalities for conformers. The associatedtype requirement in each protocol, especially Index and Element, is very minimal and has enough constraints for the protocol to implement lots of necessary functionalities in its protocol extension, which is eye opening for me. I very like to read open source, so looking at the source code for such protocols helps me understand more.

The part about Fisher Yates shuffle algorithm details how we can come up with necessary protocol while still make them generic

Pay attention to when they mention count and map , you can learn more how each concrete type can hook into the customisation point in protocol extension

Finally learn the Liskov substitution principle with protocol in class inheritance. You should also Using Collections Effectively for how to utilise handy functions in Collection.

Data You Can Trust

Although Codable has a lot to offers in term of data integrity, this is good to know about to make sure the data you receive is actually the right data in correct format and structure. CommonCrypto is also part of new iOS SDK so you don’t need my Arcane library to handle encryption and hashing in your apps.

Embracing Algorithms

This is the most pleasant to watch as it is like a conversation between the speaker and the imaginary manager Crusty. Here I learn how to be aware of algorithm complexity and also how to utilise built in Foundation functions which are already optimised for performance.

After this session I can’t help myself but going to Swift repo to read the Algorithms.swift file immediately.

Image and Graphics Best Practices

Learn how image encoding and decoding works through data and image buffer and how that affects memory and performance. There are techniques like downsampling that can tackle this problem. This also recommends against using backing store, and instead, use UIImageView

A Guide to Turi Create

I’ve written about Turi Create before, but it is just scratching the surface of the many tasks offered by Turi. This year Apple releases Turi Create 5 with style transfer task, Vision Feature Print, GPU acceleration and recommender model improvements. I can’t wait to explore. And if you take a look at MLDataTable in Create ML framework, it looks like this has Turi ‘s SFrame under the hood.

That’s it. Thanks for reading. What are your favourite sessions this year? Please share in the comment section below

Issue #230

CAReplicatorLayer is a layer that creates a specified number of sublayer copies with varying geometric, temporal, and color transformations

Here we use instanceTransform which applies transformation matrix around the center of the replicator layer

Below is how we use replicatorLayer to replicate lots of line and rotate them around the center.

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

let replicatorLayer = CAReplicatorLayer()
let animation = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))

let line = CALayer()
let lineCount: Int = 12
let duration: TimeInterval = 1.0
let lineSize: CGSize = CGSize(width: 20, height: 6)
let lineColor: UIColor = UIColor.darkGray

let angle = CGFloat.pi * 2 / CGFloat(lineCount)
let rotation = CATransform3DMakeRotation(angle, 0, 0, 1.0)

replicatorLayer.instanceTransform = rotation
replicatorLayer.instanceCount = lineCount
replicatorLayer.instanceDelay = duration / TimeInterval(lineCount)

line.backgroundColor = lineColor.cgColor
line.frame.size = lineSize
line.cornerRadius = lineSize.height / 2

animation.fromValue = 1.0
animation.toValue = 0.0
animation.repeatCount = Float.greatestFiniteMagnitude
animation.timingFunction = CAMediaTimingFunction(name: .linear)
animation.duration = duration

replicatorLayer.addSublayer(line)
layer.addSublayer(replicatorLayer)

// x: 
// y: half the height, changing affects rotation of lines
line.position = CGPoint(x: 48, y: 75)

line.add(animation, forKey: nil)

Pay attention to position of the line. The larger the x, the closer to center. y should be half the height of the replicator layer size, changing it affects the skewness of the line.

Issue #229

Use keypath

1
2
3
4
5
6

let animation = CASpringAnimation(keyPath: #keyPath(CALayer.transform))
animation.fromValue = 0
animation.valueFunction = CAValueFunction(name: CAValueFunctionName.rotateZ)
animation.timingFunction = CAMediaTimingFunction(name: .easeIn)

animation.toValue = CGFloat.pi / 4

Avoid setting frame many times

Otherwise, frame is the box that covers the rotation transform, and backgroundColor now fills that huge box

1
2
3
4
5
6
7
8
9
10
11
12

override func layoutSubviews() {
    super.layoutSubviews()

    guard line.frame.width <= 0 else {
    	return
    }

    line.backgroundColor = UIColor.red.cgColor
    line.cornerRadius = 3
	line.frame.size = CGSize(width: bounds.width*0.6, height: 6)
    line.position = layer.position
}

Auto Layout

Avoid using Auto Layout for the rotated view

Issue #228

CAAnimation is about presentation layer, after animation completes, the view snaps back to its original state. If we want to keep the state after animation, then the wrong way is to use CAMediaTimingFillMode.forward and isRemovedOnCompletion

Animation never ends

forwards https://developer.apple.com/documentation/quartzcore/camediatimingfillmode/1427658-forwards

The receiver remains visible in its final state when the animation is completed.

isRemovedOnCompletion

https://developer.apple.com/documentation/quartzcore/caanimation/1412458-isremovedoncompletion

When true, the animation is removed from the target layer’s animations once its active duration has passed. Defaults to true.

1
2

layer.fillMode = .forwards
animation. isRemovedOnCompletion = false

This is to tell the animation to never ends and keep its last presentation state. Wrong approach ❗️

Set final state before calling animation

The presentation state is just for animation, the source of truth lies in the layer itself. We need to set the final state before calling animation

1
2
3
4

let animation = CABasicAnimation(keyPath: #keyPath(CAShapeLayer.strokeEnd))

shapeLayer.strokeEnd = 1.0
shapeLayer.add(animation, forKey: "")

Issue #227

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

final class SearchBox: UIView {
    lazy var textField: UITextField = {
        let textField = UITextField()
        let imageView = UIImageView(image: R.image.search()!)
        imageView.frame.size = CGSize(width: 20 + 8, height: 20)
        imageView.contentMode = .scaleAspectFit
        textField.leftView = imageView
        textField.leftViewMode = .always

        return textField
    }()

    lazy var filterButton: UIButton = {
        let button = UIButton(type: .custom)
        button.setImage(R.image.filter()!, for: .normal)
        button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

        return button
    }()

    lazy var backView: UIView = {
        let view = UIView()
        view.backgroundColor = .white
        view.layer.cornerRadius = 10
        view.layer.borderColor = R.color.lightGray.cgColor
        view.layer.borderWidth = 0.5
        view.layer.shadowOffset = CGSize(width: 1, height: 1)
        view.layer.shadowOpacity = 0.8
        view.layer.shadowColor = R.color.lightGray.cgColor

        return view
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError()
    }

    private func setup() {
        addSubviews([backView, textField, filterButton])

        NSLayoutConstraint.on([
            filterButton.rightAnchor.constraint(equalTo: rightAnchor, constant: -8),
            filterButton.centerYAnchor.constraint(equalTo: centerYAnchor),
            filterButton.heightAnchor.constraint(equalToConstant: 44),
            filterButton.widthAnchor.constraint(equalToConstant: 44),

            textField.centerYAnchor.constraint(equalTo: centerYAnchor),
            textField.leftAnchor.constraint(equalTo: leftAnchor, constant: 16),
            textField.rightAnchor.constraint(equalTo: filterButton.leftAnchor, constant: -8)
        ])

        NSLayoutConstraint.on([
            backView.pinEdges(view: self, inset: UIEdgeInsets(top: 4, left: 4, bottom: -4, right: -4))
        ])
    }
}

To apply padding to leftView, increase width and use contentMode

1
2

imageView.frame.size = CGSize(width: 20 + 8, height: 20)
imageView.contentMode = .scaleAspectFit

To make image in button smaller, use imageEdgeInsets with all positive values
To have round and shadow, specify shadowOpacity, cornerRadius, shadowOffset

Issue #226

Take screenshot

1

xcrun simctl io booted screenshot image.png

Record video

1

xcrun simctl io booted recordVideo video.mp4

Issue #225

1
2
3
4
5
6
7
8
9
10
11
12
13

<key>UIAppFonts</key>
<array>
    <string>OpenSans-Bold.ttf</string>
    <string>OpenSans-BoldItalic.ttf</string>
    <string>OpenSans-ExtraBold.ttf</string>
    <string>OpenSans-ExtraBoldItalic.ttf</string>
    <string>OpenSans-Italic.ttf</string>
    <string>OpenSans-Light.ttf</string>
    <string>OpenSans-LightItalic.ttf</string>
    <string>OpenSans-Regular.ttf</string>
    <string>OpenSans-SemiBold.ttf</string>
    <string>OpenSans-SemiBoldItalic.ttf</string>
</array>

Read Adding a Custom Font to Your App

The name of the font isn’t always obvious, and rarely matches the font file name. A quick way to find the font name is to get the list of fonts available to your app, which you can do with the following code:

1
2
3
4

for family in UIFont.familyNames.sorted() {
    let names = UIFont.fontNames(forFamilyName: family)
    print("Family: \(family) Font names: \(names)")
}

Issue #224

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let tabBarController = UITabBarController()

let navigationController1 = UINavigationController(rootViewController: viewController1)
let navigationController2 = UINavigationController(rootViewController: viewController2)
let navigationController3 = UINavigationController(rootViewController: viewController3)

navigationController2.isNavigationBarHidden = true

navigationController1.tabBarItem.image = R.image.profile()
navigationController2.tabBarItem.image = R.image.books()
navigationController3.tabBarItem.image = R.image.settings()

tabBarController.tabBar.tintColor = .yellow
tabBarController.viewControllers = [navigationController1, navigationController2, navigationController3]

Use tintColor instead of the deprecated selectedImageTintColor to indicate selected item color.

For icon size, check Tab Bar Icon Size, usually 50x50 for 2x and 75x75 for 3x

In portrait orientation, tab bar icons appear above tab titles. In landscape orientation, the icons and titles appear side-by-side. Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.

Issue #221

Ignore a host

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

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>example.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSExceptionRequiresForwardSecrecy</key>
            <true/>
            <key>NSExceptionMinimumTLSVersion</key>
            <string>TLSv1.2</string>
            <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
            <false/>
            <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
            <true/>
            <key>NSThirdPartyExceptionMinimumTLSVersion</key>
            <string>TLSv1.2</string>
            <key>NSRequiresCertificateTransparency</key>
            <false/>
        </dict>
    </dict>
</dict>

Ignore all

1
2
3
4
5

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Issue #219

• iOS Integration
• Setting Up Apple Pay Requirements
• Apple Pay

Show basic add card in iOS

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

import UIKit
import Stripe

final class MainController: UIViewController {

    func showPayment() {
        let addCardViewController = STPAddCardViewController()
        addCardViewController.delegate = self
        let navigationController = UINavigationController(rootViewController: addCardViewController)

        present(navigationController, animated: true, completion: nil)
    }
}

extension MainController: STPAddCardViewControllerDelegate {
    func addCardViewControllerDidCancel(_ addCardViewController: STPAddCardViewController) {
        dismiss(animated: true, completion: nil)
    }

    func addCardViewController(_ addCardViewController: STPAddCardViewController, didCreateToken token: STPToken, completion: @escaping STPErrorBlock) {
        _ = token.tokenId
        completion(nil)
        dismiss(animated: true, completion: nil)
    }
}

Generate ephemeral key

https://stripe.com/docs/mobile/ios/standard#ephemeral-key

In order for our prebuilt UI elements to function, you’ll need to provide them with an ephemeral key, a short-lived API key with restricted API access. You can think of an ephemeral key as a session, authorizing the SDK to retrieve and update a specific Customer object for the duration of the session.

Backend in Go

https://github.com/stripe/stripe-go

Need a secret key by going to Stripe dashboard -> Developers -> API keys -> Secret key

1

stripe.Key = "sk_key"

Need customer id. We can manually create one in Stripe dashboard -> Customers

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

package main

import (
	"net"
	"encoding/json"
	"fmt"
	"net/http"
	"github.com/stripe/stripe-go"
    "github.com/stripe/stripe-go/ephemeralkey"
)

func main() {
	stripe.Key = "sk_test_mM2MkqO61n7vvbVRfeYmBgWm00Si2PtWab"

	http.HandleFunc("/ephemeral_keys", generateEphemeralKey)
  	if err := http.ListenAndServe(":8080", nil); err != nil {
    	panic(err)
  	}
}

type EphemeralKeysRequest struct {
    ApiVersion string `json:"api_version"`
}

func generateEphemeralKey(w http.ResponseWriter, r *http.Request) {
	customerId := "cus_Eys6aeP5xR89ab"

	decoder := json.NewDecoder(r.Body)
    var t EphemeralKeysRequest
    err := decoder.Decode(&t)
    if err != nil {
        panic(err)
    }

    stripeVersion := t.ApiVersion
    if stripeVersion == "" {
        log.Printf("Stripe-Version not found\n")
        w.WriteHeader(400)
        return
    }
    params := &stripe.EphemeralKeyParams{
        Customer: stripe.String(customerId),
        StripeVersion: stripe.String(stripeVersion),
	}
	
    key, err := ephemeralkey.New(params)
    if err != nil {
        log.Printf("Stripe bindings call failed, %v\n", err)
        w.WriteHeader(500)
        return
    }
    w.Write(key.RawJSON)
}

iOS client

Networking client uses How to make simple networking client in Swift

Need an object that conforms to STPCustomerEphemeralKeyProvider

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

final class EphemeralKeyClient: NSObject, STPCustomerEphemeralKeyProvider {
    let client = NetworkClient(baseUrl: URL(string: "http://localhost:8080")!)

    func createCustomerKey(withAPIVersion apiVersion: String, completion: @escaping STPJSONResponseCompletionBlock) {
        var options = Options()
        options.httpMethod = .post
        options.path = "ephemeral_keys"
        options.parameters = [
            "api_version": apiVersion
        ]

        client.makeJson(options: options, completion: { result in
            switch result {
            case .success(let json):
                completion(json, nil)
            case .failure(let error):
                completion(nil, error)
            }
        })
    }
}

Setting up STPCustomerContext and STPPaymentContext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

final class MainController: UIViewController {
    let client = EphemeralKeyClient()
    let customerContext: STPCustomerContext
    let paymentContext: STPPaymentContext

    init() {
        self.customerContext = STPCustomerContext(keyProvider: client)
        self.paymentContext = STPPaymentContext(customerContext: customerContext)
        super.init(nibName: nil, bundle: nil)
        paymentContext.delegate = self
        paymentContext.hostViewController = self
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func start() {
        paymentContext.presentShippingViewController()
    }
}

Handle charge

https://stripe.com/docs/charges

Backend in Go

If we use stripe_id from card, which has the form of card_xxx, we need to include customer info

If we use token, which has the form tok_xxx, then no need for customer info

From STPPaymentResult

When you’re using STPPaymentContext to request your user’s payment details, this is the object that will be returned to your application when they’ve successfully made a payment. It currently just contains a source, but in the future will include any relevant metadata as well. You should pass source.stripeID to your server, and call the charge creation endpoint. This assumes you are charging a Customer, so you should specify the customer parameter to be that customer’s ID and the source parameter to the value returned here. For more information, see https://stripe.com/docs/api#create_charge

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

package main

import (
	"net"
	"encoding/json"
	"fmt"
	"net/http"
	"log"
	"os"
	"github.com/stripe/stripe-go/charge"
)

func main() {
	stripe.Key = "sk_test_mM2MkqO61n7vvbVRfeYmBgWm00Si2PtWab"

	http.HandleFunc("/request_charge", handleCharge)
  	if err := http.ListenAndServe(":8080", nil); err != nil {
    	panic(err)
  	}
}

var customerId = "cus_Eys6aeP5xR89ab"

type PaymentResult struct {
    StripeId string `json:"stripe_id"`
}

func handleCharge(w http.ResponseWriter, r *http.Request) {
	decoder := json.NewDecoder(r.Body)
    var t PaymentResult
    err := decoder.Decode(&t)
    if err != nil {
        panic(err)
    }

    params := &stripe.ChargeParams{
        Amount:      stripe.Int64(150),
        Currency:    stripe.String(string(stripe.CurrencyUSD)),
		Description: stripe.String("Charge from my Go backend"),
		Customer: stripe.String(customerId),
    }
		
	params.SetSource(t.StripeId)
    ch, err := charge.New(params)
    if err != nil {
		fmt.Fprintf(w, "Could not process payment: %v", err)
		fmt.Println(ch)
		w.WriteHeader(400)
    }
	
	w.WriteHeader(200)
}

iOS client

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

final class PaymentClient {
    let client = NetworkClient(baseUrl: URL(string: "http://192.168.210.219:8080")!)

    func requestCharge(source: STPSourceProtocol, completion: @escaping (Result<(), Error>) -> Void) {
        var options = Options()
        options.httpMethod = .post
        options.path = "request_charge"
        options.parameters = [
            "stripe_id": source.stripeID
        ]

        client.makeJson(options: options, completion: { result in
            completion(result.map({ _ in () }))
        })
    }
}

paymentContext.requestPayment()

extension MainController: STPPaymentContextDelegate {
    func paymentContext(_ paymentContext: STPPaymentContext, didCreatePaymentResult paymentResult: STPPaymentResult, completion: @escaping STPErrorBlock) {
        client.requestCharge(source: paymentResult.source, completion: { result in
            switch result {
            case .success:
                completion(nil)
            case .failure(let error):
                completion(error)
            }
        })
    }
}

Token from card

Use STPAPIClient.shared().createToken to get token from card https://stripe.com/docs/mobile/ios/custom#collecting-card-details

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

let cardParams = STPCardParams()
cardParams.number = "4242424242424242"
cardParams.expMonth = 10
cardParams.expYear = 2021
cardParams.cvc = "123"

STPAPIClient.shared().createToken(withCard: cardParams) { (token: STPToken?, error: Error?) in
    guard let token = token, error == nil else {
        // Present error to user...
        return
    }

    submitTokenToBackend(token, completion: { (error: Error?) in
        if let error = error {
            // Present error to user...
        }
        else {
            // Continue with payment...
        }
    })
}

Payment options and shipping view controllers

Instead of using paymentContext

1
2

paymentContext.pushShippingViewController()
paymentContext.pushPaymentOptionsViewController()

We can use view controllers https://stripe.com/docs/mobile/ios/custom#stppaymentoptionsviewcontroller directly with STPPaymentOptionsViewController and STPShippingAddressViewController. Then implement STPPaymentOptionsViewControllerDelegate and STPShippingAddressViewControllerDelegate

Register merchant Id and Apple Pay certificate

https://stripe.com/docs/apple-pay/apps

Get Certificate signing request file from Stripe https://dashboard.stripe.com/account/apple_pay

We can’t register merchant id with Enterprise account

Use Apple Pay

Go backend

Use token

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

type ApplePayRequest struct {
    Token string `json:"token"`
}

func handleChargeUsingApplePay(w http.ResponseWriter, r *http.Request) {
	decoder := json.NewDecoder(r.Body)
    var t ApplePayRequest
    err := decoder.Decode(&t)
    if err != nil {
        panic(err)
    }

    params := &stripe.ChargeParams{
        Amount:      stripe.Int64(150),
        Currency:    stripe.String(string(stripe.CurrencyUSD)),
		Description: stripe.String("Charge from my Go backend for Apple Pay"),
    }
		
	params.SetSource(t.Token)
    ch, err := charge.New(params)
    if err != nil {
		fmt.Fprintf(w, "Could not process payment: %v", err)
		fmt.Println(ch)
		w.WriteHeader(400)
    }
	
	w.WriteHeader(200)
}

iOS client

Update client to send STPToken

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

final class PaymentClient: NSObject {
    let client = NetworkClient(baseUrl: URL(string: "localhost:8080")!)

    func requestCharge(token: STPToken, completion: @escaping (Result<(), Error>) -> Void) {
        var options = Options()
        options.httpMethod = .post
        options.path = "request_charge_apple_pay"
        options.parameters = [
            "token": token.tokenId
        ]

        client.make(options: options, completion: { result in
            completion(result.map({ _ in () }))
        })
    }

    func useApplePay(payment: PKPayment, completion: @escaping (Result<(), Error>) -> Void) {
        STPAPIClient.shared().createToken(with: payment, completion: { (token: STPToken?, error: Error?) in
            guard let token = token, error == nil else {
                return
            }

            self.requestCharge(token: token, completion: completion)
        })
    }
}

Use PKPaymentAuthorizationViewController, not PKPaymentAuthorizationController

https://developer.apple.com/documentation/passkit/pkpaymentauthorizationcontroller

The PKPaymentAuthorizationController class performs the same role as the PKPaymentAuthorizationViewController class, but it does not depend on the UIKit framework. This means that the authorization controller can be used in places where a view controller cannot (for example, in watchOS apps or in SiriKit extensions).

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

extension MainController {
    func showApplePay() {
        let merchantId = "merchant.com.onmyway133.MyApp"
        let paymentRequest = Stripe.paymentRequest(withMerchantIdentifier: merchantId, country: "US", currency: "USD")
        paymentRequest.paymentSummaryItems = [
            PKPaymentSummaryItem(label: "Rubber duck", amount: 1.5)
        ]

        guard Stripe.canSubmitPaymentRequest(paymentRequest) else {
            assertionFailure()
            return
        }

        guard let authorizationViewController = PKPaymentAuthorizationViewController(paymentRequest: paymentRequest) else {
            assertionFailure()
            return
        }

        authorizationViewController.delegate = self
        innerNavigationController.present(authorizationViewController, animated: true, completion: nil)
    }
}

extension MainController: PKPaymentAuthorizationViewControllerDelegate {
    func paymentAuthorizationViewControllerDidFinish(_ controller: PKPaymentAuthorizationViewController) {
        controller.dismiss(animated: true, completion: nil)
    }

    func paymentAuthorizationViewController(
        _ controller: PKPaymentAuthorizationViewController,
        didAuthorizePayment payment: PKPayment,
        handler completion: @escaping (PKPaymentAuthorizationResult) -> Void) {

        client.useApplePay(payment: payment, completion: { result in
            switch result {
            case .success:
                completion(.init(status: .success, errors: nil))
            case .failure(let error):
                completion(.init(status: .failure, errors: [error]))
            }
        })
    }
}

Showing Apple Pay option

From appleMerchantIdentifier

The Apple Merchant Identifier to use during Apple Pay transactions. To create one of these, see our guide at https://stripe.com/docs/mobile/apple-pay . You must set this to a valid identifier in order to automatically enable Apple Pay.

1
2
3
4
5

if Stripe.deviceSupportsApplePay() {
    STPPaymentConfiguration.shared().appleMerchantIdentifier = "merchant.com.onmyway133.MyApp"
}

paymentContext.pushPaymentOptionsViewController()

requestPayment not showing UI

From requestPayment

Requests payment from the user. This may need to present some supplemental UI to the user, in which case it will be presented on the payment context’s hostViewController. For instance, if they’ve selected Apple Pay as their payment method, calling this method will show the payment sheet. If the user has a card on file, this will use that without presenting any additional UI. After this is called, the paymentContext:didCreatePaymentResult:completion: and paymentContext:didFinishWithStatus:error: methods will be called on the context’s delegate.

Use STPPaymentOptionsViewController to show cards and Apple Pay options

Code for requestPayment

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

- (void)requestPayment {
    WEAK(self);
    [[[self.didAppearPromise voidFlatMap:^STPPromise * _Nonnull{
        STRONG(self);
        return self.loadingPromise;
    }] onSuccess:^(__unused STPPaymentOptionTuple *tuple) {
        STRONG(self);
        if (!self) {
            return;
        }

        if (self.state != STPPaymentContextStateNone) {
            return;
        }

        if (!self.selectedPaymentOption) {
            [self presentPaymentOptionsViewControllerWithNewState:STPPaymentContextStateRequestingPayment];
        }
        else if ([self requestPaymentShouldPresentShippingViewController]) {
            [self presentShippingViewControllerWithNewState:STPPaymentContextStateRequestingPayment];
        }
        else if ([self.selectedPaymentOption isKindOfClass:[STPCard class]] ||
                 [self.selectedPaymentOption isKindOfClass:[STPSource class]]) {
            self.state = STPPaymentContextStateRequestingPayment;
            STPPaymentResult *result = [[STPPaymentResult alloc] initWithSource:(id<STPSourceProtocol>)self.selectedPaymentOption];
            [self.delegate paymentContext:self didCreatePaymentResult:result completion:^(NSError * _Nullable error) {
                stpDispatchToMainThreadIfNecessary(^{
                    if (error) {
                        [self didFinishWithStatus:STPPaymentStatusError error:error];
                    } else {
                        [self didFinishWithStatus:STPPaymentStatusSuccess error:nil];
                    }
                });
            }];
        }
        else if ([self.selectedPaymentOption isKindOfClass:[STPApplePayPaymentOption class]]) {
      // ....

Payment options

1
2
3

func paymentOptionsViewController(_ paymentOptionsViewController: STPPaymentOptionsViewController, didSelect paymentOption: STPPaymentOption) {
	// No op
}

After user selects payment option, the change is saved in dashboard https://dashboard.stripe.com/test/customers, but for card only. Select Apple Pay does not reflect change in web dashboard.

Apple pay option is added manually locally, from STPCustomer+SourceTuple.m 😲

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

- (STPPaymentOptionTuple *)filteredSourceTupleForUIWithConfiguration:(STPPaymentConfiguration *)configuration {
    id<STPPaymentOption> _Nullable selectedMethod = nil;
    NSMutableArray<id<STPPaymentOption>> *methods = [NSMutableArray array];
    for (id<STPSourceProtocol> customerSource in self.sources) {
        if ([customerSource isKindOfClass:[STPCard class]]) {
            STPCard *card = (STPCard *)customerSource;
            [methods addObject:card];
            if ([card.stripeID isEqualToString:self.defaultSource.stripeID]) {
                selectedMethod = card;
            }
        }
        else if ([customerSource isKindOfClass:[STPSource class]]) {
            STPSource *source = (STPSource *)customerSource;
            if (source.type == STPSourceTypeCard
                && source.cardDetails != nil) {
                [methods addObject:source];
                if ([source.stripeID isEqualToString:self.defaultSource.stripeID]) {
                    selectedMethod = source;
                }
            }
        }
    }

    return [STPPaymentOptionTuple tupleWithPaymentOptions:methods
                                    selectedPaymentOption:selectedMethod
                                        addApplePayOption:configuration.applePayEnabled];
}

STPApplePayPaymentOptionis not available inpaymentContext.paymentOptions` immediately

Change selected payment option

In STPPaymentContext

setSelectedPaymentOption is read only and trigger paymentContextDidChange, but it checks if the new selected payment option is equal to existing selected payment option

1
2
3
4
5
6
7
8
9
10
11

- (void)setSelectedPaymentOption:(id<STPPaymentOption>)selectedPaymentOption {
    if (selectedPaymentOption && ![self.paymentOptions containsObject:selectedPaymentOption]) {
        self.paymentOptions = [self.paymentOptions arrayByAddingObject:selectedPaymentOption];
    }
    if (![_selectedPaymentOption isEqual:selectedPaymentOption]) {
        _selectedPaymentOption = selectedPaymentOption;
        stpDispatchToMainThreadIfNecessary(^{
            [self.delegate paymentContextDidChange:self];
        });
    }
}

There is retryLoading which is called at init

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

- (void)retryLoading {
    // Clear any cached customer object before refetching
    if ([self.apiAdapter isKindOfClass:[STPCustomerContext class]]) {
        STPCustomerContext *customerContext = (STPCustomerContext *)self.apiAdapter;
        [customerContext clearCachedCustomer];
    }
    WEAK(self);
    self.loadingPromise = [[[STPPromise<STPPaymentOptionTuple *> new] onSuccess:^(STPPaymentOptionTuple *tuple) {
        STRONG(self);
        self.paymentOptions = tuple.paymentOptions;
        self.selectedPaymentOption = tuple.selectedPaymentOption;
    }] onFailure:^(NSError * _Nonnull error) {
        STRONG(self);
        if (self.hostViewController) {
            [self.didAppearPromise onSuccess:^(__unused id value) {
                if (self.paymentOptionsViewController) {
                    [self appropriatelyDismissPaymentOptionsViewController:self.paymentOptionsViewController completion:^{
                        [self.delegate paymentContext:self didFailToLoadWithError:error];
                    }];
                } else {
                    [self.delegate paymentContext:self didFailToLoadWithError:error];
                }
            }];
        }
    }];
    [self.apiAdapter retrieveCustomer:^(STPCustomer * _Nullable customer, NSError * _Nullable error) {
        stpDispatchToMainThreadIfNecessary(^{
            STRONG(self);
            if (!self) {
                return;
            }
            if (error) {
                [self.loadingPromise fail:error];
                return;
            }
            if (!self.shippingAddress && customer.shippingAddress) {
                self.shippingAddress = customer.shippingAddress;
                self.shippingAddressNeedsVerification = YES;
            }

            STPPaymentOptionTuple *paymentTuple = [customer filteredSourceTupleForUIWithConfiguration:self.configuration];

            [self.loadingPromise succeed:paymentTuple];
        });
    }];
}

Which in turns call STPCustomerEphemeralKeyProvider. As stripe does not save Apple Pay option in dashboard, this method return list of card payment options, together with the default card as selected payment option 😲

Although the new STPCard has a different address, it is the exact same card with the same info, and the isEqual method of STPCard is

1
2
3
4
5
6
7
8
9
10
11

- (BOOL)isEqualToCard:(nullable STPCard *)other {
    if (self == other) {
        return YES;
    }

    if (!other || ![other isKindOfClass:self.class]) {
        return NO;
    }
    
    return [self.stripeID isEqualToString:other.stripeID];
}

I raised an issue How to change selected payment option? hope it gets resolved soon 😢

Issue #210

Depending on what features we want to achieve, we need to go with either AVFoundation or MediaPlayer framework. As someone who worked with many apps that involve media playback, here are some of my observations

MPMoviePlayerController vs AVPlayer

At first, I use MPMoviePlayerController because it is very simple, in fact, it is a wrapper around AVPlayer. It offers a lot of useful notifications and properties.

But when my requirements change, a lot more features are needed, I need to change to AVPlayer to have more control. And that is the wisest decision I’ve ever made

You should use AVPlayer as soon as possible. Using it cost you just a little longer time than MPMoviePlayerController, but you have a lot of control.

Custom controls

When building your own player, the built in controls of MPMoviePlayerController may not satisfy your need. I see many questions on SO are about custom controls.

MPMoviePlayerController

You have to set controlStyle to MPMovieControlStyleNone, set up Timer because currentPlaybackTime is not KVO compliance

AVPlayer

AVPlayer has no built in controls, but it has addPeriodicTimeObserverForInterval:queue:usingBlock: that makes handling the current time easily. The nicer thing about periodTimeObserver is that “The block is also invoked whenever time jumps and whenever playback starts or stops”

Notification

MPMoviePlayerController

It has a lot of useful notifications, like MPMoviePlayerNowPlayingMovieDidChangeNotification, MPMoviePlayerLoadStateDidChangeNotification, MPMovieDurationAvailableNotification, …

AVPlayer

The AVPlayerItem has some notifications AVPlayerItemDidPlayToEndTimeNotification, AVPlayerItemPlaybackStalledNotification, …
If you want to have those same notifications as MPMoviePlayerController, you have to KVO some properties of AVPlayer like currentItem, currentTime, duration, … You have to read documents to make sure which property is KVO compliance

Seek

MPMoviePlayerController

You can change the currentPlaybackTime to seek, but it results in jumping, because of efficiency and buffer status. I have to manually disable slider during seeking

AVPlayer

AVPlayer has this seekToTime:toleranceBefore:toleranceAfter:completionHandler: which allows you to specify the tolerance. Very nice

Subtitle

MPMoviePlayerController

I have to schedule a timer that “wake” and “sleep” at the beginning and end time of a certain subtitle marker, respectively.

AVPlayer

AVPlayer has this addBoundaryTimeObserverForTimes:queue:usingBlock: that perfectly suits my need. I setup 2 boundary time observers, 1 for the beginning times, 1 for the end times. The beginning times is an array containing all beginning timestamps that a subtitle marker appears.

Time scale

AVPlayer uses CMTime that offers timescale, which is a more comfortable way to specify more accurate time

Volume

AVPlayer has volume property (relative to system volume) that allows me to programmatically changes the player volume

Playable duration

MPMoviePlayerController

It has playableDuration property

AVPlayer

You have to compute yourself. See http://stackoverflow.com/questions/6815316/how-can-i-get-the-playable-duration-of-avplayer

Full screen

MPMoviePlayerController achieves full screen mode by creating another UIWindow, you learn from this to support full screen using AVPlayer, too

Movie Source Type

MPMoviePlayerController

It has movieSourceType that provides clues to the playback system, hence improving load time

“ If you know the source type of the movie, setting the value of this property before playback begins can improve the load times for the movie content.”

AVPlayer

Read Handling Different Types of Asset on AV Foundation Programming Guide

“To create and prepare an HTTP live stream for playback. Initialize an instance of AVPlayerItem using the URL. (You cannot directly create an AVAsset instance to represent the media in an HTTP Live Stream.)”

AVAsset

AVPlayer allows you to access AVAsset, which provides you more information about the playback and load state

Allow a range within a video to be playable

AVPlayerItem has forwardPlaybackEndTime and reversePlaybackEndTime that is used to specify a range that the player can play. When forwardPlaybackEndTime is specified and the playhead passes this points, AVPlayerItem will trigger AVPlayerItemDidPlayToEndTimeNotification

But it doesn’t work in my case forwardPlaybackEndTime does not work

You can have many instances of AVPlayer playing at the same time

Read more

1. AV Foundation Programming Guide
2. WWDC 2011 Session 405 Exploring AV Foundation
3. WWDC 2011 Session 415 Working With Media In AV Foundation
4. WWDC 2014 Session 503 Mastering Modern Media Playback
5. WWDC 2011 Session 406 AirPlay and External Displays in iOS apps
6. AVPlayerDemo
7. VKVideoPlayer
8. ALMoviePlayerController
9. AV Foundation Playing Videos
10. AVPlayer and MPMoviePlayerController differences
11. MPMoviePlayer Tips

Issue #209

Here are what I learn about reachability handling in iOS, aka checking for internet connection. Hope you will find it useful, too.

This post starts with techniques from Objective age, but many of the concepts still hold true

The naive way

Some API you already know in UIKit can be used for checking internet connection. Most of them are synchronous code, so you ‘d better call them in a background thread

1
2
3
4
5
6
7
8

- (BOOL)connectedToInternet
{
    NSString *string = [NSString stringWithContentsOfURL:[NSURL URLWithString:@"http://www.google.com"]
                                                encoding:NSUTF8StringEncoding
                                                   error:nil];

    return string ? YES : NO;
}

1
2
3
4
5
6
7
8
9
10

- (BOOL)connectedToInternet
{
   NSURL *url = [NSURL URLWithString:@"http://www.google.com"];
   NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
   [request setHTTPMethod:@"HEAD"];
   NSHTTPURLResponse *response;
   [NSURLConnection sendSynchronousRequest:request returningResponse:&response error: NULL];

   return ([response statusCode] == 200) ? YES : NO;
}

Using SystemConfiguration framework

After importing the SystemConfiguration framework, you can use either SCNetworkReachabilityGetFlags to synchronously get the reachability status, or provide a callback to SCNetworkReachabilitySetCallback to be notified about reachability status change.

Note that SCNetworkReachabilityGetFlags is synchronous.

The System Configuration framework reachability API () operates synchronously by default. Thus, seemingly innocuous routines like SCNetworkReachabilityGetFlags can get you killed by the watchdog. If you’re using the reachability API, you should use it asynchronously. This involves using the SCNetworkReachabilityScheduleWithRunLoop routine to schedule your reachability queries on the run loop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

- (BOOL) isConnectionAvailable
{
	SCNetworkReachabilityFlags flags;
        BOOL receivedFlags;
 
        SCNetworkReachabilityRef reachability = SCNetworkReachabilityCreateWithName(CFAllocatorGetDefault(), [@"dipinkrishna.com" UTF8String]);
        receivedFlags = SCNetworkReachabilityGetFlags(reachability, &flags);
        CFRelease(reachability);
 
        if (!receivedFlags || (flags == 0) )
        {
        	return FALSE;
        } else {
		return TRUE;
	}
}

Note that SCNetworkReachabilitySetCallback notifies only when reachability status changes

Assigns a client to the specified target, which receives callbacks when the reachability of the target changes

Using some libraries

Libraries make our life easier, but to live well with them, you must surely understand them. There are many reachability libraries on Github, but here I want to mention the most popular: Reachability from tonymillion and AFNetworkReachabilityManager (a submodule of AFNetworking) from mattt. Both use SystemConfiguration under the hood.

Reachability

Some people use Reachability like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

- (void)testInternetConnection
{   
    internetReachableFoo = [Reachability reachabilityWithHostname:@"www.google.com"];

    // Internet is reachable
    internetReachableFoo.reachableBlock = ^(Reachability*reach)
    {
        // Update the UI on the main thread
        dispatch_async(dispatch_get_main_queue(), ^{
            NSLog(@"Yayyy, we have the interwebs!");
        });
    };

    // Internet is not reachable
    internetReachableFoo.unreachableBlock = ^(Reachability*reach)
    {
        // Update the UI on the main thread
        dispatch_async(dispatch_get_main_queue(), ^{
            NSLog(@"Someone broke the internet :(");
        });
    };

    [internetReachableFoo startNotifier];
}

Looking into the method “startNotifier”, you will see that it only uses SCNetworkReachabilitySetCallback and it means this callback will only be called if reachability status changes.

If you want to know the reachability status directly, for example, the reachability status at app launch, you must use the method “isReachable”. This method under the hood uses SCNetworkReachabilityGetFlags which is synchronous, and it locks the calling thread.

Reachability has reachabilityForLocalWiFi, which is interesting :)

1
2
3
4
5
6
7
8
9
10
11

+(Reachability*)reachabilityForLocalWiFi
{
    struct sockaddr_in localWifiAddress;
    bzero(&localWifiAddress, sizeof(localWifiAddress));
    localWifiAddress.sin_len            = sizeof(localWifiAddress);
    localWifiAddress.sin_family         = AF_INET;
    // IN_LINKLOCALNETNUM is defined in <netinet/in.h> as 169.254.0.0
    localWifiAddress.sin_addr.s_addr    = htonl(IN_LINKLOCALNETNUM);
    
    return [self reachabilityWithAddress:&localWifiAddress];
}

AFNetworkReachabilityManager

With AFNetworkReachabilityManager, all you have to do is

1
2
3
4
5
6
7

- (void)trackInternetConnection
{
    [[AFNetworkReachabilityManager sharedManager] startMonitoring];
    [[AFNetworkReachabilityManager sharedManager] setReachabilityStatusChangeBlock:^(AFNetworkReachabilityStatus status) {
        // Handle the status
    }];
}

What is nice about AFNetworkReachabilityManager is that in the “startMonitoring” method, it both uses SCNetworkReachabilitySetCallback and calls AFNetworkReachabilityStatusForFlags to get the initial reachability status in a background thread, and calls the AFNetworkReachabilityStatusBlock. So in the user ‘s point of view, all we care about is the AFNetworkReachabilityStatusBlock handler.

AFNetworking has all the features that Reachability has, and its code is well structured. Another cool thing about it is that it is already in your AFNetworking pod. It’s hard to find projects without AFNetworking these days

isReachableViaWWAN vs isReachableViaWiFi

Take a look at the method AFNetworkReachabilityStatusForFlags and you will know the story

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

static AFNetworkReachabilityStatus AFNetworkReachabilityStatusForFlags(SCNetworkReachabilityFlags flags) {
    [...]
    status = AFNetworkReachabilityStatusUnknown;
    if (isNetworkReachable == NO) {
        status = AFNetworkReachabilityStatusNotReachable;
    }
#if	TARGET_OS_IPHONE
    else if ((flags & kSCNetworkReachabilityFlagsIsWWAN) != 0) {
        status = AFNetworkReachabilityStatusReachableViaWWAN;
    }
#endif
    else {
        status = AFNetworkReachabilityStatusReachableViaWiFi;
    }

    return status;
}

isReachableViaWWAN is supposed to be for iOS Device

How to use AFNetworkReachabilityManager

I’ve asked a question here Issue 2262, you should take a look at it

The safe way is not to use the sharedManager, but use managerForDomain

1
2
3
4
5
6
7
8

AFNetworkReachabilityManager *afReachability = [AFNetworkReachabilityManager managerForDomain:@"www.google.com"];
    [afReachability setReachabilityStatusChangeBlock:^(AFNetworkReachabilityStatus status) {
        if (status < AFNetworkReachabilityStatusReachableViaWWAN) {
            [FTGAlertView showMessage:@"No internet connection"];
        }
    }];

    [afReachability startMonitoring];

You should read the question 7 and 8 in the Reference below to know more about SCNetworkReachabilityCreateWithName vs SCNetworkReachabilityCreateWithAddress, and about the zero address

Reachability.swift

In Swift, there is this popular Reachability.swift to check for network reachability status

Connectivity

Sometimes, a more robust way is just to ping certain servers, that how’s Connectivy works

Also, read more Solving the Captive Portal Problem on iOS

In order to detect that it has connected to a Wi-Fi network with a captive portal, iOS contacts a number of endpoints hosted by Apple — an example being https://www.apple.com/library/test/success.html. Each endpoint hosts a small HTML page of the form:

Read more

1. Reachability
2. AFNetworkReachabilityManager
3. How to check for internet connection synchronously?
4. iOS: Check whether internet connection is available
5. Check if Active Internet Connection Exists on iOS Device
6. Technical Q&A QA1693 Synchronous Networking On The Main Thread
7. How to check for network reachability on iOS in a non-blocking manner?
8. understanding INADDR_ANY for socket programming - c

Issue #194

DispatchWorkItem

• https://stackoverflow.com/questions/48844169/swift-ios-dispatchworkitem-is-still-running-even-though-its-getting-cancelled
• https://stackoverflow.com/questions/29492707/how-to-stop-cancel-suspend-resume-tasks-on-gcd-queue

NSOperation

• https://developer.apple.com/documentation/foundation/nsoperation/1411672-cancel?language=objc

Grand Central Dispatch vs NSOperation

• https://stackoverflow.com/questions/43226434/2017-swift-3-1-gcd-vs-nsoperation
• https://medium.com/@johnsundell/a-deep-dive-into-grand-central-dispatch-in-swift-dead7f6e1ca7

Issue #183

1
2
3
4
5
6
7
8
9
10
11
12

func zoomInDouble(coordinate: CLLocationCoordinate2D) {
    let region = mapView.region
    let zoomInRegion = MKCoordinateRegion(
        center: coordinate,
        span: MKCoordinateSpan(
            latitudeDelta: region.span.latitudeDelta * 0.5,
            longitudeDelta: region.span.longitudeDelta * 0.5
        )
    )
    
    mapView.setRegion(zoomInRegion, animated: true)
}

Issue #182

1
2
3
4
5
6
7
8
9

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    guard let coordinate = view.annotation?.coordinate else {
        return
    }
    
    if (view.annotation is MKClusterAnnotation) {
        zoomInDouble(coordinate: coordinate)
    }
}

Issue #181

https://developer.apple.com/documentation/mapkit/mkannotationview/decluttering_a_map_with_mapkit_annotation_clustering

1
2
3
4
5
6
7
8
9
10
11

final class AnnotationView: MKMarkerAnnotationView {
    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        
        clusteringIdentifier = String(describing: ClusterView.self)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError()
    }
}

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

final class ClusterView: MKAnnotationView {
    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        displayPriority = .defaultHigh
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError()
    }
    
    override func prepareForDisplay() {
        super.prepareForDisplay()
        
        guard let annotation = annotation as? MKClusterAnnotation else {
            return
        }
        
        let count = annotation.memberAnnotations.count
        image = self.image(annotation: annotation, count: count)
    }
    
    func image(annotation: MKClusterAnnotation, count: Int) -> UIImage? {
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 40.0, height: 40.0))
        image = renderer.image { _ in
            UIColor.purple.setFill()
            UIBezierPath(ovalIn: CGRect(x: 0.0, y: 0.0, width: 40.0, height: 40.0)).fill()
            let attributes: [NSAttributedString.Key: Any] = [
                NSAttributedString.Key.foregroundColor: UIColor.white,
                NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20.0)
            ]

            let text = "\(count)"
            let size = text.size(withAttributes: attributes)
            let rect = CGRect(x: 20 - size.width / 2, y: 20 - size.height / 2, width: size.width, height: size.height)
            text.draw(in: rect, withAttributes: attributes)
        }
        
        return image
    }
}

1

mapView.register(ClusterView.self, forAnnotationViewWithReuseIdentifier: String(describing: ClusterView.self))

Issue #179

1
2

let rough = context.objectForKeyedSubscript("myObject")
myObject.toDictionary()

Issue #158

We ‘ve been using CircleCI for many of our open source projects. Since the end of last year 2017, version 2.0 began to come out, and we think it’s good time to try it now together with Swift 4.1 and Xcode 9.3

The problem with version 2.0 is it’s so powerful and has lots of cool new features like jobs and workflows, but that requires going to documentation for how to migrate configuration file, especially Search and Replace Deprecated 2.0 Keys

Creating config.yml

The first thing is to create a new config.yml inside folder .circleci

Copy your existing circle.yml file into a new directory called .circleci at the root of your project repository.

Next is to declare version and jobs

Add version: 2 to the top of the .circleci/config.yml file.

Checking xcodebuild

For simple cases, we just use xcodebuild to build and test the project, so it’s good to try it locally to avoid lots of trial commits to trigger CircleCI. You can take a look at this PR https://github.com/hyperoslo/Cheers/pull/20

Before our configuration file for version 1.0 looks like this

1

- set -o pipefail && xcodebuild -project Cheers.xcodeproj -scheme "Cheers-iOS" -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 8,OS=11.0' -enableCodeCoverage YES test

Now we should put pipefail inside shell, follow https://github.com/CircleCI-Public/circleci-demo-ios/blob/master/.circleci/config.yml

shell: /bin/bash –login -o pipefail

Now is the actual trying xcodebuild, after many failures due to destination param

1
2
3
4
5
6

xcodebuild: error: Unable to find a destination matching the provided destination specifier:
		{ platform:iOS Simulator, OS:11.3 }

	Missing required device specifier option.
	The device type “iOS Simulator” requires that either “name” or “id” be specified.
	Please supply either “name” or “id”.

1

xcodebuild: error: option 'Destination' requires at least one parameter of the form 'key=value'

I found this to work, run this in the same folder as your xcodeproj

1

xcodebuild -project Cheers.xcodeproj -scheme "Cheers-iOS" -sdk iphonesimulator -destination "platform=iOS Simulator,OS=11.3,name=iPhone X" -enableCodeCoverage YES test

Adding workflow

Version 2.0 introduces workflow which helps organising jobs

A workflow is a set of rules for defining a collection of jobs and their run order. Workflows support complex job orchestration using a simple set of configuration keys to help you resolve failures sooner.

For our simple use cases, we add this workflow

1
2
3
4
5

workflows:
  version: 2
  build-and-test:
    jobs:
      - build-and-test

Collecting Test Metadata

• https://circleci.com/docs/2.0/collect-test-data/

CircleCI collects test metadata from XML files and uses it to provide insights into your job

Final

Use below as template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

version: 2.1
jobs:
  build_test:
    macos:
      xcode: "11.0"
    shell: /bin/bash --login -o pipefail
    steps:
      - checkout
      - run:
          command: |
            curl https://cocoapods-specs.circleci.com/fetch-cocoapods-repo-from-s3.sh | bash -s cf
            pod install
      - run:
          command: xcodebuild -workspace MyApp.xcworkspace -scheme "MyApp" -sdk iphonesimulator -destination "platform=iOS Simulator,name=iPhone X,OS=12.2" -enableCodeCoverage YES test
      - store_test_results:
          path: test-results

workflows:
  version: 2.1
  primary:
    jobs:
      - build_test

Read more

• https://circleci.com/docs/2.0/ios-migrating-from-1-2/

Issue #154

The most common UI element in iOS is UITableView, and the most common task is to display the UITableViewCell using the model.

Although the title specifies UITableViewCell, but the problem involves other views (UICollectionView, custom view, …) as well

There are many debates about this, so here I want to make a summary, all in my opinion

It started with

UITableViewCell Is Not a Controller
This article follows strict MVC and states we should not pass model object to cell and let cell manipulate directly on the model. He shows several examples that point out this job is not suitable for the cell. Instead this job should be done on the Controller (UIViewController, UITableViewDataSource, …)

Category for simple case

Skinnier Controllers Using View Categories
This article states that we should keep ViewController skinnier by transfering the job (mapping model object to cell) to the cell category

Using subclassing

UITableViewCell Is Not a Controller, But…
This articles explains the beauty of subclassing to take advantage of Polymorphism. In the theming example he gives, we see that Controller ‘s job now is to select the correct cell subclass, and the subclass ‘s job is to know how to use the model
“When a UITableViewCell subclass accepts a model object parameter and updates its constituent subviews as I have described, it is behaving as a data transformer, not a controller”

Model Presenter

Model View Controller Presenter
This article shows that using subclassing and category will have duplication implementation when you have more cells and models. After several optimizations, he finally gets to the Model Presenter, which is the center object who knows how to represent the model in different view.
“This is an object that knows how to represent every aspect of a certain model”

MVVM

MVC, MVVM, FRP, And Building Bridges
This article explains MVVM but it touches our problem directly. The problem with cell and model actually is

1. How to map the model to the cell
2. Who will do this job? The cell, Controller or another Model Mapping object ?

The ViewModel is actually who does this work, which is to transform the model to something the view can easily use

“A table view data source is none of these things. It’s purely a layer between the table view and the model. The model defines lists of things, but the table view data source transform those lists into sections and rows. It also returns the actual table view cells, but that’s not what I’m focusing on here. The key is its role as a middle-tier data transformer.”

Do we access the cell ‘s subviews

Paul on UITableViewCell
Brent follows with another post explaining how cell ‘s subviews should not be accessed outside of the cell

Data Source

Clean table view code
This article deals with Bridging the Gap Between Model Objects and Cells.
“At some point we have to hand over the data we want to display into the view layer. Since we still want to maintain a clear separation between the model and the view, we often offload this task to the table view’s data source. This kind of code clutters the data source with specific knowledge about the design of the cell. We are better off factoring this out into a category of the cell class”

This together with Lighter View Controllers shows a practical example that deals with most cases

Reference

1. Should UITableViewCells Know About Model Objects?

Issue #148

From https://github.com/devxoul/Pure/blob/master/Sources/Pure/FactoryModule.swift

1
2
3
4
5
6
7
8

public protocol FactoryModule: Module {

  /// A factory for `Self`.
  associatedtype Factory = Pure.Factory<Self>

  /// Creates an instance of a module with a dependency and a payload.
  init(dependency: Dependency, payload: Payload)
}

From https://github.com/devxoul/Pure/blob/master/Sources/Pure/Factory.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

open class Factory<Module: FactoryModule> {
  private let dependencyClosure: () -> Module.Dependency

  /// A static dependency of a module.
  open var dependency: Module.Dependency {
    return self.dependencyClosure()
  }

  /// Creates an instance of `Factory`.
  ///
  /// - parameter dependency: A static dependency which should be resolved in a composition root.
  public init(dependency: @autoclosure @escaping () -> Module.Dependency) {
    self.dependencyClosure = dependency
  }

  /// Creates an instance of a module with a runtime parameter.
  ///
  /// - parameter payload: A runtime parameter which is required to construct a module.
  open func create(payload: Module.Payload) -> Module {
    return Module.init(dependency: self.dependency, payload: payload)
  }
}

From https://github.com/devxoul/Pure/blob/master/Tests/PureTests/PureSpec.swift#L72

1
2
3
4
5
6

let factory = FactoryFixture<Dependency, Payload>.Factory(dependency: .init(
  networking: "Networking A"
))
let instance = factory.create(payload: .init(id: 100))
expect(instance.dependency.networking) == "Networking A"
expect(instance.payload.id) == 100

Issue #144

There are times we want the same UIViewController to look good when it’s presented modally or pushed from UINavigationController stack. Take a look at BarcodeScanner and the PR https://github.com/hyperoslo/BarcodeScanner/pull/82

When it is presented, we need a header view so that we can show a title and a close button. We can create a custom HeaderView that inherits from UIView or either embed it in a UINavigationController before presenting.

If we go with the controller being embedded in UINavigationController approach, it will collide with the other UINavigationController when it is pushed.

If we go with custom HeaderView, then we need to layout the view so that it looks good on both portrait and landscape, and on iPhone X that as safeAreaLayoutGuide.

Using standalone UINavigationBar

Since UINavigationController uses UINavigationBar under the hood, which uses UINavigationItem info to present the content. We can imitate this behavior by using a standalone UINavigationBar. See Adding Content to a Standalone Navigation Bar

In the vast majority of scenarios you will use a navigation bar as part of a navigation controller. However, there are situations for which you might want to use the navigation bar UI and implement your own approach to content navigation. In these situations, you can use a standalone navigation bar.

A navigation bar manages a stack of UINavigationItem objects

The beauty is that our standalone UINavigationBar and that of UINavigationController are the same, use the same UINavigationItem and no manual layout are needed

Declare UINavigationItem

We can just set properties like we did with a normal navigationItem

1
2
3

let standaloneItem = UINavigationItem()
standaloneItem.leftBarButtonItem = UIBarButtonItem(customView: closeButton)
standaloneItem.titleView = UILabel()

Adding UINavigationBar

Customise your bar, then declare layout constraints. You only need to pin left, right, and top. Note that you need to implement UINavigationBarDelegate to attach bar to status bar, so that it appears good on iPhone X too

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let navigationBar = UINavigationBar()
navigationBar.isTranslucent = false
navigationBar.delegate = self
navigationBar.backgroundColor = .white
navigationBar.items = [standaloneItem]
 
navigationBar.translatesAutoresizingMaskIntoConstraints = false
navigationBar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
navigationBar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
 
if #available(iOS 11, *) {
  navigationBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
} else {
  navigationBar.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
}

1
2
3
4
5

extension BarcodeScannerController: UINavigationBarDelegate {
  public func position(for bar: UIBarPositioning) -> UIBarPosition {
    return .topAttached
  }
}

Inside UINavigationController

When this UIViewController is pushed from a UINavigationController stack, we just need to hide our standalone navigationBar. If we prefer the default back button, we don’t need to set leftBarButtonItem

On iOS 10, you need to call sizeToFit for any items in UINavigationItem for it to get actual size

1
2
3
4
5
6
7
8
9
10
11
12

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
  if navigationController != nil {
      let label = HeaderElement.makeLabel()
      label.sizeToFit()
      navigationItem.titleView = label
    navigationBar.isHidden = true
  } else {
    navigationBar.isHidden = false
  }
}

Issue #143

Today I was writing tests and get this error related to app idle

1

t =    23.06s         Assertion Failure: <unknown>:0: Failed to scroll to visible (by AX action) Button, 0x6000003827d0, traits: 8858370049, label: 'cart', error: Error -25204 performing AXAction 2003 on element <XCAccessibilityElement: 0x7fc391a2bd60> pid: 91461, elementOrHash.elementID: 140658975676048.128

It turns out that the project uses a HUD that is performing some progress animation. Even it was being called HUD.hide(), the problem still exists.

1
2
3
4

t =    31.55s     Wait for no.example.MyApp to idle
 t =    91.69s         App animations complete notification not received, will attempt to continue.
 t =    91.70s Tap Target Application 0x6040002a1260
 t =    91.70s     Wait for no.example.MyApp to id

No matter how I call sleep,wait`, still the problem

1
2
3

sleep(10)
app.tap()
_ = checkoutButton.waitForExistence(timeout: 10)

The fix is to disable animation. Start with setting argument when running tests

1
2

app.launchArguments.append("--UITests")
app.launch

Then in AppDelegate

1
2
3
4
5

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
  if CommandLine.arguments.contains("--UITests") {
    UIView.setAnimationsEnabled(false)
  }
}

Issue #138

Here is how to use R.swift in UITest target

• Add Localizable.strings to UITest target
• Declare pod

1
2
3

target 'MyAppUITests' do
  pod 'R.swift', '~> 4.0'
end

• In UITest target settings, add $(FRAMEWORK_SEARCH_PATHS) to Runpath Search Path
• Add R.generated.swift to UITest target

Issue #137

Use a custom NavigationController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import UIKit

class NavigationController: UINavigationController {
  override func viewDidLoad() {
    super.viewDidLoad()
    navigationBar.tintColor = .white
    navigationBar.barStyle = .black
    navigationBar.isTranslucent = false
  }
  
  override func pushViewController(_ viewController: UIViewController, animated: Bool) {
    viewController.navigationItem.backBarButtonItem =
      UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    super.pushViewController(viewController, animated: animated)
  }
}

Issue #133

With dlopen we can make uses of some private frameworks. It will be fun

From iPhone X home button

1
2
3
4
5
6
7

#import <dlfcn.h>

// somewhere in viewDidLoad
dlopen([binaryPath cStringUsingEncoding:NSUTF8StringEncoding], RTLD_NOW);
UIView *const view = [[NSClassFromString(@"SBHomeGrabberView") alloc] init];
[view sizeToFit];
[self.view addSubview:view];

Issue #124

We all know that there’s a potential crash with UIVisualEffectView on iOS 11. The fix is to not add sub views directly to UIVisualEffectView, but to its contentView. So we should change

1

effectView.addSubview(button)

to

1

effectView.contentView.addubView(button)

Here we don’t need to perform iOS version check, because effectView.contentView works for any iOS versions.

Potential cases for crashes

Here are some cases you can potentially cause the crashes

Strange namings

Normally we name our UIVisualEffectView as blurView, effectView. But there’s times we name it differently like navigationView, containerView, boxView, … This way we may completely forget that it’s a UIVisualEffectView 🙀

1
2

containerView.addSubview(button)
boxView.insertSubview(label, at: 0)

Custom loadView

Sometimes it’s convenient to have our UIViewController 's view as a whole blur view, so that all things inside have a nice blur effect background

1
2
3
4
5
6
7
8
9
10
11
12
13

class OverlayController: UIViewController {
  let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
  override func loadView() {
    super.loadView()
    self.view = blurView
  }

  override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(button)
  }
}

By setting our blurView as view in loadView, we have no idea afterwards that view is actually a UIVisualEffectView 🙀

Inheritance

What happen if we have another UIViewController that inherits from our OverlayController, all it knows about view is UIView, it does not know that it is a disguising UIVisualEffectView 🙀

1
2
3
4
5
6
7

class ClocksController: OverlayController {
  override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(timeLabel)
  }
}

Superclass type

Sometimes declare our things but with protocol or superclass types. Consumers of our API have no clue to know that it is UIVisualEffectView 🙀

1

let view: UIView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))

Here it appears to us that view is of type UIView

Legacy codebase

Now imagine you ‘ve handled a legacy codebase to deal with. Perform finding and replacing all those things related to UIVisualEffectView is very hard task. Especially since we tend to write less tests for UI

Making it impossible to crash

I like concept like Phantom type to limit interface. Here we’re not using type but a wrapper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

final class BlurView: UIView {
  private let effectView: UIVisualEffectView

  init(style: UIBlurEffectStyle, backgroundColor: UIColor? = nil) {
    self.effectView = UIVisualEffectView(effect: UIBlurEffect(style: style))
    self.effectView.backgroundColor = backgroundColor
    super.init(frame: .zero)
    insertSubview(effectView, at: 0)
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError()
  }

  override func addSubview(_ view: UIView) {
    effectView.contentView.addSubview(view)
  }

  override func layoutSubviews() {
    super.layoutSubviews()

    effectView.frame = bounds
  }
}

Here we override addSubview to always add views to effectView.contentView. In the init method, we need to call insertSubview instead because of our overriden addSubview

Now BlurView has a blur effect thanks to is underlying UIVisualEffectView, but expose only addSubview because of its UIView interface. This way it is impossible to cause crashes 😎

1
2

let blurView = BlurView(style: .dark)
blurView.addSubview(button(

Issue #119

This is about collection update, how to provide correct IndexPath and a simple diffing algorithm

• Excerpt from my talk at CocoaHeads, Oslo https://www.meetup.com/CocoaHeads-Oslo/events/244892347/
• Slide https://speakerdeck.com/onmyway133/collection-update

CollectionView

It’s hard to imagine of any apps that don’t use Table View or CollectionView. And by CollectionView, I actually mean UICollectionView 😉 . Most of the time, we show something with response from backend, then potentially update and insert new items as data changed.

We can totally call reloadData to reflect the changes, but an animation is better here as it gives user better understanding of what’s going on, and to not surprise them.

This talks about UICollectionView, but UITableView behaves the same

Drag and Drop

Let’s imagine an app where user are allowed to customise their experience by moving items from one collection to another.

You can take a look at the example DragAndDrop which is using the new drag and drop API in iOS 11.

You must ensure that your data is changed before calling update methods on UICollectionView. And then we call deleteItems and insertItems to reflect data changes. UICollectionView performs a nice animation for you

1
2
3
4
5
6
7
8
9
10
11
12
13

func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) {

  let destinationIndexPath = coordinator.destinationIndexPath
  let sourceIndexPath = coordinator.items.last?.dragItem.localObject as! IndexPath

  // remove
  sourceItems.remove(at: sourceIndexPath.item)
  sourceCollectionView.deleteItems(at: [sourceIndexPath])

  // insert
  destinationItems.insert(draggedItem, at: destinationIndexPath.item)
  destinationCollectionView.insertItems(at: [destinationIndexPath])
}

NSInternalInconsistencyException

If you have large number of items with many insertions and deletions from backend response, you need to calculate the correct IndexPath to call, which are not easy thing. Most the time you will get the following crashes

Terminating app due to uncaught exception ‘NSInternalInconsistencyException’,
reason: ‘Invalid update: invalid number of items in section 0.
The number of items contained in an existing section after the update (213)
must be equal to the number of items contained in that section before
the update (154), plus or minus the number of items inserted or
deleted from that section (40 inserted, 0 deleted) and plus
or minus the number of items moved into or out of
that section (0 moved in, 0 moved out).’

In my experience it happened randomly because everyone has different data. Although the message is very descriptive, it may take a while to figure it out.

Game of IndexPath

Let’s refine our knowledge of IndexPath by going through some examples. With a collection of 6 items, we perform some update operations and figure out what IndexPath should be.

1

items = ["a", "b", "c", "d", "e", "f"]

Take a look at my example here CollectionUpdateExample, there are many more examples

index vs offset

Before we go any further, I just want to mention that, by index I actually mean offset from the start. If you take a look at the enumerated function, it suggests the name as offset instead of index

1
2
3

Array(0..<10).enumerated().forEach { (offset, element) in

}

This zero based numbering could shed some light on this matter

Particularly in C, where arrays are closely tied to pointer arithmetic, this makes for a simpler implementation: the subscript refers to an offset from the starting position of an array, so the first element has an offset of zero.

1. Insert 3 items at the end

1
2
3
4
5
6

items.append(contentsOf: ["g", "h", "i"])

// a, b, c, d, e, f, g, h, i

let indexPaths = Array(6...8).map { IndexPath(item: $0, section: 0) }
collectionView.insertItems(at: indexPaths)

2. Delete 3 items at the end

1
2
3
4
5
6
7
8

items.removeLast()
items.removeLast()
items.removeLast()

// a, b, c

let indexPaths = Array(3...5).map { IndexPath(item: $0, section: 0) }
collectionView.deleteItems(at: indexPaths)

3. Update item at index 2

1
2
3
4
5
6

items[2] = "👻"

// a, b, 👻, d, e, f

let indexPath = IndexPath(item: 2, section: 0)
collectionView.reloadItems(at: [indexPath])

4. Move item “c” to the end

1
2
3
4
5
6
7
8
9

items.remove(at: 2)
items.append("c")

// a, b, d, e, f, c

collectionView.moveItem(
  at: IndexPath(item: 2, section: 0),
  to: IndexPath(item: 5, section :0)
)

5. Delete 3 items at the beginning, then insert 3 items at the end

With multiple different operations, we should use performBatchUpdates

You can use this method in cases where you want to make multiple changes to the collection view in one single animated operation, as opposed to in several separate animations. You might use this method to insert, delete, reload, or move cells or use it to change the layout parameters associated with one or more cells

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

items.removeFirst()
items.removeFirst()
items.removeFirst()

items.append(contentsOf: ["g", "h", "i"])

// d, e, f, g, h, i

collectionView.performBatchUpdates({
  let deleteIndexPaths = Array(0...2).map { IndexPath(item: $0, section: 0) }
  collectionView.deleteItems(at: deleteIndexPaths)

  let insertIndexPaths = Array(3...5).map { IndexPath(item: $0, section: 0) }
  collectionView.insertItems(at: insertIndexPaths)
}, completion: nil)

6. Insert 3 items at the end, then delete 3 items beginning

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

items.append(contentsOf: ["g", "h", "i"])

items.removeFirst()
items.removeFirst()
items.removeFirst()

// d, e, f, g, h, i

collectionView.performBatchUpdates({
  let insertIndexPaths = Array(6...8).map { IndexPath(item: $0, section: 0) }
  collectionView.insertItems(at: insertIndexPaths)

  let deleteIndexPaths = Array(0...2).map { IndexPath(item: $0, section: 0) }
  collectionView.deleteItems(at: deleteIndexPaths)
}, completion: nil)

🙀

If you run the example 6, you will get a crash

1
2
3
4

Terminating app due to uncaught exception 
'NSInternalInconsistencyException', 
reason: 'attempt to insert item 6 into section 0, 
but there are only 6 items in section 0 after the update'

performBatchUpdates

It is because the way performBatchUpdates works. If you take a look at the documentation

Deletes are processed before inserts in batch operations. This means the indexes for the deletions are processed relative to the indexes of the collection view’s state before the batch operation, and the indexes for the insertions are processed relative to the indexes of the state after all the deletions in the batch operation.

No matter how we call insert or delete, performBatchUpdates always performs deletions first. So we need to call deleteItems and insertItems as if the deletions occur first.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

items.append(contentsOf: ["g", "h", "i"])

items.removeFirst()
items.removeFirst()
items.removeFirst()

// d, e, f, g, h, i

collectionView.performBatchUpdates({
  let deleteIndexPaths = Array(0...2).map { IndexPath(item: $0, section: 0) }
  collectionView.deleteItems(at: deleteIndexPaths)

  let insertIndexPaths = Array(3...5).map { IndexPath(item: $0, section: 0) }
  collectionView.insertItems(at: insertIndexPaths)
}, completion: nil)