（概要） 第1回Shibuya.swiftでの発表資料になります。 UIに関するサンプルをSwift2.0で新たに作成しましたので、UIScrollViewやContainerView・UITableViewを活用してライブラリに近しいようなサンプルを自作した際のポイントをまとめました。 （サンプルはこちら） https://github.com/fumiyasac/goCoworkingSpaceReport/ ※こちらは実際のアプリにするべく実装を行っています！

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

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

3. デザインが素敵なアプリたち（追加）
SHOPLIST RiLi.tokyo Retty minne
(ここがポイント)
①UITableView・UICollectionViewのセルと写真のサイズを合わせる
②スワイプやボタンの動きに連動してナビゲーション・コンテンツが動く
✦
最近また見つけた良さげなアプリ
例）女性向け・グルメ・通販などのアプリ

4. 今回のサンプルの概要と個人的なポイント
✦
デザインや動きもアプリをつくる際の重要な要素
①画面をスクロールさせて別画面を表示
個人的な思いとか
②スクロールに伴ってラベルの位置変更
③実際にありそうなアプリの形をつくる
という方針でできないか？
上記を組み合わせることで
デザインにこだわったUIの事始めの知識
を活用して実際のアプリに近い物を！
今回のサンプル＆セッションの方針
おおまかな仕組みの概要を知った上でライブラリを
使った方が良いと個人的に思ったので、
「まずはできそうな所から真似してみよう」
CocoaPodsなしでも、
・Xib
・UITableView
・UICollectionView
・UIScrollview
・ContainerView
・GestureRecognizer
実現する上でのキーワードは
・UIScrollView
UIへのこだわりは
アプリでの重要ポイント
・UITableView
ライブラリに近いUIを実現してみる
・ContainerView

5. では実際にサンプルを！
https://github.com/fumiyasac/goCoworkingSpaceReport
✦
おおまかな仕様や動きについて(全体)
Profile Main Views
スワイプ
(ここがポイント) 左右のジェスチャーに対応してTableView表示 + Profile部分を別Container表示
✦
こちらのURLからどうぞ！（実際に作成途中のもの）
Display Profile
Title Label Changing
Toggle Cells
Can Slide TableView
スワイプ

6. Pointその1 : ContainerViewの配置と処理
ScrollView内にContainerViewを配置してスワイプで中のContainerを動かす
(ここがポイント) UIScrollViewの中にContainerを配置してスライドして切り替える処理をつくる
✦
ScrollView内にContainerViewを配置
①表示したいViewControllerに各Containerを配置
②表示したいViewControllerにUIScrollViewを配置
③UIScrollView内に各Containerを配置
・ScrollViewのContentSizeを配置したContainer
数に応じて決定
作り方の流れ
UIScrollViewのスライドショーサンプルの応用
Container
1
UIScrollView
ContentSize
Container
2
Container
3
※それぞれ別のViewControllerが各Containerに入る
ので1つのControllerが重たくならずにすむ
④UIScrollViewのプロパティを決めてあげる
Container内に表示されるものは、標準では embed
Segue で紐付いたViewControllerになる。
→ 中身の実態処理はこっち記載

7. Pointその2 : スライド量で位置を判定
Containerが入ったスクロールビューとタブ型ボタンの配置部分の連動処理
(ここがポイント) スクロールビューとボタンのハイライトの連動はUIScrollViewDelegateを活用する
✦
タブ型のボタンの配置＆スクロールとの連動部分について
デフォルト
スライド量に伴ってコンテンツの位置を決める
・changeStatusWhenScroll(page)
//スクロールを検知した際に行われる処理
func scrollViewDidScroll(scrollview: UIScrollView) {
//画像の位置から画像の番号を判別する
let pageWidth: CGFloat = (CGFloat)
(self.innerContainerScrollView.frame.size.width)
let fractionalPage: Double =
Double(self.innerContainerScrollView.contentOffset.x / pageWidth)
let page: Int = Int(lround(fractionalPage))
//ページ判定を行う（上のラベル上に配置したボタンに関しての判定）
self.changeStatusWhenScroll(page)
}
該当コード部
※上のボタンがさらに多い場合は上のScrollView
のScrollView
ScrollViewDidScroll(scrollview: UIScrollView)を活用
してScrollViewの中身の位置を決定する処理をする。
ボタンのハイライトも変わる
Swipe or Button Tap

8. Pointその3 : ContainerViewをさらに活用
UIViewControllerの中をできるだけシンプルにする
(ここがポイント) UITableViewやContainerをうまく工夫するだけでなかなか洗練された？UIに大変身
✦
Containerを使って機能ごとにUIViewControllerを分割する
Profile表示 デフォルト
Scroll
Per 5sec
ContainerView（BannerController）
左側は1つのContainer
（ProfileController）
※TableViewのHeaderを
カスタマイズして見た目
をつくっています
作り方の流れ
（あなたのプロフィールの部分）
Profile部分のContainerViewの中にさらにバナー用の
ContainerView（5秒ごとの自動スクロール）が配置
Open
Profile Container
テーブル
ビュー
バナー用
ス
ク
ロ
ー
ル
ビュー
この状態はスクロール
ビューの操作は不可
（ボタンをかぶせた）

9. Pointその4 : ステータス・配色等の管理
複雑な処理が多くなると見通しが悪くなりがちなのでできるだけどこかにまとめる
(ここがポイント) UITableView・UICollectionViewは良く使う部分なので、是非とも覚えておくと良い
✦
できるだけenumやstructを活用する
カラー定義の部分の例
※処理のポイント
よく使う処理や定数たちをあらか
じめまとめると幸せになれるはず
①よく使う色
②スクロールビューの状態
enumで定義
③開閉状態
④タイトル文言等
①カラー変換
②バリデーション
structで定義
③デバイス情報
enum ColorStatus: String {
case Red = "cc0000"
case Green = "339933"
case Orange = "ff9900"
..(以下省略)
}
struct ColorDefinition {
//16進数のカラーコードをiOSの設定に変換するメソッド
static func colorWithHexString (hex:String) -> UIColor {
//受け取ったWebカラーコードの文字列をUIColorの値へ変換
..(以下省略)
return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue:
CGFloat(b) / 255.0, alpha: CGFloat(1))
}
}
ColorStatus.swift
ColorDefinition.swift
ColorDefinition.colorWithHexString(ColorStatus.White.rawValue)
あとはこんな感じで呼び出せばOK

10. ✦
以前にも「デザインにこだわった…」的なスライドをつくりました
そのほかに取り入れた物など
✦
このサンプルのゆくすえ
https://speakerdeck.com/fumiyasac/dezainnimokodawatutauifalseshi-shi-me
・実際にちゃんとアプリにして公開する（CameraやRealmなども取り入れたい）
・サーバーサイドともしっかりと連携させたアプリ（Parse.comやLaravelも？）
■ デザインにもこだわったUIの事始め
・UITableViewやUICollectionViewのカスタムセルを使った際の実装
・Watch OSへの対応（リベンジしたい！）
https://speakerdeck.com/fumiyasac/dezainnimokodawatutauifalseshi-shi-me-2
■ デザインにもこだわったUIの事始め（2）
・ContainerViewを活用したUI
・テーブルビューの開閉処理
※その他にもGestureRecognizerの活用なども紹介しています。

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