iOS Contest 2022, Round 1

---

The Task is to create a media editing app in Swift similar to the native iOS drawing tool. The final result should include the following features with the closest possible implementation of the provided mockups and visualizations:

• Drawing and text editing with a wide range of tools
• Smooth scaling of the grid layout when browsing media
• A screen to request the user’s permission to access their Photo Library

Minimum Requirements

To be considered for any prize, your app must include the following:

1. Drawing with a brush tool. Drawing should support line smoothing and dynamically change brush size based on how fast the user draws on the screen. Implementing extra tools, like pencil, marker, neon or lasso would have a lower impact on the final scoring but may affect your prize. The logic and behaviour for these instruments can be similar to the iOS native drawing tool.
2. Smooth, high-quality drawing. Basic drawing quality is a top priority for this contest.
3. Changing font size in the text editor. It is mandatory to include moving, scaling and rotating text as well as changing font size with a slider on the left side of the screen. Implementing fonts switcher has a lower priority.

Apps which lack a proper implementation of the mentioned functions in a manner consistent with the provided mockups and visualizations are extremely unlikely to receive any prizes.

---

Resources

• The archive containing all the mockups and visualizations is available here. For Figma, follow this link.
• The source code of Telegram for iOS is available on GitHub and can be used for the contest.

---

The Contest Task

To be evaluated, your app must include the minimum required features. We recommend focusing on them first and moving on to the rest of the task only when you are certain they are working perfectly.

Below is the basic flow we expect from submitted apps. This page features some of the visualizations, but make sure to check the full archive for detailed mockups and visualizations for each required feature.

1. Drawing and text editing features with a wide range of tools

1.1 Opening the editor
Tapping an item in the gallery opens the editor (03 creative tools.png). The ’Draw’ tab is the default option. The elements ’Undo’, ’Clear All’, and ’Save to Gallery’ have two states – default inactive for unedited media, and active after changes are made. If a user leaves the editor with unsaved changes, discarding media should be prevented with an alert. The app should provide a ’Zoom Out’ option to restore the default scale after the canvas has been zoomed in.

1.2 Editing tools

• Drawing and Markup Tools – Tapping an active tool presents its parameters, like line weight (08 pen weight.png). The app should indicate the weight on the specific tool by following their slider movement. Pen, brush and marker tools should allow for switching between shapes – like lines and arrows. The eraser feature clears pixels, applies blur or deletes objects (3 Eraser.mp4).

• Selecting Colors – Tapping the button should open a full-size view with tabs for ’Grid’, ’Spectrum’ and ’Sliders’. Users should also be able to press and hold the button for the color selector – opening a smaller window with a color spectrum that they can swipe over to pick a color.

• Shapes – The [+] button on the right side of the panel displays the list of available shapes. Shapes can be selected and placed on the canvas by tapping them in the list. It should be possible to move, transform and duplicate shapes on the canvas. Additionally, when using certain tools (pen, brush, marker), users should have the option to quickly switch between drawing round lines or arrows. When several shape objects or text entities are present on the canvas, tapping them should allow changing their z-index using ’Move Forward’ and ’Move Backward’. If an object is already at the bottom or at the top of the stack, the app should hide the irrelevant button.

1.3 Text
Text tools should be available in the second tab. The text editor panel should appear in the lower part of the screen or above the keyboard when expanded (2 Font.mp4). The logic for selecting text color is inherited from the ’Draw’ tab.

Text style can be adjusted by tapping the [A] button to choose from framed, outlined, or regular options. The button should change its appearance to match the user’s selected style. Changing text alignment options should animate the button on the panel to match the currently active mode.

The right side of the panel displays available fonts – each presented as a small scrollable bar. Once the bar goes under the rest of the panel by scrolling left, it should become semi-transparent. Similar to shapes, any text placed on the canvas can be moved, transformed, duplicated or deleted by tapping it.

2. Smooth scaling of the grid layout when browsing media

If the app has access to the Photo Library, it should display its content as a dynamic scrollable grid (02 gallery.png). If a video is represented in the grid, a duration timestamp should appear in the bottom-right corner of the tile. Using a pinch gesture to zoom in and out should make the grid scale and change its layout exactly as shown in the 4 CollectionView Zoom.mp4 visualization.

When the grid consists of 5 rows or fewer, tapping on specific tiles will open their media. Otherwise, tapping should zoom in with a smooth transition to display fewer rows. (This is similar to the behavior of the iOS Photos app.)

3. A screen to request the user’s permission to access their Photo Library

When users launch the app for the first time, it should present them with a screen with a looped animated effect sparkling over the button (01 allow access.png).

A custom solution for handling cases with partial or no access given is not mandatory but can be beneficial if the app implements it well.

---

Questions, concerns and more

For further clarifications and requests regarding the contest task refer to the official Telegram Contests group. Kindly include #ios with your questions.