Submit Search
Upload
デザインにもこだわったUIの事始め (Episode1)
•
3 likes
•
1,198 views
Fumiya Sakai
Follow
第7回Swiftビギナーズ勉強会の発表資料になります。 今回はデザインに注目したSwift開発をする際のポイントについての発表になります。ご興味にある方はご覧いただければ嬉しいです。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 12
Download now
Download to read offline
Recommended
Container view活用術とポイントになる部分
Container view活用術とポイントになる部分
Fumiya Sakai
Parse.comを使ってみた感想とまとめ
Parse.comを使ってみた感想とまとめ
Fumiya Sakai
自分のライブラリを1年運用をして見た振り返りと知見
自分のライブラリを1年運用をして見た振り返りと知見
Fumiya Sakai
NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた
NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた
Fumiya Sakai
指の動きや遷移時等のアニメーションを生かしたUIのサンプル解説
指の動きや遷移時等のアニメーションを生かしたUIのサンプル解説
Fumiya Sakai
Swiftビギナーズ勉強会 第1回 @Co-Edo
Swiftビギナーズ勉強会 第1回 @Co-Edo
Megumi Otani(Czenhe)
あのアプリの動きをUIKitのみでDIYしてみる(part2)
あのアプリの動きをUIKitのみでDIYしてみる(part2)
Fumiya Sakai
デザイナーの私と サービスをつくる私
デザイナーの私と サービスをつくる私
Shizuka Yamada
Recommended
Container view活用術とポイントになる部分
Container view活用術とポイントになる部分
Fumiya Sakai
Parse.comを使ってみた感想とまとめ
Parse.comを使ってみた感想とまとめ
Fumiya Sakai
自分のライブラリを1年運用をして見た振り返りと知見
自分のライブラリを1年運用をして見た振り返りと知見
Fumiya Sakai
NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた
NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた
Fumiya Sakai
指の動きや遷移時等のアニメーションを生かしたUIのサンプル解説
指の動きや遷移時等のアニメーションを生かしたUIのサンプル解説
Fumiya Sakai
Swiftビギナーズ勉強会 第1回 @Co-Edo
Swiftビギナーズ勉強会 第1回 @Co-Edo
Megumi Otani(Czenhe)
あのアプリの動きをUIKitのみでDIYしてみる(part2)
あのアプリの動きをUIKitのみでDIYしてみる(part2)
Fumiya Sakai
デザイナーの私と サービスをつくる私
デザイナーの私と サービスをつくる私
Shizuka Yamada
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
Fumiya Sakai
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
Fumiya Sakai
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Fumiya Sakai
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
Pixate導入についてのあれこれ
Pixate導入についてのあれこれ
Kazuyuki Oikawa
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
sketchで変化したワークフロー
sketchで変化したワークフロー
正樹 平野
Rails5とAPIモードについての解説
Rails5とAPIモードについての解説
Fumiya Sakai
デザイナーとディレクターのイイ関係の作り方
デザイナーとディレクターのイイ関係の作り方
Take Bo
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
エクスペリエンス・デザイン
エクスペリエンス・デザイン
Saori Baba
SwiftとReactNativeで似たようなUIを作った際の記録
SwiftとReactNativeで似たようなUIを作った際の記録
Fumiya Sakai
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
Start Sketch.app
Start Sketch.app
Shinichi Kogiso
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
デザインのための経営のデザイン
デザインのための経営のデザイン
Satoshi Shimmyo
デザインにもこだわったUiの事始め3
デザインにもこだわったUiの事始め3
Fumiya Sakai
ハンドメイドカレンダー第15回potatotips用
ハンドメイドカレンダー第15回potatotips用
Fumiya Sakai
More Related Content
What's hot
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
Fumiya Sakai
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
Fumiya Sakai
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Fumiya Sakai
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
Pixate導入についてのあれこれ
Pixate導入についてのあれこれ
Kazuyuki Oikawa
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
sketchで変化したワークフロー
sketchで変化したワークフロー
正樹 平野
Rails5とAPIモードについての解説
Rails5とAPIモードについての解説
Fumiya Sakai
デザイナーとディレクターのイイ関係の作り方
デザイナーとディレクターのイイ関係の作り方
Take Bo
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
エクスペリエンス・デザイン
エクスペリエンス・デザイン
Saori Baba
SwiftとReactNativeで似たようなUIを作った際の記録
SwiftとReactNativeで似たようなUIを作った際の記録
Fumiya Sakai
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
Start Sketch.app
Start Sketch.app
Shinichi Kogiso
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
デザインのための経営のデザイン
デザインのための経営のデザイン
Satoshi Shimmyo
What's hot
(20)
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
ライブラリでよくある動きをUIKitのみでDIYしてみる(Part1)
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Pixate導入についてのあれこれ
Pixate導入についてのあれこれ
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
sketchで変化したワークフロー
sketchで変化したワークフロー
Rails5とAPIモードについての解説
Rails5とAPIモードについての解説
デザイナーとディレクターのイイ関係の作り方
デザイナーとディレクターのイイ関係の作り方
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
Sketchで変わるワークフロー
Sketchで変わるワークフロー
エクスペリエンス・デザイン
エクスペリエンス・デザイン
SwiftとReactNativeで似たようなUIを作った際の記録
SwiftとReactNativeで似たようなUIを作った際の記録
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Start Sketch.app
Start Sketch.app
Onsen UIが目指すもの
Onsen UIが目指すもの
デザインのための経営のデザイン
デザインのための経営のデザイン
Similar to デザインにもこだわったUIの事始め (Episode1)
デザインにもこだわったUiの事始め3
デザインにもこだわったUiの事始め3
Fumiya Sakai
ハンドメイドカレンダー第15回potatotips用
ハンドメイドカレンダー第15回potatotips用
Fumiya Sakai
UIPageViewControllerとContainerViewでこんな見た目を実現するTips
UIPageViewControllerとContainerViewでこんな見た目を実現するTips
Fumiya Sakai
ハンドメイドカレンダー(プレゼン用)
ハンドメイドカレンダー(プレゼン用)
Fumiya Sakai
カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル
カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル
Fumiya Sakai
Railsの現場に入る前のお話(勉強法)
Railsの現場に入る前のお話(勉強法)
Fumiya Sakai
Core dataと比較してrealmを使ったまとめ
Core dataと比較してrealmを使ったまとめ
Fumiya Sakai
ContainerViewとStoryboardとSwift3.0の交響曲(シンフォニー)
ContainerViewとStoryboardとSwift3.0の交響曲(シンフォニー)
Fumiya Sakai
デザイナーだった記憶を忘れないために自分なりに気をつけていること
デザイナーだった記憶を忘れないために自分なりに気をつけていること
Fumiya Sakai
実装とアプリ開発と独学でiOSアプリ開発と向き合うこと
実装とアプリ開発と独学でiOSアプリ開発と向き合うこと
Fumiya Sakai
Ruby on railsでlinebotを試した記録
Ruby on railsでlinebotを試した記録
Fumiya Sakai
LaravelでDBを使用しないbasic認証を簡単につくるtips
LaravelでDBを使用しないbasic認証を簡単につくるtips
Fumiya Sakai
RxSwiftでの実装練習の記録ノートとはじめの一歩
RxSwiftでの実装練習の記録ノートとはじめの一歩
Fumiya Sakai
30代からのプライベートiOSデベロッパーのとしての軌跡
30代からのプライベートiOSデベロッパーのとしての軌跡
Fumiya Sakai
時間制限付きクイズアプリをつくる
時間制限付きクイズアプリをつくる
Fumiya Sakai
20150215勉強会
20150215勉強会
Fumiya Sakai
2017年1月24日開催「App Talk Night」発表資料
2017年1月24日開催「App Talk Night」発表資料
LocoPartners
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
Daichi Aoki
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
Nobuya Sato
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
Similar to デザインにもこだわったUIの事始め (Episode1)
(20)
デザインにもこだわったUiの事始め3
デザインにもこだわったUiの事始め3
ハンドメイドカレンダー第15回potatotips用
ハンドメイドカレンダー第15回potatotips用
UIPageViewControllerとContainerViewでこんな見た目を実現するTips
UIPageViewControllerとContainerViewでこんな見た目を実現するTips
ハンドメイドカレンダー(プレゼン用)
ハンドメイドカレンダー(プレゼン用)
カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル
カスタムトランジションやアニメーションを活用した「写真を生かすUI」のサンプル
Railsの現場に入る前のお話(勉強法)
Railsの現場に入る前のお話(勉強法)
Core dataと比較してrealmを使ったまとめ
Core dataと比較してrealmを使ったまとめ
ContainerViewとStoryboardとSwift3.0の交響曲(シンフォニー)
ContainerViewとStoryboardとSwift3.0の交響曲(シンフォニー)
デザイナーだった記憶を忘れないために自分なりに気をつけていること
デザイナーだった記憶を忘れないために自分なりに気をつけていること
実装とアプリ開発と独学でiOSアプリ開発と向き合うこと
実装とアプリ開発と独学でiOSアプリ開発と向き合うこと
Ruby on railsでlinebotを試した記録
Ruby on railsでlinebotを試した記録
LaravelでDBを使用しないbasic認証を簡単につくるtips
LaravelでDBを使用しないbasic認証を簡単につくるtips
RxSwiftでの実装練習の記録ノートとはじめの一歩
RxSwiftでの実装練習の記録ノートとはじめの一歩
30代からのプライベートiOSデベロッパーのとしての軌跡
30代からのプライベートiOSデベロッパーのとしての軌跡
時間制限付きクイズアプリをつくる
時間制限付きクイズアプリをつくる
20150215勉強会
20150215勉強会
2017年1月24日開催「App Talk Night」発表資料
2017年1月24日開催「App Talk Night」発表資料
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
More from Fumiya Sakai
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Fumiya Sakai
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
Fumiya Sakai
少しずつ手厚くして不具合や仕様漏れを防ぐために
少しずつ手厚くして不具合や仕様漏れを防ぐために
Fumiya Sakai
Measures for Growth with Firebase Remote Config & Unit Testing Using RxSwift
Measures for Growth with Firebase Remote Config & Unit Testing Using RxSwift
Fumiya Sakai
2022年の抱負とここ数年続けてきたインプット
2022年の抱負とここ数年続けてきたインプット
Fumiya Sakai
既存プロジェクトで使っていたDIをお引っ越し&DIYすることになった
既存プロジェクトで使っていたDIをお引っ越し&DIYすることになった
Fumiya Sakai
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
Fumiya Sakai
UI実装に関するセッションを 簡単ながら振り返ってみる(仮)
UI実装に関するセッションを 簡単ながら振り返ってみる(仮)
Fumiya Sakai
最近の業務やAndroid関連のインプットと振り返り
最近の業務やAndroid関連のインプットと振り返り
Fumiya Sakai
少しずつキャッチアップしていくAndroidアプリ開発の補足と振り返り
少しずつキャッチアップしていくAndroidアプリ開発の補足と振り返り
Fumiya Sakai
少しずつキャッチアップしていくAndroidアプリ開発
少しずつキャッチアップしていくAndroidアプリ開発
Fumiya Sakai
UIKitやSwiftUIで表現や動きが特徴的なUI実装事例を考察する
UIKitやSwiftUIで表現や動きが特徴的なUI実装事例を考察する
Fumiya Sakai
レイヤー分けをしたアーキテクチャで作るiOSアプリ&バックエンドのサンプル実装をのぞく
レイヤー分けをしたアーキテクチャで作るiOSアプリ&バックエンドのサンプル実装をのぞく
Fumiya Sakai
iOSアプリ開発で意識すると役立ちそうな「つなぎ目」の部分について
iOSアプリ開発で意識すると役立ちそうな「つなぎ目」の部分について
Fumiya Sakai
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
Fumiya Sakai
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
Fumiya Sakai
何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える
何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える
Fumiya Sakai
アプリ開発におけるテキスト装飾のアイデア集
アプリ開発におけるテキスト装飾のアイデア集
Fumiya Sakai
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
Fumiya Sakai
More from Fumiya Sakai
(20)
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
少しずつ手厚くして不具合や仕様漏れを防ぐために
少しずつ手厚くして不具合や仕様漏れを防ぐために
Measures for Growth with Firebase Remote Config & Unit Testing Using RxSwift
Measures for Growth with Firebase Remote Config & Unit Testing Using RxSwift
2022年の抱負とここ数年続けてきたインプット
2022年の抱負とここ数年続けてきたインプット
既存プロジェクトで使っていたDIをお引っ越し&DIYすることになった
既存プロジェクトで使っていたDIをお引っ越し&DIYすることになった
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
UI実装に関するセッションを 簡単ながら振り返ってみる(仮)
UI実装に関するセッションを 簡単ながら振り返ってみる(仮)
最近の業務やAndroid関連のインプットと振り返り
最近の業務やAndroid関連のインプットと振り返り
少しずつキャッチアップしていくAndroidアプリ開発の補足と振り返り
少しずつキャッチアップしていくAndroidアプリ開発の補足と振り返り
少しずつキャッチアップしていくAndroidアプリ開発
少しずつキャッチアップしていくAndroidアプリ開発
UIKitやSwiftUIで表現や動きが特徴的なUI実装事例を考察する
UIKitやSwiftUIで表現や動きが特徴的なUI実装事例を考察する
レイヤー分けをしたアーキテクチャで作るiOSアプリ&バックエンドのサンプル実装をのぞく
レイヤー分けをしたアーキテクチャで作るiOSアプリ&バックエンドのサンプル実装をのぞく
iOSアプリ開発で意識すると役立ちそうな「つなぎ目」の部分について
iOSアプリ開発で意識すると役立ちそうな「つなぎ目」の部分について
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える
何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える
アプリ開発におけるテキスト装飾のアイデア集
アプリ開発におけるテキスト装飾のアイデア集
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
デザインにもこだわったUIの事始め (Episode1)
1.
デザインにもこだわったUIの事始め ∼ 今人気のアプリであるようなUIの一部分を真似っこしてみる ∼
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
5.
デザイニックなUIを作る時の誘惑 ✦ 便利そうなライブラリも沢山公開されている ・バージョンアップに対応しているか? 意外とあるこんな落とし穴 ・自分でカスタマイズはできそうか? ・デザイン適用してもくずれたりしない? ・想定しているものに近いライブラリなの? 勿論CocoaPodはものすごく便利です などなど、アップデートや運用・設計の中 で問題や懸念が生じる可能性もあります。 今回のサンプル&セッションの方針 おおまかな仕組みの概要を知った上でライブラリを 使った方が良いと個人的に思ったので、 「まずはできそうな所から真似してみよう」 その反面、 ・Xib ・UITableView ・UICollectionView ・UIScrollview ・ContainerView ・GestureRecognizer 実現する上でのキーワードは CocoaPod 活用で工数短縮!
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
12.
✦ 1つのViewControllerに収まりきらないときはContainerViewを活用 ※今後ともデザインにこだわったUIに関するトピック等はグループ等でも共有していきます。 ✦ まずはUIKitの特性を知った上で実現できるかをやってみる セッションのまとめ ✦ ファイルが多くなることが多いのでXibの設定もれ等には注意 ✦ GestureRecognizerでの画面切り替えやアニメーションは他のアプリの タイミングを参考にすると良い ✦ AutoLayoutも合わせて使う場合は難易度が上がるので注意が必要 ✦ 実現する上でのキーワード「Xib・UITableView・UICollectionView・ UIScrollview・ContainerView・GestureRecognizer」に関する理解 ご静聴ありがとうございました!
Download now