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

自己紹介

✦ 今までの仕事履歴（本業）

石川県金沢市生まれ

本業はサーバーサイドのプログラマ ※Rails＆PHP使い

26歳～30歳： Ruby / PHPのプログラマ 23歳～25歳：Webデザイナー兼ディレクター

Objective-C歴：4ヶ月くらい Swift歴：60日程度

趣味：シルバーアクセサリー集め・スイーツ作り・開発

女子向けと食べ物系コンテンツのお仕事が多い…

http://www.coffre.me/シンプルにつけられる家計簿アプリ「Coffre」の作者

✦ 酒井文也（さかい ふみや）

東京（大塚）住まいの30歳

デザインが素敵なアプリたち（1）

Locari TRILL Fril ciel

　(ここがポイント) ①UITableView・UICollectionViewのセルと写真のサイズを合わせる ②スワイプやボタンの動きに連動してナビゲーション・コンテンツが動く

✦ キュレーションメディア系のアプリを中心にPickup例1）女性向けのアプリ

デザインが素敵なアプリたち（2）

例2）その他のメディア系アプリ

cakes Antenna WEAR macaroni

　(ここがポイント) ①UITableView・UICollectionViewのセルと写真のサイズを合わせる ②スワイプやボタンの動きに連動してナビゲーション・コンテンツが動く

✦ キュレーションメディア系のアプリを中心にPickup

デザイニックなUIを作る時の誘惑✦ 便利そうなライブラリも沢山公開されている

・バージョンアップに対応しているか？意外とあるこんな落とし穴

・自分でカスタマイズはできそうか？・デザイン適用してもくずれたりしない？・想定しているものに近いライブラリなの？

勿論CocoaPodはものすごく便利ですなどなど、アップデートや運用・設計の中 で問題や懸念が生じる可能性もあります。

今回のサンプル＆セッションの方針

おおまかな仕組みの概要を知った上でライブラリを 使った方が良いと個人的に思ったので、

「まずはできそうな所から真似してみよう」

その反面、

・Xib ・UITableView ・UICollectionView

・UIScrollview ・ContainerView ・GestureRecognizer

実現する上でのキーワードは

CocoaPod 活用で工数短縮！

では実際にサンプルを！

https://github.com/fumiyasac/variousViewsOfSwift/

✦ おおまかな仕様や動きについて

UITableView UICollectionView UIScrollView(縦)

スワイプ または 上のボタン

スワイプ または 上のボタン

スワイプ or ボタン押下 でアニメーション

セクションに応じて 読み込むセルが違う

縦のスクロール

(ここがポイント) ひとつのViewControllerだけで制御をしていない（ContainerViewを活用）

✦ こちらのURLからどうぞ！

セクションに応じて 読み込むセルが違う

Pointその1 : ContainerViewで分割

Container（入れ物）の名前の通り、ViewControllerの中にViewControllerを表示。

(ここがポイント) ViewControllerが分割できるので、処理がすっきりしやすい

✦ ContainerViewとは？

それぞれのViewControllerはそれぞれ独立して振舞うことができるイメージとしてはWebサイトのiframe（インラインフレーム）のようなイメージ

Containerに 付随する

ViewController

Containerを 乗せた土台の ViewController

UIを作る上でのメリット

1つのViewControllerに詰め込まなくて良い→ デザインや振る舞いの違う画面を共存可能

遷移がわかりやすくなる→ ViewControllerが追いかけやすくなる

ContainerViewとStoryBoardの相性抜群！→ 作業や工数の短縮にも効果がありそう

Pointその1 : ContainerViewサンプル解説

EvianController VolvicController ContrexController

(ここがポイント) ・土台→Containerの制御　・中身→各UIごとの処理や振る舞い　と分けて記述する

✦ 今回のサンプルのポイント土台となるViewControllerの中に各ViewControllerを表示するContainerViewを配置。土台となるViewController → 各Containerの表示切替処理（ボタン・スワイプ）を記述。

ViewController.swift

土台

中身

EvianController.swift

VolvicController.swift

ContrexController.swift

各Controllerの関係

Pointその2 : Xibを使ってセルをカスタム

アプリの画面を構成するパーツの配置や大きさなどを記録したファイル

(ここがポイント) UITableView・UICollectionViewは良く使う部分なので、是非とも覚えておくと良い

✦ Xibとは？

セルやパーツのひとかたまりに対しての調整がしやすくなるセルひとかたまりを独立した1部品として、切り出して扱うイメージ

UIを作る上でのメリット

セル単位での再利用ができる→ 同じようなレイアウトの場合は工数短縮になる

swiftファイルとXibを1セットでセルを作る→ 工夫次第でデコレーションも多彩にできる

StoryBoard上も複雑にしなくて済む→ 部品として切り出して分割できる

UITableViewの セルに対応する

UICollectionViewの セルに対応する

構成はこんな感じです

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) -> UITableViewCellfunc tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

→ セクション（section）の値で分岐をする

→ セクション（indexPath.section）の値で分岐をする

※CollectionView の場合はRow が Itemに変わる例）UITableViewの場合UITableViewと

UICollectionViewは似ている

✦ 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

✦ 1つのViewControllerに収まりきらないときはContainerViewを活用

※今後ともデザインにこだわったUIに関するトピック等はグループ等でも共有していきます。

✦ まずはUIKitの特性を知った上で実現できるかをやってみる

セッションのまとめ

✦ ファイルが多くなることが多いのでXibの設定もれ等には注意

✦ GestureRecognizerでの画面切り替えやアニメーションは他のアプリのタイミングを参考にすると良い

✦ AutoLayoutも合わせて使う場合は難易度が上がるので注意が必要

✦ 実現する上でのキーワード「Xib・UITableView・UICollectionView・UIScrollview・ContainerView・GestureRecognizer」に関する理解

ご静聴ありがとうございました！