The default UISegmentedControl does not support color images. As I wanted to have some in Eventail, I have developed a quick replacement for the default view. It tries to copy the API as closely as possible.

I use some helper function from my “utility” library:

extension Collection {
  
  /// Return an element of a collection or nil
  subscript(optional i: Index) -> Iterator.Element? {
    return self.indices.contains(i) ? self[i] : nil
  }
  
  /// Iterate over collection elements, progressively yielding the previous, current and next element
  func rollOver(closure: (Self.Element?, Self.Element, Self.Element?) -> Void) {
    var prev: Self.Element? = nil
    for i in self.indices {
      let next = self[optional: self.index(after: i)]
      closure(prev, self[i], next)
      prev = self[i]
    }
  }

}

The class itself is simple and is @IBDesignable. Unfortunately, Xcode does not (yet) support @IBInspectable arrays so I expose three UIImage variables. If you need to add segments, copy and paste a few of those.

//  ImageSegmentedControl.swift

import Foundation
import UIKit

@IBDesignable
class ImageSegmentedControl: UIControl {
  // @IBInspectable does not support arrays yet, but a segmented control does
  // not really need to have too many elements
  @IBInspectable var image1: UIImage? = nil {
    didSet {
      images[0] = image1
    }
  }
  
  @IBInspectable var image2: UIImage? = nil {
    didSet {
      images[1] = image2
    }
  }
  
  @IBInspectable var image3: UIImage? = nil {
    didSet {
      images[2] = image3
    }
  }

  /// Currently selegted segment
  public var selectedSegmentIndex: Int = 0

  // A nil image will represent a non-existing segment
  private var images = [UIImage?](repeating: nil, count: 3)
  
  private var segments = [UIView]()
  private var isSegmentEnabled = [Bool](repeating: true, count: 3)
  private var borders = [CALayer]()
  private var initialized: Bool = false
  
  override init(frame: CGRect) {
    super.init(frame: frame)
  }
  
  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
  }
  
  override func layoutSubviews() {
    if !initialized {
      layer.cornerRadius = 5
      layer.borderWidth = 1
      layer.borderColor = tintColor.cgColor
      
      clipsToBounds = true
      
      images.forEach {
        guard let image = $0 else {
          return
        }
        
        let imageView = UIImageView(image: image)
        imageView.contentMode = .center
        imageView.translatesAutoresizingMaskIntoConstraints = false
        segments.append(imageView)
      }
      
      segments.rollOver {
        prev, segment, _ in
        addSubview(segment)
        let previousAnchor = prev?.trailingAnchor ?? leadingAnchor
        NSLayoutConstraint.activate([
          segment.leadingAnchor.constraint(equalTo: previousAnchor),
          segment.centerYAnchor.constraint(equalTo: centerYAnchor),
          segment.heightAnchor.constraint(equalTo: heightAnchor),
          segment.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 1/CGFloat(segments.count)),
          ])
        if prev != nil {
          borders.append(segment.addLeftBorderWithColor(color: tintColor, width: 1))
        }
        segment.isUserInteractionEnabled = true
        
        let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(ImageSegmentedControl.handleTap(_:)))
        tapRecognizer.numberOfTapsRequired = 1
        tapRecognizer.isEnabled = true
        segment.addGestureRecognizer(tapRecognizer)
      }
      
      initialized = true
    }
    
    borders.forEach { $0.frame = CGRect(origin: $0.frame.origin, size: CGSize(width: $0.frame.width, height: frame.height)) }
    
    for i in 0..<segments.count {
      segments[i].backgroundColor = i == selectedSegmentIndex ? tintColor : nil
      segments[i].isUserInteractionEnabled = isSegmentEnabled[i]
      segments[i].alpha = isSegmentEnabled[i] ? 1 : 0.25
    }
    
    super.layoutSubviews()
  }
  
  @objc func handleTap(_ recognizer: UITapGestureRecognizer) {
    if let i = segments.firstIndex(where: { $0 == recognizer.view }) {
      selectedSegmentIndex = i
      setNeedsLayout()
      UIView.animate(withDuration: 0.3) {
        self.layoutIfNeeded()
      }
      sendActions(for: .valueChanged)
    }
  }
  
  func setEnabled(_ enabled: Bool, forSegmentAt segmentIndex: Int) {
    // We need to store the enabled/disabled state because the segments
    // can be actually initialized after this method is called
    isSegmentEnabled[segmentIndex] = enabled
    if let segment = segments[optional: segmentIndex] {
      segment.isUserInteractionEnabled = enabled
      segment.alpha = enabled ? 1 : 0.25
    }
  }
  
}

