Start Developing iOS Apps Today をやってみる その3

Tutorial: Storyboards

Adopt Auto Layout


なので、storyboadでテキストフィールドからテキストフィールドの外に向かって真上にctrlドラッグして"Top Space to Top Layout Guide"を選ぶ

これはtext field と the navigation barの位置の調整のため




Creating a Second Scene

table viewを加える

Open the Object library in the utility area. (To open the library with a menu command, choose View > Utilities > Show Object Library.)

Object Libraryを開く

table view controllerをto-do-item の左にドラッグすると以下のようになる

table view controller を選び "Attributes inspector" の "Is Initial View Controller"にチェックを付けて起動時に使われるようにする

矢印を table view controller の方にドラッグしても同じことができる

Display Static Content in a Table View

table view を選択し、Static Cells を選んで、cell 1つずつを Basicにするとタイトルが入れられるようになる あとはコピペ or Optionドラッグでコピーしていくと以下の画像のようになる

  1. In the outline view for your interface, select Table View under Table View Controller.
  2. With the table view selected, open the Attributes inspector image:
  3. In the Attributes inspector, choose Static Cells from the pop-up menu next to the Content option. Three empty table view cells appear in your table view.
  4. In the outline view or on the canvas, select the top cell.
  5. In the Attributes inspector, choose Basic from the pop-up menu next to the Style option. The Basic style includes a label, so Xcode creates a label with the text “Title” in the table cell.
  6. In the outline view or on the canvas, select the label.
  7. In the Attributes inspector, change the text of the label from “Title” to “Mow the Lawn.” For the change to take effect, press Enter or click outside the utility area. Alternatively, you can edit a label by double-clicking it and editing the text directly.
  8. Repeat steps 4–7 for the other cells, giving them text for other likely to-do items.
  9. Create enough cells so that the items more than fill the screen. You can create new cells by copying and pasting them or by holding down the Option key when dragging a cell.

Add a Segue to Navigate Forward

2つのview controllerをsegueで繋ぐ

segueを作る前にto-do list table view controller を navigation controller上でラップする

  1. In the outline view, select Table View Controller. With the view controller selected, choose Editor > Embed In > Navigation Controller.

これでnavigation barが追加される

次にAttributes inspectorでTitle を "My To-Do List" に変え、Object libraryから"Bar Button Item"を右上にドラッグし、Attributes inspectorのIdentifierを"Add"に変えれば以下のようになる

To configure the Add button

+ を選んでadd-to-do-item view controller にCtrlドラッグする segueのアクションのショートカットが出てくるのでpushを選ぶ これでsegueが追加され、add-to-do-item view controllerにnavigation barも追加された

この状態だとnavigation bar が追加されたためにAuto Layout のwarningが出ている


Start Developing iOS Apps Today をやってみる その2

Designing a User Interface

Use Auto Layout to Position Views

When you start positioning views in your storyboard, you need to consider a variety of situations. iOS apps run on a number of different devices, with various screen sizes, orientations, and languages.

To help you use views to create a versatile interface, Xcode offers a tool called Auto Layout. Auto Layout is a system for expressing relationships between views in your app’s user interface.

スクリーンサイズ、向き、言語の違いを考えないといけないが、Auto Layoutがよろしくやってくれる

Defining the Interaction

View Controllers

After you’ve built a basic view hierarchy, your next step is to control the visual elements and respond to user input. In an iOS app, you use a view controller (UIViewController) to manage a content view with its hierarchy of subviews.

viewの階層を作ったらview controllerを使ってviewを扱う

This usually means writing a custom UIViewController subclass for each content view hierarchy. If your app has multiple content views, you use a different custom view controller class for each content view.

content viewの数だけview controllerを作る


An action is a piece of code that’s linked to some kind of event that can occur in your app. When that event takes place, the code gets executed. You can define an action to accomplish anything from manipulating a piece of data to updating the user interface.


You define an action by creating and implementing a method with an IBAction return type and a sender parameter.

- (IBAction)restoreDefaults:(id)sender;

The sender parameter points to the object that was responsible for triggering the action. The IBAction return type is a special keyword; it’s like the void keyword, but it indicates that the method is an action that you can connect to from your storyboard in Interface Builder (which is why the keyword has the IB prefix). You’ll learn more about how to link an IBAction action to an element in your storyboard in Tutorial: Storyboards.

