Amer Hukić

Replicating the Safari toolbar collapsing and expanding animation on iOS 15

2021-10-31T00:00:00+00:00

The iOS 15 update brought us a redesigned Safari app with the address bar being displayed at the bottom of the screen compared to the earlier version where it was on top. The redesign also brought us some delightful animations when creating new tabs or when scrolling web pages where the address bar would expand and collapse. I found the animations quite neat, so I spent some time trying to recreate them.

In this blog post I will explain how I implemented the animation for collapsing and expanding of the toolbar and address bar when the user scrolls a web page. You can take a look at the source code on this GitHub repo. The end result is the following animation:

The Safari toolbar is implemented as a UIToolbar subclass that contains UIBarButtonItems for different actions. When the toolbar is added to the view hierarchy its height is set to 100, so that it can fit the address bar above the UIBarButtonItems.
The constraints setup method for the toolbar is written using SnapKit and looks like this:

func setupToolbar() {
  addSubview(toolbar)
  toolbar.snp.makeConstraints {
    $0.top.equalTo(tabsScrollView.snp.bottom)
    $0.leading.trailing.equalToSuperview()
    $0.height.equalTo(100)
    toolbarBottomConstraint = $0.bottom.equalTo(safeAreaLayoutGuide.snp.bottom).constraint
  }
}

We are keeping the reference to the bottom constraint, so that we can use it later to animate the disappearance of the toolbar.

The address bar is also a custom class that contains, among other properties, a textfield for entering the website that you want to load and a label for showing the domain name of the website. The address bar is added to the root view and placed on top of the toolbar:

func setupAddressBar() {
  addSubview(addressBar)
  addressBar.snp.makeConstraints {
    $0.leading.trailing.equalToSuperview()
    $0.height.equalTo(62)
    addressBarBottomConstraint = $0.bottom.equalTo(safeAreaLayoutGuide).offset(addressBarExpandingFullyBottomOffset).constraint
  }
}

The addressBarExpandingFullyBottomOffset property is a CGFloat constant that we will need later on to show the toolbar expanding animation.

Collapsing animation

For implementing the toolbar collapsing animation we can use the UIViewPropertyAnimator. It is a great way to create dynamic, interactive, interruptable animations and the API is relatively easy to use.

The collapsing animation is composed of two parts. In the first part of the animation the address bar and toolbar are pushed down the screen until they reach a certain threshold. Then the second part of the animation starts which:

pushes the toolbar below the bottom edge of the screen
pushes the address bar to the bottom of the screen
scales down the address bar, so that it gives the effect of it being stretched
scales down the domain label, so it fits the toolbar in the collapsed state

The animator for the collapsing animation would look like this:

func setupCollapsingToolbarAnimator {
  // 1
  addressBarBottomConstraint?.update(offset: addressBarCollapsingHalfwayBottomOffset)
  toolbarBottomConstraint?.update(offset: toolbarCollapsingHalfwayBottomOffset)
  collapsingToolbarAnimator = UIViewPropertyAnimator(duration: 0.1, curve: .linear) { [weak self] in
    // 2
    self?.setAddressBarAlpha(0)
    self?.view.layoutIfNeeded()
  }

  // 3
  collapsingToolbarAnimator?.addCompletion { [weak self] _ in
    guard let self = self else { return }
    // 4
    self.addressBarBottomConstraint?.update(offset: self.addressBarCollapsingFullyBottomOffset)
    self.toolbarBottomConstraint?.update(offset: self.toolbarCollapsingFullyBottomOffset)
    UIViewPropertyAnimator(duration: 0.2, curve: .easeOut) { [weak self] in
      guard let self = self else { return }
      self.addressBar.containerView.transform = CGAffineTransform(scaleX: 1.2, y: 0.8)
      self.addressBar.domainLabel.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
      self.view.layoutIfNeeded()
    }.startAnimation()
  }
  // 5
  collapsingToolbarAnimator?.pauseAnimation()
}

We need to update the address bar and toolbar constraints, so that we can prepare the first part of the animation where the address bar and toolbar partially collapse.
We create our animator whose animation block triggers the constraints change animation and address bar alpha animation.
We add a completion block to the animator which will trigger and complete the second part of the collapsing animation.
In the second part of the animation we once again update the address bar and toolbar constraints and animate the change using another independent animator. We also update the transform of the address bar to create the stretching animation and update the transform of the domain label to animate the scaling down of the label text.
We need to call pauseAnimation() to move the animator to the active state. We will later manually control the animation by updating the fractionComplete property.

Expanding animation

The expanding animation is implemented the same way as the collapsing animation - using the UIViewPropertyAnimator. The expanding animation is also composed of two parts. In the first part of the animation the address bar and the toolbar are pushed up the screen until they reach a certain threshold. Then the second part of the animation starts which:

sets the toolbar and address bar constraints to the initial value when the toolbar was not collapsed
reverts the transforms of the address bar and domain label to identity.
sets the alpha of the address bar back to 1.

The animator would look like this:

func setupExpandingToolbarAnimator() {
  addressBarBottomConstraint?.update(offset: addressBarExpandingHalfwayBottomOffset)
  toolbarBottomConstraint?.update(offset: toolbarExpandingHalfwayBottomOffset)
  expandingToolbarAnimator = UIViewPropertyAnimator(duration: 0.1, curve: .linear) { [weak self] in
    self?.view.layoutIfNeeded()
  }
  expandingToolbarAnimator?.addCompletion { [weak self] _ in
    guard let self = self else { return }
    self.toolbarBottomConstraint?.update(offset: self.toolbarExpandingFullyBottomOffset)
    self.addressBarBottomConstraint?.update(offset: self.addressBarExpandingFullyBottomOffset)
    UIViewPropertyAnimator(duration: 0.2, curve: .easeIn) { [weak self] in
      self?.addressBar.containerView.transform = .identity
      self?.addressBar.domainLabel.transform = .identity
      self?.setAddressBarContainersAlpha(1)
      self?.view.layoutIfNeeded()
    }.startAnimation()
  }
  expandingToolbarAnimator?.pauseAnimation()
}

