UI実装であると嬉しいレシピブック まかない編 ダイジェスト紹介と複雑なUI実装への考察
•
1 like•796 views
Swift愛好会 #50 @ オンライン(Cluster)での登壇資料になります。 今回はちょっと趣向を変えて、先日開催された技術書典応援祭で電子版を頒布した際に作成したサンプルの簡単な解説（ダイジェスト紹介）とその中でUIKitでの複雑なUI実装に関する考察を簡単ではありますが、紹介しています。 動画: https://www.facebook.com/fumiya.sakai.37/videos/3277823518946968/ Github: https://github.com/fumiyasac/meals_ios_ui_recipe_showcase
Recommended
Recommended
More Related Content
More from Fumiya Sakai
More from Fumiya Sakai (20)
UI実装であると嬉しいレシピブック まかない編 ダイジェスト紹介と複雑なUI実装への考察
- 1. UI実装であると嬉しいレシピブック まかない編 ダイジェスト紹介と複雑なUI実装への考察 Swift愛好会 #50 @ オンライン(Cluster) 2020/04/28 Fumiya Sakai
- 4. 技術書典8（応援祭）で電子版だけ頒布した書籍紹介 前回及び前々回に頒布したものの中で書籍に載せきれなかったものを紹介 第1章: メディアアプリ型のUI 第2章: 構造が複雑な写真表示UI 記事一覧を無限スクロールする様な形のアプリ UIを一覧/詳細表示を簡素化した実装を紹介。 現在はBoothにて販売中です！ https://booth.pm/ja/items/1835468 ¥1,000 - iOSアプリ開発「UI実装であると嬉しいレシピブック まかない編」 サンプルコードはこちら: https://github.com/fumiyasac/meals_ios_ui_recipe_showcase 第3章: Combine + UICollectionViewCompositionalLayout タイル状のフォトギャラリーや一覧表示型のア プリUIでライブラリを活用した実装を紹介。 実務でも利用＆考察したもの 特に第1章と第2章の内容に関し ては、実際に相談されたり、実 装アイデアとして活用する機会 があったものになります。
- 7. UIScrollViewベースの画面における各View要素の配置 縦方向のスクロール量の影響を受けるものはUIScrollViewの外側に配置 (1) DetailHeaderView (2) DetailSwitchButtonsView (3) SemiModalButton → サムネイル写真表示 → 切り替えボタン → セミモーダル表示 UITableViewの処理については配置した ViewController内で実施し画面を分割しない UIStackViewで横並びの設定 概要表示用 UITableView この様な構造の場合には、画面に関 係しうる要素の配置方法がポイント コメント表示用 UITableView UIScrollViewの内部 UIScrollViewの外部
- 8. UIScrollView内部に配置したUITableViewの位置調整 UIScrollViewのスクロール量とUITableViewのスクロール量を調節する ② ヘッダー画像非表示① ヘッダー画像表示中 (1) 構造に関するポイント スクロールの応じてサムネイル画像表示のView要素に付与した上方向の制約を更新し て動きを出す。 (2) contentOffset.yのハンドリング scrollViewDidScrollを利用することで各種構造に関わるView要素のAutoLayout制 約を更新する点がこの画面で大事な点。 スクロール時に2つのUITableViewの上方向（Y軸方向）の位置はそれぞれ違う！ (3) 中のUITableViewの位置合わせ UIScrollViewの内部にこの2つのUITableViewがある構造にも注意が必要な部分。 スクロール時に2つのUITableViewの位置は同調して動いている形にする！ UIScrollViewDelegateのscrollViewDidScrollを利用した位置調整
- 10. 利用しているライブラリの紹介 他にも利用していそうに見えるけど利用しているのは実はこの6つ https://github.com/ElaWorkshop/TagListView https://github.com/zenangst/Blueprints ⭐ AnimatedCollectionViewLayout: https://github.com/KelvinJin/AnimatedCollectionViewLayout ⭐ Blueprints: ⭐ Nantes: https://github.com/instacart/Nantes ⭐ TagListView: https://github.com/hussc/PTCardTabBar ⭐ PTCardTabBar: https://github.com/rechsteiner/Parchment ⭐ Parchment: 選定にあたって心がけた部分 ・ライブラリの利用しやすさ ・ライブラリ内サンプルの充実度合い ・機能が多すぎない or 少なすぎない ・Storyboard / Xibとの相性の良さ ・更新及び運用保守
- 12. 2つの異なるライブラリを組み合わせて表現する UICollectionViewLayoutのカスタマイズだけではどちらも難しい表現 (1) 縦に同じ比率 (2) 比率維持＆横並び Blueprints AnimatedCollectionViewLayout 奥行きを伴う回転アニメーション表現
- 15. まとめ 実務の中でも要望が上がりやすい形のUI実装を通じて気づいた事が多かった。 1. 実現したい画面におけるView構造や階層を意識する： 一見するとシンプルに見える感じを受けるような画面でも、その内側では複雑な実装をしている場合がある。 特に「画面内の要素としてまとめるか？」or「View要素クラスとして分離するか？」の選択が難しい部分でもある。 2. 仕様全体をロックインする形よりも、局所的な利用を心がけたライブラリの活用： UI実装系のライブラリを活用すると、便利で工数短縮も見込める反面仕様全体がロックインされる場合がある。 なるべくライブラリが影響する範囲を限定させながら、UI要素内に組み込んでデザインと合わせるようにすると良さそう。 まだまだ社会的に大変な時期ではありますが、僕自身もこれ以降の新しい取り組みができるようにしていく次第です。 3. 既にiOSアプリであるUIから実装を紐解いてエッセンスを自分のアプリと融合させる面白さ： 既にあるUI実装事例を導入する段階で、様々な観点から現在の仕様を理解していないとブレてしまう場合がある。 アプリのデザインに「そぐう形」を見つけて機能と体感を調和させる形を見つけるのが醍醐味であると感じる。