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

自己紹介

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

石川県金沢市生まれ

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

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

Objective-C歴：7ヶ月くらい Swift歴：半年弱

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

女子向けと食べ物系・エンタメ関連のお仕事が多い…

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

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

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

こんな格好してますが…エンジニアです

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

SHOPLIST RiLi.tokyo Retty minne

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

✦ 最近また見つけた良さげなアプリ例）女性向け・グルメ・通販などのアプリ

今回のサンプルの概要と個人的なポイント✦ デザインや動きもアプリをつくる際の重要な要素

①画面をスクロールさせて別画面を表示個人的な思いとか

②スクロールに伴ってラベルの位置変更③実際にありそうなアプリの形をつくる

という方針でできないか？上記を組み合わせることで

デザインにこだわったUIの事始めの知識 を活用して実際のアプリに近い物を！

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

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

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

CocoaPodsなしでも、

・Xib ・UITableView ・UICollectionView

・UIScrollview ・ContainerView ・GestureRecognizer

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

・UIScrollView

UIへのこだわりは アプリでの重要ポイント

・UITableView

ライブラリに近いUIを実現してみる

・ContainerView

では実際にサンプルを！

https://github.com/fumiyasac/goCoworkingSpaceReport

✦ おおまかな仕様や動きについて(全体)

Profile Main Views

スワイプ

(ここがポイント) 左右のジェスチャーに対応してTableView表示 + Profile部分を別Container表示

✦ こちらのURLからどうぞ！（実際に作成途中のもの）

Display Profile

Title Label Changing

Toggle Cells

Can Slide TableView

スワイプ

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になる。 → 中身の実態処理はこっち記載

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

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

テーブル ビュー

バナー用

ス ク ロ ー ル ビュー

この状態はスクロール ビューの操作は不可 （ボタンをかぶせた）

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

✦ 以前にも「デザインにこだわった…」的なスライドをつくりました

そのほかに取り入れた物など

✦ このサンプルのゆくすえ

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の活用なども紹介しています。

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

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

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

セッションのまとめ

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

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

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

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

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

✦ 状態管理や汎用性のある関数はenum, structを活用してまとめる

✦ つなぎ目の処理の部分はデザインする上で細かなケアが必要