Controlling animations using pan gesture tracking

The collapsing and expanding animations wouldn’t look so good if they weren’t interactive. To achieve that the animation runs dynamically based on the scrolling distance of the web view, we can track the scrolling behaviour of web view’s scroll view using its pan gesture recognizer. The pan gesture handling method would look like this:

@objc func handlePan(_ panGestureRecognizer: UIPanGestureRecognizer) {
  let yOffset = webView.scrollView.contentOffset.y
  switch panGestureRecognizer.state {
  case .began:
    startYOffset = yOffset
  case .changed:
    webViewDidScroll(yOffsetChange: startYOffset - yOffset)
  case .failed, .ended, .cancelled:
    webViewDidEndDragging()
  default:
    break
  }
}

When the pan gesture begins we store the initial y offset. Once the gesture changes we need to calculate the y offset difference and use it to activate the right animation and calculate its progress. The webViewDidScroll(yOffsetChange:) method would look like this:

func webViewDidScroll(yOffsetChange: CGFloat) {
  // 1
  let offsetChangeBeforeFullAnimation = CGFloat(30)
  let animationFractionComplete = abs(yOffsetChange) / offsetChangeBeforeFullAnimation
  let thresholdBeforeAnimationCompletion = CGFloat(0.6)
  let isScrollingDown = yOffsetChange < 0
  
  // 2
  if isScrollingDown {
    // 3
    guard !isCollapsed else { return }
    
    // 4
    if collapsingToolbarAnimator == nil || collapsingToolbarAnimator?.state == .inactive {
      setupCollapsingToolbarAnimator()
    }
    
    // 5
    if animationFractionComplete < thresholdBeforeAnimationCompletion {
      collapsingToolbarAnimator?.fractionComplete = animationFractionComplete
    } else {
      isCollapsed = true
      collapsingToolbarAnimator?.continueAnimation(withTimingParameters: nil, durationFactor: 0)
    }
  } else {
    // 6
    guard isCollapsed else { return }
    if expandingToolbarAnimator == nil || expandingToolbarAnimator?.state == .inactive {
      setupExpandingToolbarAnimator()
    }
    
    if animationFractionComplete < thresholdBeforeAnimationCompletion {
      expandingToolbarAnimator?.fractionComplete = animationFractionComplete
    } else {
      isCollapsed = false
      expandingToolbarAnimator?.continueAnimation(withTimingParameters: nil, durationFactor: 0)
    }
  }
}

We calculate the animation completion fraction using the y offset. We also set the threshold after which the animation should complete automatically.
If the user is scrolling down we need to trigger the collapsing animation.
We track the state of the toolbar and address bar using the isCollapsed flag. If the toolbar is already in the collapsed state then we skip the animation.
If an animator does not exist (e.g. we just started the animation) we need to create it. Also, if the animation has already completed and the animator moved to the inactive state, but user keeps scrolling without ending the pan gesture then we need to stop and recreate the animator.
If the animationFractionComplete value below the thresholdBeforeAnimationCompletion then we just update the animation completion fraction. But, if the threshold is reached then we update the isCollapsed flag and complete the animation by calling the continueAnimation(withTimingParameters:, durationFactor:) method on the animator.
The same logic for collapsing is also used for expanding animation.

Reverting incomplete animations

One neat thing about these animations is that they revert back to the previous state if the animation completion fraction doesn’t reach the threshold before the user stops scrolling.
Initially, I thought that I could implement this behaviour by using the animator’s isReversed property. Unfortunatelly, this doesn’t work when the animation is implemented using constraints. That’s why I had to use a different approach.
We need to track when the user ends dragging and reverse the animation if it hasn’t completed. As shown in the pan gesture handler above, the webViewDidEndDragging() method gets called when the gesture ends. Its implementation would look like this:

func webViewDidEndDragging() {
  // 1
  if let collapsingToolbarAnimator = collapsingToolbarAnimator,
      collapsingToolbarAnimator.state == .active,
      !isCollapsed {
    reverseCollapsingToolbarAnimation()
  }
  
  // 2
  if let expandingToolbarAnimator = expandingToolbarAnimator,
      expandingToolbarAnimator.state == .active,
      isCollapsed {
    reverseExpandingToolbarAnimation()
  }
  
  // 3
  collapsingToolbarAnimator = nil
  expandingToolbarAnimator = nil
}

If the collapsing animator is active, but the toolbar is not fully collapsed then we need to revert the animation.
If the expanding animator is active, but the toolbar is not fully expanded then we need to revert the animation.
Set the animators to nil so that they are recreated when the user starts dragging again.

The collapsing animation reversal is triggered by calling the reverseCollapsingToolbarAnimation() method:

func reverseCollapsingToolbarAnimation() {
  guard let collapsingToolbarAnimator = collapsingToolbarAnimator else { return }
  // 1
  addressBarBottomConstraint?.update(offset: addressBarCollapsingHalfwayBottomOffset * collapsingToolbarAnimator.fractionComplete)
  toolbarBottomConstraint?.update(offset: toolbarCollapsingHalfwayBottomOffset * collapsingToolbarAnimator.fractionComplete)
  view.layoutIfNeeded()

  // 2
  collapsingToolbarAnimator.stopAnimation(true)
  collapsingToolbarAnimator.finishAnimation(at: .current)

  // 3
  addressBarBottomConstraint?.update(offset: addressBarExpandingFullyBottomOffset)
  toolbarBottomConstraint?.update(offset: 0)
  UIViewPropertyAnimator(duration: 0.1, curve: .linear) { [weak self] in
    self?.setAddressBarContainersAlpha(1)
    self?.view.layoutIfNeeded()
  }.startAnimation()
}

