LoginSignup
7
4

More than 5 years have passed since last update.

Swiftによるアプリ開発〜Storyboardを用いた最もシンプルな画面遷移の超テンプレ

Last updated at Posted at 2016-02-09

Swiftアプリ激初心者Noobゴミがお伝えするiOSアプリ開発のテンプレ講座

Storyboardを使った開発

Storyboardなしでも一応アプリの画面遷移を作ることはできるが、チームで開発するときはパット見わかりやすいStoryboardによる制作にすべきです。gitを用いるときにコンフリクトをうまく避けることができるなら、こっちを使ったほうが管理は捗るでしょう。

制作するもの

            |---buttonA--2nd view
1st view----
            |---buttonB--3rd view

こんな感じの画面遷移をするやつ

最初のViewController

1 最初名前変える

最初の"ViewController"は名前を変更しておく。例えば"TopViewController" "FirstViewController"など

2 .xibファイルも名前を変えておく

"FirstView"などにしておくと良いでしょう。

3 viewDidLoad(viewを読み込んだ時の動作を定義)

FirstViewControllerのviewDidLoadに次のようなコードをぶち込む

        super.viewDidLoad()
        let view = UINib(nibName: "FirstView", bundle: nil).instantiateWithOwner(self, options: nil).first  as? UIView;
        self.view = view;
        // Do any additional setup after loading the view, typically from a nib.

そうすると、FirstViewControllerは自身のview(self.view)に、FirstViewをアタッチする。

4 .xibファイルのオーナークラスを登録

FirstView.xibのPlaceholders-File's Ownerを選択。XCode右上の新聞みたいなアイコンをクリックするとCustomClassを登録できるので、このviewを管理するControllerを登録しよう。つまり、FirstViewControllerと入力すれば良い。

5 Launch

Cmd+Rで動作確認。やったね!

第二・第三のViewController

Main.storyboardにViewController追加

storyboardにSecondViewController ThirdViewControllerを追加しよう。
右下の検索窓みたいなとこにViewControllerを検索。ドラッグ・アンド・ドロップ。

あとは同じ

上の小節の1-5を、SecondViewController、ThirdViewControllerとして同じことを繰り返す。プロジェクトにViewControllerを追加するときは一緒に.xibを生成してくれるオプションを適用して、.xibはリネームしてしまう。そうしたら4の手順を省略できると思う。

Segue(せぐえ)を使った画面遷移

参考1:

seguire (伊・動・第三活用)「続く」、etc

活用(現
io  seguo
tu  segui
lui, lei, Lei   segue
noi seguiamo
voi seguite
loro, Loro  seguono

不定詞 seguire

らしい。

参考2:
Qiita
Qiita
しずえ

1 Button配置

FirstViewにてきとーにUIButtonを2つ配置。ButtonA ButtonBとか。

2 Action!

FirstViewにて右上の丸2つみたいなアイコンをクリックすると、FirstViewControllerのswiftコードが同時に表示される。
ButtonAを、Ctrlを押しながらドラッグしてSwiftコードに持って行く。FirstViewControllerクラス内のメソッドになるように。
オプションが現れるので、ConnectionはActionにして、Nameは例えばbuttonAClickedとかにしておく。Typeは一応UIButtonにしておこう。
ButtonBに対しても同じようにする。

3 ソースの中でSeguire!

追加されたbuttonAClickedに以下のコードをぶち込む。

performSegueWithIdentifier("buttonA", sender: self)

4 Storyboardの中でSeguire!

Main.StoryboardのFirstViewController〜ThirdViewControllerのCustomClassに対応するViewControllerが追加されることを確認しよう。
FirstViewControllerからCtrl+ドラッグでSecondViewCtonrollerにドラッグすると矢印が伸びる。
矢印をクリックして、画面右側の三角つまみみたいなとこを選択すると、Identifierが登録できるので、これを3のソースで書いたperformSegueWithIdentifierで登録したidentifierと同じ名前にする。今回はbuttonA。

Thirdに対しても同じく。identifierはbuttonB。

こんなかんじかと思います。

画面遷移の時に呼ばれるメソッドがどれかもよくわかったと思う。データ登録や削除・様々な処理は、対応するメソッドの中に記述すれば、アクションをするごとに必要な処理を記述することができるということだとおもう。

ここらへんの処理が目隠しして3分でできるようになれば、いっちょまえのswiftアプリ開発者なのではないかと思うのでした。

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4