第7回Swiftビギナーズ勉強会の発表資料になります。 今回はデザインに注目したSwift開発をする際のポイントについての発表になります。ご興味にある方はご覧いただければ嬉しいです。

1. デザインにもこだわったUIの事始め
∼ 今人気のアプリであるようなUIの一部分を真似っこしてみる ∼

2. 自己紹介
✦
今までの仕事履歴（本業）
石川県金沢市生まれ
本業はサーバーサイドのプログラマ ※Rails＆PHP使い
26歳∼30歳： Ruby / PHPのプログラマ
23歳∼25歳：Webデザイナー兼ディレクター
Objective-C歴：4ヶ月くらい Swift歴：60日程度
趣味：シルバーアクセサリー集め・スイーツ作り・開発
女子向けと食べ物系コンテンツのお仕事が多い…
http://www.coffre.me/
シンプルにつけられる家計簿アプリ「Coffre」の作者
✦
酒井文也（さかい ふみや）
東京（大塚）住まいの30歳

3. デザインが素敵なアプリたち（1）
Locari TRILL Fril ciel
(ここがポイント)
①UITableView・UICollectionViewのセルと写真のサイズを合わせる
②スワイプやボタンの動きに連動してナビゲーション・コンテンツが動く
✦
キュレーションメディア系のアプリを中心にPickup
例1）女性向けのアプリ

4. デザインが素敵なアプリたち（2）
例2）その他のメディア系アプリ
cakes Antenna WEAR macaroni
(ここがポイント)
①UITableView・UICollectionViewのセルと写真のサイズを合わせる
②スワイプやボタンの動きに連動してナビゲーション・コンテンツが動く
✦
キュレーションメディア系のアプリを中心にPickup

5. デザイニックなUIを作る時の誘惑
✦
便利そうなライブラリも沢山公開されている
・バージョンアップに対応しているか？
意外とあるこんな落とし穴
・自分でカスタマイズはできそうか？
・デザイン適用してもくずれたりしない？
・想定しているものに近いライブラリなの？
勿論CocoaPodはものすごく便利です
などなど、アップデートや運用・設計の中
で問題や懸念が生じる可能性もあります。
今回のサンプル＆セッションの方針
おおまかな仕組みの概要を知った上でライブラリを
使った方が良いと個人的に思ったので、
「まずはできそうな所から真似してみよう」
その反面、
・Xib
・UITableView
・UICollectionView
・UIScrollview
・ContainerView
・GestureRecognizer
実現する上でのキーワードは
CocoaPod
活用で工数短縮！

6. では実際にサンプルを！
https://github.com/fumiyasac/variousViewsOfSwift/
✦
おおまかな仕様や動きについて
UITableView UICollectionView UIScrollView(縦)
スワイプ
または
上のボタン
スワイプ
または
上のボタン
スワイプ or ボタン押下
でアニメーション
セクションに応じて
読み込むセルが違う
縦のスクロール
(ここがポイント) ひとつのViewControllerだけで制御をしていない（ContainerViewを活用）
✦
こちらのURLからどうぞ！
セクションに応じて
読み込むセルが違う

7. Pointその1 : ContainerViewで分割
Container（入れ物）の名前の通り、ViewControllerの中にViewControllerを表示。
(ここがポイント) ViewControllerが分割できるので、処理がすっきりしやすい
✦
ContainerViewとは？
それぞれのViewControllerはそれぞれ独立して振舞うことができる
イメージとしてはWebサイトのiframe（インラインフレーム）のようなイメージ
Containerに
付随する
ViewController
Containerを
乗せた土台の
ViewController
UIを作る上でのメリット
1つのViewControllerに詰め込まなくて良い
→ デザインや振る舞いの違う画面を共存可能
遷移がわかりやすくなる
→ ViewControllerが追いかけやすくなる
ContainerViewとStoryBoardの相性抜群！
→ 作業や工数の短縮にも効果がありそう

8. Pointその1 : ContainerViewサンプル解説
EvianController VolvicController ContrexController
(ここがポイント) ・土台→Containerの制御 ・中身→各UIごとの処理や振る舞い と分けて記述する
✦
今回のサンプルのポイント
土台となるViewControllerの中に各ViewControllerを表示するContainerViewを配置。
土台となるViewController → 各Containerの表示切替処理（ボタン・スワイプ）を記述。
ViewController.swift
土台
中身
EvianController.swift
VolvicController.swift
ContrexController.swift
各Controllerの関係

9. Pointその2 : Xibを使ってセルをカスタム
アプリの画面を構成するパーツの配置や大きさなどを記録したファイル
(ここがポイント) UITableView・UICollectionViewは良く使う部分なので、是非とも覚えておくと良い
✦
Xibとは？
セルやパーツのひとかたまりに対しての調整がしやすくなる
セルひとかたまりを独立した1部品として、切り出して扱うイメージ
UIを作る上でのメリット
セル単位での再利用ができる
→ 同じようなレイアウトの場合は工数短縮になる
swiftファイルとXibを1セットでセルを作る
→ 工夫次第でデコレーションも多彩にできる
StoryBoard上も複雑にしなくて済む
→ 部品として切り出して分割できる
UITableViewの
セルに対応する
UICollectionViewの
セルに対応する
構成はこんな感じです

10. Pointその2 : Xib部分のサンプル解説
(ここがポイント) セクションの番号によって値や読み込むXibファイルを変えてあげる
✦
今回のサンプルのポイント
sectionごとに読み込むUITableView・UICollectionViewのXibを変えてあげる
UITableView indexPath.section==0
の時に読み込むセル
UICollectionView
indexPath.section==1
の時に読み込むセル
indexPath.section==0
の時に読み込むセル
indexPath.section==1
の時に読み込むセル
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
→ セクション（section）の値で分岐をする
→ セクション（indexPath.section）の値で分岐をする
※CollectionView の場合はRow が Itemに変わる例）UITableViewの場合
UITableViewと
UICollectionViewは似ている

11. ✦
ContainerViewで今回の参考部分
今回のサンプルで参考にしたもの
✦
UITableView, UICollectionViewでの今回の参考部分
Qiitaにあったノウハウ
1. Storyboardの"ContainerView"を使ってみる
http://qiita.com/paming/items/d8a29d644c994ce60d6a
2. StoryboardとContainerを多用した開発のメリットとデメリット
http://qiita.com/reikubonaga/items/2e88ddda1ac0868a2729
Think Big Act Local via @himara2 さんの記事
SmartNews風のレイアウトをInterface Builderを使ってつくる
http://himaratsu.hatenablog.com/entry/objc/smartnews
Qiitaにあったノウハウ
Storyboard上のUITableViewCellをxibで作る場合はregisterNib:forCellReuseIdentifier:メソッドが便利
http://qiita.com/yimajo/items/81a1331fea2592821061

12. ✦
1つのViewControllerに収まりきらないときはContainerViewを活用
※今後ともデザインにこだわったUIに関するトピック等はグループ等でも共有していきます。
✦
まずはUIKitの特性を知った上で実現できるかをやってみる
セッションのまとめ
✦
ファイルが多くなることが多いのでXibの設定もれ等には注意
✦
GestureRecognizerでの画面切り替えやアニメーションは他のアプリの
タイミングを参考にすると良い
✦
AutoLayoutも合わせて使う場合は難易度が上がるので注意が必要
✦
実現する上でのキーワード「Xib・UITableView・UICollectionView・
UIScrollview・ContainerView・GestureRecognizer」に関する理解
ご静聴ありがとうございました！