We need to update the constraints so that their value corresponds to the current layout visible on the screen. We need to use the fractionComplete of the animator to determine the completion state of the animation and use it to calculate the value for our constraints. After that we need to trigger the layout of the updated constraints.
We stop and finish the current animator.
We update the constraints and alpha to their previous value (in this case the expanded state value) and trigger the reverse animation.

The expanding animation reversal method is implemented in the same way:

func reverseExpandingToolbarAnimation() {
  guard let expandingToolbarAnimator = expandingToolbarAnimator else { return }
  addressBarBottomConstraint?.update(offset: addressBarExpandingHalfwayBottomOffset * expandingToolbarAnimator.fractionComplete)
  toolbarBottomConstraint?.update(offset: toolbarExpandingHalfwayBottomOffset * expandingToolbarAnimator.fractionComplete)
  view.layoutIfNeeded()
  expandingToolbarAnimator.stopAnimation(true)
  expandingToolbarAnimator.finishAnimation(at: .current)
  addressBarBottomConstraint?.update(offset: addressBarCollapsingFullyBottomOffset)
  toolbarBottomConstraint?.update(offset: toolbarCollapsingFullyBottomOffset)
  UIViewPropertyAnimator(duration: 0.1, curve: .linear) { [weak self] in
    self?.setAddressBarContainersAlpha(0)
    self?.view.layoutIfNeeded()
  }.startAnimation()
}

Conclusion

Working on this project was quite interesting. In this post, I’ve described how the toolbar animations are implemented through a couple code snippets. If you are interested in how the project was organized in more detail you can check out my GitHub repo which contains a lot more content.

Adding support for Swift Package Manager in existing CocoaPods library

2021-06-27T00:00:00+00:00

Yesterday, I have updated my AHDownloadButton library to support Swift Package Manager and I wanted to share the steps that I needed to take.

Initial setup

To setup the initial folder structure and files needed to integrate SwiftPM we need to navigate to the root folder of our library (in my case AHDownloadButton) and run the following command:

swift package init

After successfully running the command you will see an output like this:

Creating library package: AHDownloadButton
Creating Package.swift
Creating Sources/
Creating Sources/AHDownloadButton/AHDownloadButton.swift
Creating Tests/
Creating Tests/AHDownloadButtonTests/
Creating Tests/AHDownloadButtonTests/AHDownloadButtonTests.swift

As you can see, SwiftPM create its own folder structure that we now have to adjust a bit to work with CocoaPods:

First we need to remove the placeholder files and folders in AHDownloadButton/Sources.
Then we need to move our library source folder with Assets and Classes subfolders into the new Sources folder.
We can also remove AHDownloadButton/Tests since our tests reside inside the example project: AHDownloadButton/Example/Tests.
Now we have to update the project file paths that we have changed, so that Cocoapods can work correctly. We need to open the project workspace, remove the invalid references to the source files and readd them again to the project.
After that we need to update the path in the .podspec. In my example the updated source_files property will look like this: Sources/AHDownloadButton/Classes/**/*.

Now, the initial project cofiguration to support both SwiftPM and CocoaPods is done. The last step is to configure the Package.swift file.

Setting up Package.swift

The Package.swift file is a human-readable configuration file that is used by SwiftPM to build your library. It contains various properties that define your package. This file is created in the root folder of your project during initialization.
The Package.swift file for my project looks like this:

// swift-tools-version:5.0

import PackageDescription

let package = Package(
    name: "AHDownloadButton",
    platforms: [
        .iOS(.v8)
    ],
    products: [
        .library(
            name: "AHDownloadButton",
            targets: ["AHDownloadButton"]),
    ],
    targets: [
        .target(
            name: "AHDownloadButton",
            dependencies: [])
    ],
    swiftLanguageVersions: [
        .v5
    ]
)

The structure is very simple:

The first line is a comment that tells the SwiftPM what is the minimum version of Swift needed for compiling the source code of this package.
name, obviously, defines the name of the package.
platforms defines platforms supported by the package.
products defines a list of products that this package produces. In my case it’s the AHDownloadButton library.
targets defines a list of targets that are part of this package. In my case I only have one target without dependencies. I removed the test target because tests are part of the example project.
swiftLanguageVersions defines a list of Swift versions that this package supports.

After setting up the Package.swift file the only thing that is left is to commit the changes, add a SemVer tag and push the changes:

git commit -m 'Add support for SwiftPM'
git push
git tag 1.3.0
git push origin 1.3.0

The support for SwiftPM is now set up and the library can be tested in your project.

Conclusion

Setting up SwiftPM was much easier than I thought, mostly because my library did not have any kind of special requirements like external dependencies and similar.
I have gone a step further and added the library to the Swift Package Index. It’s a project by Dave Verwer that allows developers to explore different third party libraries that support SwiftPM. More info on how to add your library to Swift Package Index is available here.

Creating cURL command from URLRequest in LLDB

2020-12-10T00:00:00+00:00

I have recently looked into how you can add custom LLDB commands that you can use for debugging in Xcode. The process is quite simple and it’s very useful to have custom commands that are used repeatedly.

Creating a custom LLDB command

I found that the easiest way to do that is to use command regex LLDB command. You can find more info about it by opening terminal and typing lldb and then help command regex.

Something that I needed often when debugging networking code is a full cURL command that I can then test in my terminal or send it to a backend engineer for further inspection. That’s why I created an LLDB command that outputs a cURL command from a URLRequest instance.

The process for creating such a command looks like this:

Write the Swift code that you want your command to execute. In my case it could look like this:

func curl(from urlRequest: URLRequest) {
  guard let url = urlRequest.url else { return }
  var baseCommand = #"curl "\#(url.absoluteString)""#
  if urlRequest.httpMethod == "HEAD" {
    baseCommand += " --head"
  }
  
  var command = [baseCommand]
  if let method = urlRequest.httpMethod, method != "GET" && method != "HEAD" {
    command.append("-X \(method)")
  }
  
  if let headers = urlRequest.allHTTPHeaderFields {
    for (key, value) in headers where key != "Cookie" {
      command.append("-H '\(key): \(value)'")
    }
  }
  
  if let data = urlRequest.httpBody, let body = String(data: data, encoding: .utf8) {
    command.append("-d '\(body)'")
  }
  
  print(command.joined(separator: " \\\n\t"))
}

