How We Open Sourced Our First iOS Project

It happened while we were redesigning the iOS version of Crowdfire and facing a lot of design constraints with the default UIAlertController. We realised that the system’s default alerts and action sheets didn’t go with our app design theme, and offered no flexibility to modify its UI. We needed our own theme-styled alerts and action […]

It happened while we were redesigning the iOS version of Crowdfire and facing a lot of design constraints with the default UIAlertController. We realised that the system’s default alerts and action sheets didn’t go with our app design theme, and offered no flexibility to modify its UI. We needed our own theme-styled alerts and action sheets and our talented design team were already ready with some really good alerts and action sheets designs. All we needed to write code. From scratch.

We launched a basic version of CFAlertViewController to enhance our alert and action sheet functionality as shown below:

Alerts and Action sheet styles

Here’s the code snippet to help you create a basic alert view as shown in the top left image.

https://medium.com/media/392290d89a11b8f1a00443927089b13a/href

Later in the product development stage, our design team came up with an idea to display image or gifs as header in an alert.

Dollar image view used as header in the alert

Earlier, we would ask our free users to upgrade to a paid plan when they hit their daily limit. Our marketing team came up with a plan to give the free users the option to either upgrade to a higher plan or tweet something to increase the daily limits at the same time. The design team came up with the following pop-up design:

The “OR” section view in the footer of the alert

However, as per the UI requirement, we needed to modify the control in a way that it would retain the existing alert properties and be able to handle and display different UI modules in top and bottom of the alert. We also had to make it scalable so that it would be able to fulfil different UI requirements in the future.

We were sure that there would be teams or individuals having similar requirements too, and hence, we decided that building a generic solution to the problem would make more sense. What we had in mind was a control that would not only retain the alerts and action sheet requirement functionality but also offer additional functionality to add header or footer view which is a subclass of UIView (e.g., UIImageView or your custom view).

We built CFAlertViewController and open-sourced it. We have designed its API in a way that it is similar to the system’s existing UIAlertController class structure and is modifiable, extendable, and offers new functionality. It comes with the following features:

  • You can adjust the alignment of the title and subtitle of any alert. You can also align actions as per your requirement.
  • It functions on both iPhone and iPad. It offers adaptive UI and screen rotation support.
  • It supports header and footer view in an alert. In fact, it comes with numerous configurations and possibilities so that you can even create a custom alert out if it. You can even pass your custom header or footer view and ignore all the basic alert or action sheet functionalities. This way, your own view can behave like an alert or action sheet and automatically get features like rotation, keyboard support and adaptive layout functionality without ever writing a single line of code!

You can have a look at the demo project and open source code on Github.

If you found the post helpful, please recommend and share. 🙂


How We Open Sourced Our First iOS Project was originally published in Coding Big — The Crowdfire Engineering Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: Crowdfire