How to Make App Mockups With AppCooker

Changing the Status Bar Color

Now that the background color is dark gray, it’s hard to see the status bar. You’re going to fix this.

1. Tap the status bar.
2. In the property bar, tap the Style button.
3. Select Light Content from the popover menu. The status bar will now be white.

You may have noticed that AppCooker gives you options for dark content and light content rather than “black” and “white”. This is because the native widget properties tend to map directly to an API in iOS. In this case, the two UIStatusBarStyle options are .Default (dark content) and .LightContent.

Configuring the Table

Table views are an essential part of mobile development. Naturally, there are a lot of configuration options for cell styles, cell accessories, sections and headers. AppCooker makes many of these properties available in the table view widget.

Delete Unused Sections and Rows

By default, the table view widget is populated with pre-configured cells to give you a sense of what’s possible. Your first order of business: delete some of this boilerplate.

1. Select the table view on your screen.
2. Tap the Sections button in the property bar. This opens the Sections modal.
3. Swipe the row named Section 1 to the left and tap Delete.
4. Select Section 0, which takes you to the Section Details page.
5. Swipe to delete the second cell, named Title.

You’ll end up with one section containing a single cell.

Configure the Cell

Each cell needs to fit quite a bit of information, including the title of the talk, course number, difficulty level and room number. The Subtitle cell style is a good choice, since you can squeeze in two lines of information, one on top of the other.

1. On the Section Details page, tap the first cell named Title. This takes you to the Cell Details page.
2. Under the Style section, tap the example cell, which currently has a Basic style.
3. On the Cell Style page, select the second cell, the one where the title is on top of the subtitle. This will take you back to the previous page.
4. Under the Accessory section, tap the example cell, which is currently set to Detail Button.
5. On the Cell Accessory page, select the first item, None. Again, this will take you back to the previous page.

You’ve changed the cell style from Basic to Subtitle, as well as gotten rid of a cell accessory button. Onward!

Change the Cell Text Color

The built-in subtitle cell is functional, but it doesn’t look exciting. Why don’t you change the title color to that dashing RWGreen you saved earlier?

1. On the Cell Details page, find the Title row and tap the Info button. This will take you to the Title Attributes page.
2. Tap the black row at the bottom to go to the Title Color page.
3. Select the green square from the color palette you saved earlier.
4. Tap the Back button twice until you return to the Cell Details page.
5. Repeat the same steps to change the Subtitle Color to the light gray color from the palette.

The cell title will now be green, and the subtitle a light gray.

Add Body Copy to the Cell

You’re going to enter some mock information to help you visualize the end product.

1. On the Cell Details page, find the Title and Subtitle cells in the Content section.
2. Change the Title to Beginning Swift.
3. Change the Subtitle to 101 • Beginner • Edison A/B/C. On an iOS keyboard, hold down the hyphen – key and the bullet • character will appear in a popover.
4. Tap the Back button to return to the Section Details page.
5. Replace the Header text with FRIDAY 9:00 AM.

Data entry can be tedious. Fortunately, AppCooker makes it easy to duplicate cells.

Fill Up the Table With Duplicate Cells

Right now your table view has just a single cell. The mockup might look better with a fully populated table.

This is only a mockup, so why not copy and paste?

1. On the Section Details page, tap Duplicate Last Cell.
2. Keep duplicating the last cell until the table is fully populated.

Hey, maybe it’s a popular workshop!

Importing Images

AppCooker integrates with iCloud Drive, so it’s easy to import images. If you haven’t done so already, download this zip file containing images and icons. If you want, you can generate the icons yourself in this Sketch tutorial.

Transfer Images to iCloud Drive

1. From a desktop web browser, log into www.icloud.com/#iclouddrive with your Apple ID.
2. Within iCloud Drive, create a new folder called AppCookerImages.
3. Unzip the AppCookerResourceFolder.zip file.
4. Drag all the image files from Finder to the iCloud Drive folder.

AppCooker’s integration with iCloud makes it a cinch to transfer images and backup files.

Set the Tab Bar Icons

Currently, two tab bar icons are set to default star and ellipsis images. For this mockup, you’re going to use a calendar image with an “11” to represent Friday, March 11th. Likewise, you’ll use a “12” icon for Saturday.

1. Back in the AppCooker Editor, select the tab bar at the bottom of the screen.
2. Tap the Tabs button in the property bar. This will reveal a Tabs modal.
3. Select the first cell, which is named Favorites.
4. Rename the Title to Friday.
5. Select the Icon cell. This will reveal an action sheet.
6. Select iCloud Drive from the bottom of the list. This will open an iCloud Drive modal.
7. Select the AppCookerImages folder you created earlier.
8. Select march11fill.png. This sets the icon and dismisses the modal.

Even though the image is green, you’ll notice the tab bar icon is blue. Certain icons in iOS are rendered as template or stencil images. In a later step, you’ll set a tint color to fix this.

For the icon on the second tab, repeat the same steps as before. Except this time:

1. Change the Title from “More” to Saturday.
2. Use the file march12outline.png.

As a final touch, set the tab bar’s tint color to RWGreen:

1. Make sure the tab bar is still selected.
2. In the property bar, tap the Tint button.
3. Select RWGreen from the color palette.

The Friday icon will now be green with a filled calendar icon, and the Saturday icon will be the gray outline version.

The calendar outline icon has a lot of empty space, so when you select it, the color change isn’t obvious. This is why you’re using a separate fill version for the selected state.