Remove the new lines from the code.
Use %1 to reference the instance that is passed to the command when debugging. In my case it is a URLRequest instance.
Add the code into the command regex LLDB command like this: command regex mycommand 's|(.+)|expr my_swift_code|
The final command in our example looks like this:

command regex curl 's|(.+)|expr let inputRequest = %1; guard let url = inputRequest.url else { print("");return };var baseCommand = #"curl "\#(url.absoluteString)""#;if inputRequest.httpMethod == "HEAD" { baseCommand += " --head" };var command = [baseCommand];if let method = inputRequest.httpMethod, method != "GET" && method != "HEAD" { command.append("-X \(method)") };if let headers = inputRequest.allHTTPHeaderFields { for (key, value) in headers where key != "Cookie" { command.append("-H '\''\(key): \(value)'\''") } };if let data = inputRequest.httpBody, let body = String(data: data, encoding: .utf8) { command.append("-d ''\(body)''") };print(command.joined(separator: " \\\n\t"))|

NOTE: You need to escape the single quote characters to avoid errors when the command is initialized. You can do that by replacing ' with '\''.

Add the newly created command into the .lldbinit file located in Home directory (~/.lldbinit). If the file doesn’t exist create it first.

Now, each time you are debugging a project you can use the custom command like this:

(lldb) curl request

curl "https://mywebsite.com" \
	-H 'Accept: application/json' \
	-H 'Authorization: Basic htu574kfj584kfnd84kdlwut92jayebgpylg8md72msgrk'

In the end, I recommend watching this great talk on advanced debugging by Dave Lee.

Generating a PDF file from UIScrollView content

2019-07-19T00:00:00+00:00

After taking a short break, I decided to get back to writing by covering an interesting problem that I had to work on in the recent past. I had to generate a one page PDF file that contained content presented in a UIScrollView.

PDF file generation process

The process of generating a PDF file using UIKit’s built-in functions is quite straightforward. The code for generating PDF file would look like this:

// 1
UIGraphicsBeginPDFContextToData(outputData, pageDimensions, nil)
// 2
if let context = UIGraphicsGetCurrentContext() {
    // 3
    UIGraphicsBeginPDFPage()
    // 4
}
// 5
UIGraphicsEndPDFContext()
// 6
outputData.write(to: pdfFileUrl, atomically: true)

We first start by creating a PDF graphics context using UIGraphicsBeginPDFContextToData(_:_:_:). This function requires three parameters:
- NSMutableData object that will contain the PDF output data.
- CGRect object that defines the size and location of the PDF pages.
- [AnyHashable: Any] dictionary that can contain additional metadata about the document.
We can access the context by calling UIGraphicsGetCurrentContext(). This will allow us to issue drawing commands to that context.
Before drawing anything we have to call UIGraphicsBeginPDFPage() or UIGraphicsBeginPDFPageWithInfo(_:_:). These functions are used for creating a new page inside the PDF file. All the drawing that happens after calling that function will be transferred onto the newly created page.
Perform drawing operations.
After we have finished drawing we have to call the UIGraphicsEndPDFContext() function to close the graphics context.
As a result, we will have an NSMutableData object that stores the PDF data. The data object can then be used for writing into a file on disk or sharing the data directly.

Note that there is also a second function that can be used to create a PDF context - UIGraphicsBeginPDFContextToFile(_:_:_:). It is just slightly different from the one we used in terms that it writes the result of the drawing directly into a file instead of an NSMutableData object.

Drawing the `UIScrollView` content to a PDF file

The main problem when generating a PDF from a UIScrollView is capturing all the content inside the UIScrollView. There are a couple of ways of doing that. I’ve found that the most straightforward way was to have a content view as the first subview of the scrollview and using that view to take a snapshot of the scrollview. Based on the PDF file generation process described in the previous paragraph, we could create a function that generates a one page PDF file with the content presented in a UIView like this:

func generatePDFdata(withView view: UIView) -> NSData {

    let pageDimensions = view.bounds
    let outputData = NSMutableData()

    UIGraphicsBeginPDFContextToData(outputData, pageDimensions, nil)
    if let context = UIGraphicsGetCurrentContext() {
        UIGraphicsBeginPDFPage()
        view.layer.render(in: context)
    }
    UIGraphicsEndPDFContext()

    return outputData
}

Now, we only have to pass the scrollview’s content view as a parameter to get the PDF data, and, if we want, write that data into a file.

Handling transparent colors

One interesting thing that I noticed when the PDF file was generated is that the transparency in colors was gone. All views with background colors that had the alpha component less then 1 were opaque, so I had to find a workaround for that issue.
In my case, the superview of the transparent views was white. That meant that I could create the colors that were made as a result of mixing of the transparent colors with the superview’s white color. That way I could simulate color transparency.
I’ve made an extension on UIColor that I used for this purpose:

extension UIColor {

    func withSimulatedTransparency(backgroundColor: UIColor, alpha: CGFloat) -> UIColor {

        var bgRed: CGFloat = 0, bgGreen: CGFloat = 0, bgBlue: CGFloat = 0, bgAlpha: CGFloat = 0
        guard backgroundColor.getRed(&bgRed, green: &bgGreen, blue: &bgBlue, alpha: &bgAlpha) else {
            return self
        }

        var fgRed: CGFloat = 0, fgGreen: CGFloat = 0, fgBlue: CGFloat = 0, fgAlpha: CGFloat = 0
        guard getRed(&fgRed, green: &fgGreen, blue: &fgBlue, alpha: &fgAlpha) else {
            return self
        }

        let resultingRed = fgRed * alpha + bgRed * bgAlpha * (1 - alpha)
        let resultingGreen = fgGreen * alpha + bgGreen * bgAlpha * (1 - alpha)
        let resultingBlue = fgBlue * alpha + bgBlue * bgAlpha * (1 - alpha)

        return UIColor(red: resultingRed, green: resultingGreen, blue: resultingBlue, alpha: 1)
    }

}