Some features of this view:

• Exposes the currently selected segment via selectedSegmentIndex akin to UISegmentedControl
• Inherits from UIControl so it has all of the outlets for common events. Only the valueChanged event fires though.
• Is @IBDesignable so you can see how will it look

And this is how it looks in Xcode

I have released a few versions of Eventail since my last post.

Version 3.0

The notable major update 3.0 has brought the interactive mode. When active, the widget will give each entry more space in the day view and populate each entry with buttons which can launch various actions.

The actions can open the events or reminders in an app of the user’s choice, start navigation to a specific event, join a conference call and more. The full list is described in the documentation.

This new mode is malleable and makes it easy for me to add integrations with other applications in the future.

Version 3.1

The 3.1 update for Eventail has brought support for, what I call, “universal URLs”. What this feature does is that any event or reminder that has the URL property set, will have a button in the widget to open it.

First usage that pops to mind is adding URLs to events manually, and there are some great candidates for that. For example you can use the iOS shortcuts URL scheme to launch a shortcut.

Another handy feature of iOS is that it will add a callback URL here every time you create an event from a message, be it an e-mail or iMessage. Since the message itself can contain useful information (such as a door access code for your hotel or flight reservation number) the ability to show it immediately from the lock screen is very practical.

Version 3.1.1

In version 3.1.1 I have added a possibility to define custom URLs for opening events and reminders. This way, I will not have to manually enter all possible URLs. A simple template will do. I will try to scour the Internet and add as many URLs for popular apps into the documentation.

Sneak peek into the future

Next release will bring a possibility to display the reminders with due dates inside the Todo widget instead of the Calendar view. Possibly there will be some new integrations as well.

Your application is finished and uploaded to the App Store. You are happy and eager to see the reactions from customers. Then, a review like this lands in:

After a few dozens of such reviews, you may be tempted to translate the application into another language. In this article I will point out a few reasons why that might be a bad idea and give a few pointers for when you decide to pass the hurdle.

Translation may bring other people into the churn

Working alone on an app makes a things easy and agile—writing new features and fixing bugs takes little time and once they are written nothing stops you from releasing the new version.

If you translate the application into a language that you do not master yourself, you need to bring in translators and to depend on them. This ties to someone else’s schedule every time you modify a visible text in the application.

Someone else might be on vacation, they might be sick or have other stuff to do and will not scramble to translate things for you. You have to plan the releases around their availabilities.

Translation brings additional (boring) work

I assume that you have thought about internationalisation from the beginning and that your code uses localisable strings everywhere. If it does not, this should be done before any translating can start.

You will have to translate all of the strings in the application and the whole UI. Be aware than many terms that are common in English are do not always have counterparts in other languages. This concerns a lot of technical and computer related vocabulary. This means that you will need to do due diligence to find out what terms are colloquially used in the target language for what you wish to describe.

Some languages handle the context differently from others: A menu with a lot of switches may only require a short label in front of each switch in English, but demand longer descriptions when translated. This may require alterations to the UI because the labels might no longer fit in the original space.

Once your application has been translated, you are halfway done. You also have to think about screenshots, documentation, marketing material¹ and the website.

Translation is a commitment

Features which modify visible text will generate more work from now on. Screenshots, for example, are required for each supported language. Depending on your platform, their generation can be automated by tools such as fastlane².