senderというパラメータを受け取ってIBActionを返すmethodを実装する senderはactionをtriggerしたオブジェクト IBActionはstroyboardと繋げるためのspecial keyword


Outlets provide a way to reference objects from your interface—the objects you added to your storyboard—from source code files. You create an outlet by Control-dragging from a particular object in your storyboard to a view controller file.


Navigation Controllers

If your app has more than one content view hierarchy, you need to be able to transition between them. For this, you’ll use a specialized type of view controller: a navigation controller (UINavigationController).


The set of view controllers managed by a particular navigation controller is called its navigation stack. The navigation stack is a last-in, first-out collection of custom view controller objects. The first item added to the stack becomes the root view controller and is never popped off the stack. Other view controllers can be pushed on or popped off the navigation stack.

複数のview controllerはnavigation stackと呼ばれるもので管理される navigation stackはlast-in, first-outの集合 はじめのアイテムはroot view controllerで、これはstackからpopされない 他のcontrollerはnavigation stack にpushまたはpopできる

Use Storyboards to Define Navigation

In the first tutorial, the storyboard you worked with had one scene. In most apps, a storyboard is composed of a sequence of scenes, each of which represents a view controller and its view hierarchy. Scenes are connected by segues, which represent a transition between two view controllers: the source and the destination.


storyboardで複数のview controllerを表現吸う時にはsegueを使う

There are several types of segues you can create:

  • Push. A push segue adds the destination view controller to the navigation stack. Push segues may only be used when the source view controller is connected to a navigation controller.
  • Modal. A modal segue is simply one view controller presenting another controller modally, requiring a user to perform some operation on the presented controller before returning to the main flow of the app. A modal view controller isn’t added to a navigation stack; instead, it’s generally considered to be a child of the presenting view controller. The presenting view controller is responsible for dismissing the modal view controller it created and presented.
  • Custom. You can define your own custom transition by subclassing UIStoryboardSegue.
  • Unwind. An unwind segue moves backward through one or more segues to return the user to an existing instance of a view controller. You use unwind segues to implement reverse navigation.



次回はTutorial: Storyboardsから

Start Developing iOS Apps Today をやってみる その1

#rebuildfm ep. 39 聴いてStart Developing iOS Apps Todayというto-do listのiOS アプリのチュートリアルをやることにしたのでメモ。

Tutorial: Basics


画像の通りサクサクやっていけばHello, World!が出せる

App Development Process


Defining the Concept


Here are some key questions to consider when arriving at a concept:

Who is your audience? Your app content and experience will differ depending on whether you’re writing a children’s game, a to-do list app, or even a test app for your own learning.

What is the purpose of your app? It’s important for an app to have a clearly defined purpose. Part of defining the purpose is understanding what one thing will motivate users to use your app.

What problem is your app trying to solve? An app should solve a single problem well instead of trying to offer solutions to multiple distinct problems. If you find that your app is trying to solve unrelated problems, you might consider writing multiple apps.

What content will your app incorporate? Consider what type of content your app will present to users and how they’ll interact with it. Design the user interface to complement the type of content that’s presented in the app.

An app concept doesn’t have to be completely polished or finished when you start developing your app. Still, it helps to have an idea of where you’re going and what you need to do to get there.

Implementing the Behavior

Classes Are Blueprints for Objects

allocate と initializeの目的 メモリを用意して、初期化

You make an object by creating an instance of a particular class. You do this by allocating it and initializing it with acceptable default values. When you allocate an object, you set aside enough memory for the object and set all instance variables to zero. Initialization sets an object’s initial state—that is, its instance variables and properties—to reasonable values and then returns the object. The purpose of initialization is to return a usable object. You need to both allocate and initialize an object to be able to use it.

Objects Communicate Through Messages


If you have an object somePerson of class XYZPerson, you can send it the sayHello message like this:

[somePerson sayHello];

The reference on the left, somePerson, is the receiver of the message. The message on the right, sayHello, is the name of the method to call on that receiver. In other words, when the above line of code is executed, somePerson will be sent the sayHello message.



Designing a User Interface

The View Hierarchy

Views not only display themselves onscreen and react to user input, they also serve as containers for other views.


At the top of the view hierarchy is the window object. Represented by an instance of the UIWindow class, a window serves as the basic container into which you can add your view objects for display onscreen.



次回は「Building an Interface Using Views

Hello, world!