Finding the custom URL scheme of an iOS app

2019-03-14T00:00:00+00:00

I was recently hired to find out if an app has a custom URL scheme. Using the URL scheme the developer would be able to implement deep linking and launch that app from his own app.
The process of finding the URL scheme was quite simple, so I decided to write a tutorial on how to do it.

Downloading the IPA of the app

There are a couple of ways to download the IPA of an app available on the App Store. I’ve chosen to use the iMazing MacOS app, because I think it’s the most straightforward way of doing it. It is an iOS device management tool with a lot of great features and you should definitely check it out.
These are the steps that you have to take:

Once you have downloaded and installed the app, open it and connect your iPhone with the app.
After the device is connected, you will be able to see the menu on the right side. From the menu select Manage Apps.
From the list of apps in the Library tab select the app for which you want to download the IPA file and click the download button.
You will be prompted to sign in with your Apple ID. After you sign in, you will be able to download the app.
Once the download is finished, right click on the app and export the IPA file to your disk.

Finding the custom URL scheme

Downloading the IPA file was the hard part. Now you only need to extract the Info.plist file and find the URL scheme if it exists. To do this you have to do the following:

Change the file extension of the IPA file from .IPA to .zip.
Unzip the file.
In the unzipped file you will find the Payload folder. The folder should contain a .app file.
Right click on the .app file and select Show Package Contents.
In the resulting folder you will find the Info.plist file. If the URL scheme exists it should be stored under the CFBundleURLSchemes key of the property list:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>MyUrlScheme</string>
    </array>
  </dict>
</array>

Storing NSAttributedString with UIImage in Core Data

2019-01-25T00:00:00+00:00

I have recently worked on solving a bug in a simple note-taking app. It allowed the user to save notes that could contain text together with images. The app was built using Core Data and there was a bug where notes that contained images were not saved properly. When the notes were later retrieved, the images were missing and only text was present.

Converting `NSAttributedString` to `NSData` and vice versa

To display the note content the app was using a UITextView and its attributedText property which is an NSAttributedString. Since Core Data doesn’t support storing an NSAttributedString, the content had to be converted to NSData before saving:

extension NSData {
    func toAttributedString() -> NSAttributedString? {
        let data = Data(referencing: self)
        let options : [NSAttributedString.DocumentReadingOptionKey: Any] = [
            .documentType: NSAttributedString.DocumentType.rtfd,
            .characterEncoding: String.Encoding.utf8
        ]

        return try? NSAttributedString(data: data,
                                       options: options,
                                       documentAttributes: nil)
    }
}

Later, that value would be converted back from NSData to NSAttributedString:

extension NSAttributedString {
    func toNSData() -> NSData? {
        let options : [NSAttributedString.DocumentAttributeKey: Any] = [
            .documentType: NSAttributedString.DocumentType.rtfd,
            .characterEncoding: String.Encoding.utf8
        ]

        let range = NSRange(location: 0, length: length)
        guard let data = try? data(from: range, documentAttributes: options) else {
            return nil
        }

        return NSData(data: data)
    }
}

Note that during conversion the documentType has to be rtfd. It is a rich text format document that supports attachments which in our case are images.

Adding images

We will use a UIImagePickerController to pick an image from photo library and add the image to the attributed text using NSTextAttachment. When the user picks an image a delegate method in UIImagePickerControllerDelegate will get called:

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        picker.dismiss(animated: true, completion: nil)

    guard let image = info[.originalImage] as? UIImage,

        // scale the image to fit the textView frame
        let scaledImage = image.resized(toWidth: self.textView.frame.size.width),

        // encode the image in base64
        let encodedImageString = scaledImage.pngData()?.base64EncodedString(),

        // create an attributed string by embedding the encoded image in HTML
        let attributedString = NSAttributedString(base64EndodedImageString: encodedImageString) else {
          return
    }

    // append the image to the attributed text in the textView
    let attributedText = NSMutableAttributedString(attributedString: textView.attributedText)
    attributedText.append(attributedString)
    textView.attributedText = attributedText
}

Image resizing

We have to resize the image to fit the textView frame size using the custom resized(toWidth:) method on UIImage:

extension UIImage {
    func resized(toWidth width: CGFloat) -> UIImage? {
        let height = CGFloat(ceil(width / size.width * size.height))
        let canvasSize = CGSize(width: width, height: height)
        UIGraphicsBeginImageContextWithOptions(canvasSize, false, scale)
        defer { UIGraphicsEndImageContext() }
        draw(in: CGRect(origin: .zero, size: canvasSize))
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

Creating an NSAttributedString using an encoded image

The most straightforward way of adding a UIImage to NSAttributedString is by using the NSTextAttachment:

let attachment = NSTextAttachment()
attachment.image = image
let attributedString = NSAttributedString(attachment: attachment)

Unfortunately, this approach causes a bug when converting the attributed string into NSData where the image gets removed during the conversion process. So I had to find another way of doing it. Fortunately, using HTML to add the image to the attributed string doesn’t cause the aforementioned bug. We only need to add the Base64 encoded image to the <img> tag:

extension NSAttributedString {
    convenience init?(base64EndodedImageString encodedImageString: String) {
        var html = """
        <!DOCTYPE html>
        <html>
          <body>
            <img src="data:image/png;base64,\(encodedImageString)">
          </body>
        </html>
        """
        let data = Data(html.utf8)
        let options: [NSAttributedString.DocumentReadingOptionKey : Any] = [
            .documentType: NSAttributedString.DocumentType.html,
            .characterEncoding: String.Encoding.utf8.rawValue
        ]
        try? self.init(data: data, options: options, documentAttributes: nil)
    }
}

It’s interesting to note that NSTextAttachment is used internally when the attributed string is created this way. This can be easily inspected by using the po command in the debugger.

How to add Carthage support in existing CocoaPods project

2018-12-25T00:00:00+00:00

I’ve finally found some free time to review the contributions on AHDownloadButton repo and prepare a new release. Before releasing a new version I wanted to add support for Carthage, because the project is currently only supporting CocoaPods. Carthage is a great lightweight dependency manager and if you haven’t used it yet, I suggest you read up on it on.
Even though I’ve used Carthage as a dependency manager in one of my project, I’ve never had to add support for it in my personal libraries. In this short blog post, I’ll describe how you can add Carthage support for a library that already supports CocoaPods.

Adding support for Carthage is quite easy, compared to CocoaPods, as there are no additional files required (like the .podspec file). The only thing you need to do is to share the Xcode scheme that you want to build. To do that you have to:

Open the workspace/project that contains your pod.
Go to Product > Scheme > Manage Schemes.
Select the Shared checkbox for your pod scheme.

To test if the scheme builds successfully you can run carthage build --no-skip-current.

Possible problems

If you created your pod using pod lib create you might see that all schemes are already shared. That is what confused me the first time, since my library had all the schemes marked as shared but failed carthage build with error message:
*** Skipped building AHDownloadButton due to the error:
Dependency "AHDownloadButton" has no shared framework schemes

After further investigation I noticed that the .xcodeproj/xcshareddata/xcschemes/AHDownloadButton.xcscheme file was missing. This file is created when the scheme is shared but Xcode didn’t create it. A simple fix is to just uncheck and check the shared checkbox and the file should be created. After that, you just have to commit the file and push the changes to your repository.

Prebuilding and archiving the framework

Instead of building your library from scratch, Carthage can use the prebuilt framework if it is attached to the release of the library on GitHub. To archive the library simply run:
carthage build --no-skip-current
carthage archive YourFrameworkName

This will create a zip archive of your framework that you can upload on GitHub when you release a new version of your library.

This step is not mandatory but is good for the users of your library to be able to download the framework directly from the release.

Determining the content size of a WKWebView

2018-11-04T00:00:00+00:00

In one of my recent projects, I had to use a web view to display an HTML string with local CSS and custom font. The web view had to be embedded inside a scroll view along with a couple of other views. It also had to have a height adjusted to the content it was displaying. My goal was to create something like this:

I had already done this in one of my previous projects so I figured I’d reuse the same code.
The problem was that the code was using a UIWebView instead of the newer WKWebView. Since iOS 8, UIWebView was replaced with a much more powerful and well structured WKWebView, and since iOS 12 UIWebView was officially deprecated. That meant that I had to reimplement the feature.
I’ve put all the code in an example project on GitHub so you can follow along.

Loading HTML string

For loading HTML strings into the web view, WKWebView has loadHTMLString(_:baseURL:) method. The HTML string that I was getting from backend did not have <HTML>, <HEAD> and <BODY> tags so I had to manually add them. The method for loading the HTML looked like this:

func loadHTMLContent(_ htmlContent: String) {
    let htmlStart = "<HTML><HEAD><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, shrink-to-fit=no\"></HEAD><BODY>"
    let htmlEnd = "</BODY></HTML>"
    let htmlString = "\(htmlStart)\(htmlContent)\(htmlEnd)"
    webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)
}

Important notes:

The <HEAD> tag has to have viewport metadata which is important for the correct calculation of the content height of the web view.
The baseURL parameter in loadHTMLString has to be the main bundle URL because we will be loading our local custom font.

Loading local CSS

Loading local CSS file into HTML was pretty easy in UIWebView. You only had to add <link rel='stylesheet' href='/path/to/css' type='text/css'> in the <HEAD> tag. In WKWebView the process is a bit more complicated because it requires CSS to be injected after HTML loads. We can do that by utilizing the webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) method of the WKNavigationDelegate:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    guard
        let path = Bundle.main.path(forResource: "style", ofType: "css"),
        let cssString = try? String(contentsOfFile: path).components(separatedBy: .newlines).joined()
    else {
        return
    }

    let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
    webView.evaluateJavaScript(jsString)
}

First, we load the contents of the style.css file into a string variable. After that, we use JavaScript to inject a <style> tag into web view’s HTML. The problem with this approach is that the web view loads HTML, displays it and after that applies CSS. That transition is visible by the user which is not good.

Fortunately, there is a better approach. We can use WKUserScript that represents a script that can be injected into a webpage, and WKUserContentController that allows us to inject that script into the web view. These objects will be used inside a WKWebViewConfiguration during WKWebView initialization:

lazy var webView: WKWebView = {
    guard
      let path = Bundle.main.path(forResource: "style", ofType: "css"),
      let cssString = try? String(contentsOfFile: path).components(separatedBy: .newlines).joined()
    else {
      return WKWebView()
    }

    let source = """
       var style = document.createElement('style');
       style.innerHTML = '\(cssString)';
       document.head.appendChild(style);
    """

    let userScript = WKUserScript(source: source,
                                  injectionTime: .atDocumentEnd,
                                  forMainFrameOnly: true)

    let userContentController = WKUserContentController()
    userContentController.addUserScript(userScript)

    let configuration = WKWebViewConfiguration()
    configuration.userContentController = userContentController

    let webView = WKWebView(frame: .zero,
                            configuration: configuration)
    return webView
}()

Using this approach, CSS will be loaded just after HTML loads and there won’t be a transition that can be noticed by the user.

Adding custom font in CSS

To add custom fonts in Xcode, I suggest you follow Apple’s tutorial. After adding the font, we need to load it into the web view using CSS. To use custom fonts in CSS we need to use the @font-face CSS rule:

