デザインにもこだわったUIの事始め (Episode1)
3 likes1,202 views
第7回Swiftビギナーズ勉強会の発表資料になります。 今回はデザインに注目したSwift開発をする際のポイントについての発表になります。ご興味にある方はご覧いただければ嬉しいです。
デザインにもこだわったUIの事始め (Episode1)
- 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
- 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