Be prepared to find yourself in a situation when you have finished the features, fixed the bugs, and are ready to submit, only to realise that you have forgot to translate the one button which you have added. If you are using translators, pray that they are not on vacation.

Expect to receive support mail in foreign languages. If you have used an external translator, you may not be able to answer them.

A few hints for future polyglots

If you have considered the above and are ready to start translating I can give you a few hints:

Minimise text in your application

Put as few labels as possible into your applications. Consider them like you consider code, if it exists it must be maintained.

I have removed some settings from my app at the last minute, so I would not have to translate the associated controls. If a feature is hard to explain in a foreign language, it might be too complex to use as well.

If a label can be replaced by a pictogram do so. A good example would be to use a slider with small and large character at either side rather than listing text sizes.³

Use textual representation for your translated strings

In iOS, you can use full Storyboards or string lists for translating the UI. Stick with the plain text lists as they are easy to diff and mistakes in them are quick to spot.

Localisation will live next to the code in your SCM repository and it is important that its format be adapted.

Make the non-translated strings pop

Use a gibberish placeholder for untranslated strings and add them immediately after you create each new string. Most frameworks will use the default (usually English) label for non translated strings and this can lead to forgotten translations.

Closing words

Translating an application might seem to be a good way to increase the number of possible clients and profit. But consider what you are giving up: having an application developed by a single person in a single language gives you incredible flexibility. This agility might be worth more than a satisfying few angry customers.

Over at the DOS Games Club we have played six small games¹ during the cold month of December. I have suggested playing UGH! and joined Florian, Martijn, Mike, Philipp and Tim on the 25^th episode.

In February we will be operating on unfortunate patients in the Life & Death.

Today I have discovered the Dotsies font. Although I doubt I will use this, it made me wonder about using it in Eventail.

I’ll hammer something out to test this.

I have joined micro.blog, to which I will hopefully federate micro posts from this blog.

Let the writing commence.

Increasing amount of tools are written for web, many presenting themselves as replacement for standard desktop applications.

For simple stuff this is fine, few people would like to install an application for every shop or transport provider.

Complex programs running in tabs hit an insurmountable hurdle: “they cannot implement correct keyboard shortcuts”. And it is a problem that nobody has figured out yet, it is a fundamental issue that will never be fixed.

Some examples that come to mind:

• How would you open a tab in your web app? ⌘T opens a new browser tab. What about a new window⌘N?
• How do you undo? In Safari ⌘Z undoes closing of a tab.
• If your application provides a save option, what would you use? ⌘S will try to save a useless HTML document.

Another problem is selection. ⌘A selects everything, this is never what you want to do in an application, but it can be something you want to do on a webpage. This means you need to break one behavior or the other.

MKBHD’s video about blind camera comparison concluded with a baffling result. The most interesting thing is not the winner, but the phones that got to share the last place: iPhone XS, iPhone X and Pixel 3.

Although their cameras are superior on technical level¹, people prefer pictures from other cameras because of increased brightness and saturation.

Of course there is nothing that stops iPhone and Pixel to do the same thing at the cost of losing information rendering further post-processing inflexible. That being said, I can imagine that being beaten by a Blackberry in a photography test must hurt.

Solution

The solution is simple. I am sure that if pictures after auto-enhance have been thrown in the competition, the results would be different. The winner might stay the same, but I doubt that iPhones and Pixels would remain dead last.

What Apple and Google should do is to add an option to turn on auto-enhance by default. This way no information would be lost and people who prefer pictures without it could disable it. It would make the pictures coming straight off-camera punchier.

But first Apple would need to fix their auto-enhance algorithm which makes everything orange.

As a side project I am launching my YouTube channel Binary Campfire. I haven’t decided its ultimate purpose; but as others before me, I will start posting some videos about video games. Old ones, as that is what I play these days.

The first video will take us back to 1992, with a side scroller/shooter game Alcatraz.