@font-face {
    font-family: "Titillium Web";
    font-weight: normal;
    src: url("TitilliumWeb-Regular.ttf")
}

@font-face {
    font-family: "Titillium Web";
    font-style: italic;
    src: url("TitilliumWeb-Italic.ttf")
}

@font-face {
    font-family: "Titillium Web";
    font-weight: bold;
    src: url("TitilliumWeb-Bold.ttf")
}

This way, we have defined our custom font and it can now be used in CSS:

body {
    margin: 0;
    font-family: "Titillium Web";
    font-weight: normal;
    font-size: 13pt;
}

Calculating web view’s content height

After loading HTML and CSS in the web view we have to calculate it’s height. To calculate the height we’ll use JavaScript to find the scrollHeight of the document in the web view. We’ll do that in the delegate method to make sure that the web view finished loading before calculation:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.documentElement.scrollHeight", completionHandler: { (height, error) in
        self.webViewHeightConstraint?.constant = height as! CGFloat
    })
}

Conclusion

In this blog post, we’ve gone through one use case of WKWebView and analyzed the problems that can occur. We can see that the new API gives us much more flexibility and stability compared to the deprecated UIWebView.

Replicating the App Store download button

2018-09-26T00:00:00+00:00

With the release of iOS 11, Apple introduced a completely redesigned App Store app with greatly improved UI. Among many features and improvements, one thing that I found interesting was the redesigned download/purchase/update button.
I’ve been working in my spare time on implementing the download button. After a bit of experimenting, I implemented a working version. I only needed a couple more days to clean up the code and package it into a CocoaPod. You can take a look at the source code on the AHDownloadButton GitHub repo. The final result can be seen below:

The README section describes how to use the library. In this blog post, I will provide some details on how I implemented the download button as well as discuss some interesting points about the implementation.

Download state implementation

The download button has 4 different states:

startDownload
pending
downloading
downloaded

Each of these states is implemented as a separate view class.

The startDownload and downloaded state use the same class - HighlightableRoundedButton. It is a simple subclass of UIButton that has rounded corners and highlightable background and title. To implement highlighting I’ve overridden the isHighlighted property of UIButton:

override var isHighlighted: Bool {
    didSet {
        backgroundColor = isHighlighted ? highlightedBackgroundColor : nonhighlightedBackgroundColor
        let titleColor = isHighlighted ? highlightedTitleColor : nonhighlightedTitleColor
        setTitleColor(titleColor, for: .normal)
    }
}

The pending state uses a CircleView. It is a UIView subclass that has startAngleRadians and endAngleRadians properties that define the start and end angle of the circle. The drawing is implemented by adding a CAShapeLayer with a circular path. The path is defined by overriding layoutSubviews method:

override func layoutSubviews() {
    super.layoutSubviews()
    let radius = min(frame.width / 2, frame.height / 2) - lineWidth / 2
    let center = CGPoint(x: frame.width / 2, y: frame.height / 2)
    circleLayer.path = UIBezierPath(arcCenter: center,
                                    radius: radius,
                                    startAngle: startAngleRadians,
                                    endAngle: endAngleRadians,
                                    clockwise: true).cgPath
}

The downloading state is presented using the ProgressButton class. It is a UIControl subclass that uses a ProgressCircleView to show download progress. Whenever the user updates the progress property of the ProgressButton, the ProgressCircleView animates the progress change. The progress property is implemented in the following way:

var progress: CGFloat = 0 {
    didSet {
        if progress == 1 && isAnimating {
            if let currentAnimatedProgress = circleView.circleLayer.presentation()?.strokeEnd {
                circleView.circleLayer.strokeEnd = currentAnimatedProgress
                animateProgress(from: currentAnimatedProgress, to: progress)
            }
        }

        guard !isAnimating else { return }
        animateProgress(from: circleView.circleLayer.strokeEnd, to: progress)
    }
}

Whenever the progress is set to a value lower than 1, the isAnimating property is checked to make sure that the last change is not currently animating. If it’s not, it will animate the progress change to the newest value. If the progress is set to 1 and the last change is still animating then the running animation is overridden and progress is animated from the current presentation value to 1. This is the code that animates the progress change:

private func animateProgress(from startValue: CGFloat, to endValue: CGFloat) {
    isAnimating = true
    circleView.circleLayer.strokeEnd = endValue
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.timingFunction = CAMediaTimingFunction(name: .easeOut)
    animation.fromValue = startValue
    animation.duration = progressAnimationDuration
    animation.delegate = self
    circleView.circleLayer.add(animation, forKey: "strokeEnd")
}

State transition animations

Transition from one state to another is animated whenever the state property of the download button is changed. The initial implementation was very simple:

public var state: State = .startDownload {
    didSet {
        self.animateTransition(from: oldValue, to: state)
    }
}

After a bit of testing, I noticed an edge case that I missed here. What would happen if the state is changed during an animation of the previous state change? The animation for the latest state update would override the previous animation and it wouldn’t look nice. I needed to make sure that, whenever the state is changed, the animation for previous change completes before I animate the latest change. To do that, I used a background DispatchQueue in combination with a DispatchGroup:

public var state: State = .startDownload {
    didSet {
       // 1
       animationQueue.async { [currentState = state] in
           // 2
           self.animationDispatchGroup.enter()

           // 3
           var delay: TimeInterval = 0
           if oldValue == .downloading && currentState == .downloaded && self.downloadingButton.progress == 1 {
               delay = self.downloadingButton.progressCircleView.progressAnimationDuration
           }

           // 4
           DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
               self.animateTransition(from: oldValue, to: currentState)
           }
           // 5
           self.animationDispatchGroup.wait()
       }
    }
}

There are a few things to go over here:

I used a background queue to chain one transition animation after another. I am doing this because I do not want to block the main thread while waiting for the previous animation to finish. Also, note that I’ve captured the value of the state property inside a capture list. I have to do that because I want the closure to capture the state value at the time of creation, not at the time of execution.
I used a DispatchGroup for synchronization. I call animationDispatchGroup.enter() to indicate that I am going to animate a transition and that other animations need to wait for the current one to finish.
If the transition happens from downloading to downloaded state with a complete progress, then a delay has to be introduced to let the final progress animation finish before the transition animation starts.
Since animations need to be done on the main thread I have to dispatch the animation on the main queue.
In the last step, I call animationDispatchGroup.wait(). This will cause the background queue to be blocked until the animateTransition(from: oldValue, to: currentState) finishes execution and calls animationDispatchGroup.leave().

Using this approach I have synchronized the animations and I didn’t block the main thread while doing that. To see how animateTransition(from: oldValue, to: currentState) works I suggest that you take a look at the source code.

Conclusion

This was an interesting and fun project to make. In this post, I’ve described the more interesting parts of the implementation. If you want to know how I implemented it in more detail, how I separated and organized the classes and how I used them, head over to my GitHub repo. You can also find the documentation that describes how you can use and customize the download button.

New features in Swift 4.2

2018-09-19T00:00:00+00:00

Yesterday, Apple officially released the latest version of Swift programming language - Swift 4.2. It is a major release with a lot of improvements that include faster build times and features aimed towards removing boilerplate code and improving efficiency. It is also a significant step towards ABI stability planned for Swift 5.

There were many proposals that were accepted in this release. In this blog post, I will go through the ones that I find interesting.

Hashable enhancements

To be able to use a custom type in Set or as a key in Dictionary, it has to conform to Hashable protocol. In Swift 4.1, Hashable protocol looked like this:

protocol Hashable {
    var hashValue: Int { get }
}

Each custom type that implements Hashable has to provide a hashValue. Calculating the hashValue is not as simple as it seems. If the algorithm is not good enough, the cost is pretty high, because it impacts the performance of Dictionary and Set. That is why Hashable protocol was redesigned in Swift 4.2:

protocol Hashable {
    func hash(into hasher: inout Hasher)
}

To implement the new Hashable protocol, we have to call the hash function on the conforming type’s properties that we want to use in hash calculation and pass in the hasher as an argument. As an example, we can implement it on Person struct:

struct Person: Hashable {
    let name: String
    let age: Int

    func hash(into hasher: inout Hasher) {
        name.hash(into: &hasher)
        age.hash(into: &hasher)
    }
}

Note that there is also a generic Hasher.combine<H>(_:) method which is completely equivalent to Hasher.hash(into:) method and can be used in the same way.

Diagnostic directives - #warning and #error

An interesting feature implemented in this release are #warning and #error compiler diagnostic directives. As their names already say, #warning will cause Xcode to emit a warning when building code and #error will cause a compile error. #warning is very useful for marking code that is unfinished and it is a much more robust solution than marking the code with FIXME or TODO. #error can be used, for example, to notify the user that a library is not available on certain platforms:

#if LIB_VERSION < 3 && os(iOS)
#error("MyLib versions < 3 are not supported on iOS")
#endif

CaseIterable protocol

Before Swift 4.2, there was no standard way of listing all cases in enums. What one could do is create an allCases static property that returns a collection of all enum cases:

enum ConnectionState {
    case connecting
    case connected
    case disconnected

    static var allCases: ConnectionState = [.connecting, .connected, .disconnected]
}

This solution, however, is not optimal, because if we later add another case in the enum we have to add that case to allCases property.
This is where CaseIterable protocol comes into play. Our enum only has to conform to the protocol and the allCases property will be generated for us at compile time. Cases are ordered in order of their declaration.

enum ConnectionState: CaseIterable {
    case connecting
    case connected
    case disconnected
}

Note that compiler synthesis only works for enums without associated values.

Upgrading self from a weak to strong reference

One common pattern when working with closures in Swift is capturing self weakly to avoid retain cycles. The only mechanism for upgrading weak self to a strong reference is to unwrap it using if let or guard let statements. The problem is that we have to use a variable with an arbitrary name like strongSelf because we can’t use self for variable’s name. This introduces a lot of inconsistencies in the codebase.
Now, as of Swift 4.2, we can use self for naming the variable used for unwrapping like this:

DispatchQueue.main.async { [weak self] in
    guard let self = self else { return }
}

Conclusion

I’ve covered some of the features that were introduced in Swift 4.2 that were interesting to me. There are a lot of changes that I didn’t cover. You can read more about them on Apple’s official Swift blog.

Amer Hukić

Replicating the Safari toolbar collapsing and expanding animation on iOS 15

Toolbar and address bar setup

Collapsing animation

Expanding animation

Controlling animations using pan gesture tracking

Reverting incomplete animations

Conclusion

Adding support for Swift Package Manager in existing CocoaPods library

Initial setup

Setting up Package.swift

Conclusion

Creating cURL command from URLRequest in LLDB

Creating a custom LLDB command

Generating a PDF file from UIScrollView content

PDF file generation process

Drawing the UIScrollView content to a PDF file

Handling transparent colors

Finding the custom URL scheme of an iOS app

Downloading the IPA of the app

Finding the custom URL scheme

Storing NSAttributedString with UIImage in Core Data

Converting NSAttributedString to NSData and vice versa

Adding images

Image resizing

Creating an NSAttributedString using an encoded image

How to add Carthage support in existing CocoaPods project

Sharing the Xcode schemes

Possible problems

Prebuilding and archiving the framework

Determining the content size of a WKWebView

Loading HTML string

Loading local CSS

Adding custom font in CSS

Calculating web view’s content height

Conclusion

Replicating the App Store download button

Download state implementation

State transition animations

Conclusion

New features in Swift 4.2

Hashable enhancements

Diagnostic directives - #warning and #error

CaseIterable protocol

Upgrading self from a weak to strong reference

Conclusion

Drawing the `UIScrollView` content to a PDF file

Converting `NSAttributedString` to `NSData` and vice versa