How to Make App Mockups With AppCooker

Add the RWDevCon Logo to the Table View Header

The last piece of UI on this screen is the RWDevCon branding logo in the table view header. It’s time to grab another icon from iCloud Drive.

1. Tap the image icon in the navigation bar.
2. Select iCloud Drive from the drop-down list.
3. Within the AppCookerImages folder, select rwdevconlogo.png. This adds an image to your screen.
4. Drag and resize the image to center it inside the table view header.

You can use the orange guides to help you maintain aspect ratio and snap to element boundaries.

Tab Bar Transitions

One compelling use case for AppCooker is its ability to create interactive transitions between screens. You can customize these transitions with animations to mimic push, pop and tab bar transitions.

Duplicate the First Screen

Before you can create a transition, you need a second screen. Since the Friday and Saturday tabs are so similar, you’re just going to duplicate the first screen.

1. If you’re on the Editor workspace, tap Done in the top-left corner to return to the Screen View workspace.
2. Tap the Home screen. This will reveal a popover menu.
3. Tap Duplicate to create an identical screen named Home 2.
4. Tap the word Home and rename it Friday.
5. Rename Home 2 to Saturday.

Update the Tab Bar Icon Images

Right now, both tabs look identical. You’re going to update the Saturday tab so you can tell it apart from Friday.

1. Double-tap the Saturday screen to return to the Editor.
2. Using the steps outlined earlier, change the Friday tab icon to march11outline.png.
3. Also change the Saturday tab icon to march12fill.png.
4. While editing the Saturday tab icon, check off the Selected cell.
5. Change the table view section header text to Saturday 9:00 AM instead of “Friday”.

When you mark the Saturday tab bar icon as Selected, it automatically de-selects Friday.

Create the Tab Bar Transition

The tab bar widget has some built-in linking capabilities. You can leverage this to link the new Saturday tab to the Friday tab.

1. Within the Saturday Editor, select the tab bar element.
2. Select the Tabs button from the property bar. This opens up a Tabs modal.
3. Select the Friday cell.
4. In the Link options section, toggle the Link switch.
5. Tap the Select a Target screen cell. This takes you to the Item Link page.
6. Under the Screen targeted section, tap Select a Target.
7. On the Screen Targeted page, select the Friday cell. This returns you to the previous page.
8. Under the Type of transition section, select the Fade +0.3 sec cell. This takes you to the Type of Transition page.
9. Change the transition type to None.

You just created a tab transition that goes from the second tab to the first, with no animation. You’ll see a blue square over the Friday icon, which indicates it’s tappable.

Now you can circle back and create a transition from the Friday screen to the Saturday screen.

1. Tap Done in the top-left corner to return to the Screen View.
2. Double-tap the Friday screen.
3. Repeat the steps above for creating a tab bar link. But this time, link the Saturday tab bar icon to the Saturday screen.

Test the Transition in Preview Mode

You need to test the tab bar transitions to make sure they work. To do so, you have to use AppCooker’s Preview mode.

1. In the Screen View workspace, tap the Play button, which is a triangle icon in the navigation bar. This takes you into Preview.
2. Optionally, tap the Link icon to toggle off the blue tappable area.
3. Tap the Play triangle to start the preview.
4. Verify that the selected tab changes as you tap the Friday and Saturday icons.
5. Double-tap with two fingers to exit the preview.

When using Preview, you won’t be able to interact with the mockup until you tap the Play button. And once you’re in Play mode, remember to double-tab with two fingers to exit.

One benefit of AppCooker is that you can design and test on the same device. Since you’re using an iPad, you have access to gestures like tap, swipe, multi-touch and device rotation.

Smart Back Transitions

Screen transition animations usually come in pairs. When you push a detail page, you pop to go back. Likewise, when you present a modal, you dismiss to go back. AppCooker has a convenient feature called Smart Back that uses the reverse animation to return to the previous screen.

Create a Detail Page

Before you can play with this feature, you first need to create a detail page.

1. Navigate back to the Screen View workspace.
2. Double-tap on an empty area of the workspace to create a new screen.
3. Rename the new screen Detail Page.
4. Double-tap on the screen to enter Editor mode.
5. From the Widgets menu, add a status bar, a navigation bar and a table view.
6. Tap Done to return to the Screen View.

You just created a detail page with a few UI elements. But look closely at the navigation bar widget and you’ll notice a blue tappable area over the Back button. It turns out this button is pre-configured with a Smart Back link. Just by adding a navigation bar, you’re halfway to finishing your Smart Back transition.

Create a Simple Link

The next step is to create a link from the Friday screen to the Detail Page.

1. Open the Editor for the Friday screen.
2. Tap the Link button in the navigation bar.
3. Select Add a Simple Link area.
4. A red box will appear onscreen. Drag and resize it so it covers up the first Beginning Swift cell.
5. In the property bar, tap Choose a target screen. This will open a popover.
6. Tap the Select a Target cell.
7. Select the Detail Page cell.
8. Change the Type of transition to Cover R.

The Simple Link creates a transition from the Friday tab to the Detail Page, using the Cover Right animation. The Smart Back button is already in place on the Detail Page, and it will play the animation in reverse on the return trip.