Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

デザインにもこだわったUiの事始め3

964 views

Published on

(概要)
第1回Shibuya.swiftでの発表資料になります。
UIに関するサンプルをSwift2.0で新たに作成しましたので、UIScrollViewやContainerView・UITableViewを活用してライブラリに近しいようなサンプルを自作した際のポイントをまとめました。

(サンプルはこちら)
https://github.com/fumiyasac/goCoworkingSpaceReport/
※こちらは実際のアプリにするべく実装を行っています!

Published in: Technology
  • Be the first to comment

デザインにもこだわったUiの事始め3

  1. 1. デザインにもこだわったUIの事始め(3) ∼ 今人気のアプリであるようなUIの一部分を真似っこしてみる ∼
  2. 2. 自己紹介 ✦ 今までの仕事履歴(本業) 石川県金沢市生まれ 本業はサーバーサイドのプログラマ ※Rails&PHP使い 26歳∼31歳:Ruby / PHPのプログラマ 23歳∼25歳:Webデザイナー兼ディレクター Objective-C歴:7ヶ月くらい Swift歴:半年弱 趣味:シルバーアクセサリー集め・スイーツ作り・開発 女子向けと食べ物系・エンタメ関連のお仕事が多い… http://www.coffre.me/ シンプルにつけられる家計簿アプリ「Coffre」の作者 ✦ 酒井文也(さかい ふみや) 東京(大塚)住まいの31歳 こんな格好してますが…エンジニアです
  3. 3. デザインが素敵なアプリたち(追加) SHOPLIST RiLi.tokyo Retty minne  (ここがポイント) ①UITableView・UICollectionViewのセルと写真のサイズを合わせる ②スワイプやボタンの動きに連動してナビゲーション・コンテンツが動く ✦ 最近また見つけた良さげなアプリ 例)女性向け・グルメ・通販などのアプリ
  4. 4. 今回のサンプルの概要と個人的なポイント ✦ デザインや動きもアプリをつくる際の重要な要素 ①画面をスクロールさせて別画面を表示 個人的な思いとか ②スクロールに伴ってラベルの位置変更 ③実際にありそうなアプリの形をつくる という方針でできないか? 上記を組み合わせることで デザインにこだわったUIの事始めの知識 を活用して実際のアプリに近い物を! 今回のサンプル&セッションの方針 おおまかな仕組みの概要を知った上でライブラリを 使った方が良いと個人的に思ったので、 「まずはできそうな所から真似してみよう」 CocoaPodsなしでも、 ・Xib ・UITableView ・UICollectionView ・UIScrollview ・ContainerView ・GestureRecognizer 実現する上でのキーワードは ・UIScrollView UIへのこだわりは アプリでの重要ポイント ・UITableView ライブラリに近いUIを実現してみる ・ContainerView
  5. 5. では実際にサンプルを! https://github.com/fumiyasac/goCoworkingSpaceReport ✦ おおまかな仕様や動きについて(全体) Profile Main Views スワイプ (ここがポイント) 左右のジェスチャーに対応してTableView表示 + Profile部分を別Container表示 ✦ こちらのURLからどうぞ!(実際に作成途中のもの) Display Profile Title Label Changing Toggle Cells Can Slide TableView スワイプ
  6. 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. 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. 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. 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. 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. 11. ✦ 1つのViewControllerに収まりきらないときはContainerViewを活用 ※今後ともデザインにこだわったUIに関するトピック等はグループ等でも共有していきます。 ✦ まずはUIKitの特性を知った上で実現できるかをやってみる セッションのまとめ ✦ ファイルが多くなることが多いのでXibの設定もれ等には注意 ✦ GestureRecognizerでの画面切り替えやアニメーションは他のアプリのタイミ ングを参考にすると良い ✦ AutoLayoutも合わせて使う場合は難易度が上がるので注意が必要 ✦ 実現する上でのキーワード「Xib・UITableView・UICollectionView・ UIScrollview・ContainerView・GestureRecognizer」に関する理解 ご静聴ありがとうございました! ✦ 状態管理や汎用性のある関数はenum, structを活用してまとめる ✦ つなぎ目の処理の部分はデザインする上で細かなケアが必要

×