Tải bản đầy đủ
Chapter 7. Setting Up the iOS Notes App

Chapter 7. Setting Up the iOS Notes App

Tải bản đầy đủ

with everything in iOS, and can’t just be turned on as with on OS X. After setting up
iCloud, we’ll set up the iOS app to work with the same Note document type we cre‐
ated for the OS X app in “Defining a Document Type” on page 98.

Designing the iOS Notes App
The most obvious difference between an iOS device and a Mac is the difference
between the two display sizes. An iPhone is much smaller than a Mac, and while the
iPad is bigger, it’s still quite small. Only iPad Pro approaches, and in some cases
exceeds, a regular laptop’s size.
On top of this difference in size, iOS devices have a second, more important distinc‐
tion: the user interacts with the interface using a touchscreen. Touchscreens change
the way that you interact with any user interface, for a number of reasons. One of
these is that because the user’s hand is not transparent, anything that the user is
touching is covered up by the finger that’s touching it. On top of that, the rest of the
hand that’s attached to that finger—the palm, wrist, and so on—also covers up even
more of the screen. Additionally, fingertips are significantly less precise than a mouse
cursor, which means that everything needs to be bigger if you want the user to
actually be able to touch it.
You might think that it’s incredibly obvious that a mobile device is
likely to be much smaller than a traditional computer, and you’d be
right; but it’s amazing how many mobile developers forget this and
try to cram everything into a single screen of a mobile app inter‐
face.

On top of the constraints imposed by the touchscreen, you have a number of other
hardware issues to deal with: the phone relies on a battery, which means that you
have to be very economical with the amount of power that you consume. Addition‐
ally, because users will be switching from WiFi to cell coverage as they move around,
your app can’t rely on access to the Internet.
Finally, there are constraints imposed by iOS itself. Unlike in OS X, there is no Finder
application that acts as the host for all other apps; instead of working primarily with
their documents in the Finder, users work with apps in the home screen. This means
that every iOS app that works with files is responsible for presenting the list of the
user’s files. This includes searching the iCloud container for files that the app should
present, as well as identifying when that list of files changes due to other devices mak‐
ing changes to the container.

174

|

Chapter 7: Setting Up the iOS Notes App

Starting with iOS 9, users can browse the contents of their iCloud
Drive using a built-in app. However, the user may not be using it—
the app can be disabled, the user may not have access to iCloud, or
the user may simply not know where to find it. The iCloud Drive
app is meant to be a secondary method for users to access their
files, because the iOS philosophy is that apps “contain” their docu‐
ments. This means that your app needs to present and manage its
own list of documents.

Additionally, not every file that’s in the user’s iCloud container will be downloaded to
the device. This differs from how it works on OS X, which automatically downloads
every file. Your app needs to specifically request to download each file that the user
wants to access.
With this in mind, we started designing wireframes for the iOS app: the basic layout
of each screen for the app, and how they relate (see Figures 7-1 through 7-3).

Figure 7-1. The document list

Designing the iOS Notes App

|

175

Figure 7-2. A single document

176

| Chapter 7: Setting Up the iOS Notes App

Figure 7-3. Location attachments
You’ll notice that the attachments list appears at the top of the screen, instead of at the
bottom. The reason for this is the on-screen keyboard, which occludes everything in
the bottom half of the screen; if users want to access their attachments, it’s not reason‐
able to ask them to dismiss the keyboard first.
At the end of these chapters, you’ll have implemented the whole application, which
will look like Figures 7-4 through 7-6.

Designing the iOS Notes App

|

177

Figure 7-4. The document list

178

|

Chapter 7: Setting Up the iOS Notes App

Figure 7-5. A single document

Designing the iOS Notes App

|

179

Figure 7-6. Location attachments
The iOS app will have many features, and we’ll be adding all of them over the coming
chapters:
• Compatibility with the OS X app’s documents: users can start writing a note on
OS X and make changes to it on any of their iOS devices.
• Files are stored in either iCloud or locally on the user’s device, as per the user’s
preference.

180

|

Chapter 7: Setting Up the iOS Notes App

• Conflict resolution for notes, so users can pick the most recent version if there’s a
conflict when notes are synchronized between devices.
• Attachments can be added to notes and viewed. These attachments include:
— images and videos, captured using the device’s camera.
— audio recordings, captured with the microphone.
— locations, using the device’s GPS.
— contacts, chosen from the user’s list of contacts.
• The user can set alarms on notes and be reminded to revisit them via a pop-up
notification.
• Image attachments can be shared via any of the user’s apps that support sharing
(Twitter, Facebook, Pinterest, and so on).
• Handoff support allows users to instantly move from one device to the next while
editing a document.
• A Today screen extension, which shows a list of notes in the user’s Notification
Center.
• Search indexing means that notes appear in Spotlight search results.
• Undo support means that users can instantly revert a change that they’ve made to
the note text.
• Links are detected in note text, and when users tap on them, an embedded web
browser will appear.
• Users can customize the behavior of the app via the Settings app.
• Images can have filters applied to them, such as grayscale and film effects.
• Text to speech means users can select text in the document and have their device
speak it.
You’ll notice that the iOS app has many more features than the Mac
app. Most of this is because Mac apps have quite a bit of stuff
already taken care of for them: if we double-click an image, it
launches in the Preview app, whereas an iOS app has to create its
own view controller and present it in an image view. iOS apps just
take more work.

Creating the iOS Project
Because it’s part of the same collection of products, the iOS app will be added as a
target attached to the original project. This allows it to share code with the Mac tar‐

Creating the iOS Project

|

181

get, and it keeps everything in one place. If you need a reminder on targets, flip back
to “The Xcode Interface” on page 12.
1. Open the File menu, and choose New→Target.
2. In the window that appears, select Application under the iOS heading. Select
Single-View Application, and then click Next (see Figure 7-7).
Xcode provides a number of different templates for iOS applications, but they’re
all fundamentally the same. The only difference between most of them is which
view controllers are set up ahead of time. We’re using a Single-View Application
because we’ll be building things out piece by piece, and don’t want a lot of boiler‐
plate that we either have to contrive a use for or delete.
The other templates are as they sound: Master-Detail provides the basics of an
app with a list down the left side and a detail view on the right side (like Mail),
Page-Based provides the basics of an app with multiple views scrolling across the
screen (like Weather), Tabbed provides the basics of a tab bar setup (like Music),
and Game provides an empty game view, using Apple’s SceneKit framework. As
you become familiar with the basics of iOS development, you’ll typically start
most of your apps from the Single-View template, as we do here, because you’ll
want to define what’s going on yourself, rather than rely on a template skeleton.

Figure 7-7. Creating the target

182

|

Chapter 7: Setting Up the iOS Notes App

3. Name the application Notes-iOS. Set Devices to Universal, and ensure that Use
Core Data is turned off (see Figure 7-8). Click Finish.

Core Data
Core Data is a database framework that comes bundled with iOS
and OS X. Core Data is a huge, powerful, complex system that’s
designed for working with objects in a database. It’s so huge, in fact,
that describing it usually fills entire books.
Core Data is very well suited for when the data your app needs to
work with is composed of multiple objects that all need to link
together. For the app in this book, we just need to save chunks of
raw text and attachments via file wrappers; however, if we were
forced to not use file wrappers, and had to store all of the compo‐
nents of the documents in a single file, Core Data might be a useful
way of dealing with it.
If you want to learn more about Core Data, we highly recommend
Marcus S. Zarra’s Core Data: Data Storage and Management for iOS,
OS X, and iCloud (Pragmatic Programmers); additionally, Apple’s
documentation is extremely good.

Figure 7-8. Finishing up the target
Creating the iOS Project

|

183

There will now be an additional scheme in the scheme selector for Notes-iOS, at the
top left of the window. Select it, and choose any simulator device you wish, so that
pressing ⌘R will launch the app (Figure 7-9).

Figure 7-9. Selecting the scheme
Finally, we’ll add the icon. All icons are available in the resources for this book; if you
don’t already have them, grab them by following the instructions in “Resources Used
in This Book” on page ix.
iOS icons come in multiple sizes, and each one is designed for a different purpose.
This is because of the diversity of devices that run iOS; in addition to iPhone and
iPad, there’s also the fact that different devices have different screen densities. Devices
with a Retina display (that is, the devices with high-resolution screens, such as all
iPhones after the iPhone 4 and all iPads after the iPad 3) need higher-resolution
icons; in addition, larger models of iPhones, such as the iPhone 6 Plus and iPhone 6S
Plus, have even higher resolutions.
To give your app an icon on iOS, you need multiple copies of the same image. Again,
we’ve provided these in the downloadable resources.
To add the icon, follow these steps:
1. Open the iOS app’s Assets.xcassets file, and select the AppIcon entry. You’ll see a
collection of slots—one for each of the different possible icon sizes.
2. Drag and drop the files from the downloadable resources into the slots. Use the
names of each file to work out which slot they belong in; for example,
Icon-60@2x.png belongs in the “60pt” category’s “@2x” slot.
If you accidentally add an image to the wrong icon category, you
can remove it by selecting the errant image slot and pressing
Delete.

When you’re done, the asset catalog should look like Figure 7-10. If you need a
reminder on asset catalogs, refer to “Adding the Icon” on page 102, when we added
the icon to the OS X app.

184

|

Chapter 7: Setting Up the iOS Notes App