/ios_ui_recipe_showcase

[技術書典5] iOSアプリ開発 - UI実装であると嬉しいレシピブックに掲載するサンプル

Primary LanguageSwift

[技術書典5] iOSアプリ開発 - UI実装であると嬉しいレシピブックに掲載するサンプル

1. 概要

こちらは、上記書籍にて紹介しているサンプルを収録したリポジトリになります。書籍内で解説の際に利用したサンプルコードの完成版のプロジェクトがそれぞれの章毎にありますので、書籍内の解説をより詳細に理解する際や開発中のアプリにおける実装時の参考等にご活用頂ければ嬉しく思います。

2. サンプル図解

こちらはの書籍で紹介しているサンプルにおける概略図になります。

第1章サンプル:

この章では複数のContainerViewを組み合わせてスライドメニューのようなViewとコンテンツの切り替えを行う部分に関して解説をしていきます。 メニューの開閉や現在表示している画面からの切り替えに関する部分はコンテンツ量が多くなるようなアプリではよくお目にかかる部分ではあるものの、いざ自前で実装しようとするとなかなか大変な部分の1つかと思います。

第1章サンプル図

第2章サンプル:

この章ではCustomTransition(カスタムトランジション)による画面遷移に一工夫を加えて遷移前後の画面表示と組み合わせた実装例を解説をしていきます。加えて今回はメディアないしは読み物系のコンテンツを表示しているアプリなどでよくお目にかかるUI表現を含んだ画面と合わせて、遷移の繋ぎ目部分の表現をできるだけ自然な形にするための考慮を行なっています。カスタムトランジションについては、iOSでお目にかかる画面遷移の表現をカスタマイズできるのでUI表現にこだわったアプリを作る際には重宝するテクニックの1つかと思います。

第2章サンプル図

第3章サンプル:

この章ではGestureRecognizerによる指の動きを利用した実装例として、人気アプリ「Tinder」でも使われている「好き」or「嫌い」(Yes or No)を左右のスワイプで答えるようなUIの実装に関して解説をしていきます。 今回はシンプルにカード風のUIを左右にスワイプして画面から消す動きまでの動きを再現した実装になりますが、この形のUIはマッチングアプリをはじめとするユーザーのカジュアルな選択を促すためのUIとして、同様な動きを表現するためのUIライブラリについても数多くあることからも、その心理的な効果や応用可能性への関心が高いことが伺えるかと思います。

第3章サンプル図

第4章サンプル:

この章ではユーザーの情報入力を伴うようなUI実装についての解説をしていきます。この章で解説しているサンプルについては、これまでの章で紹介したサンプルよりもUI表現に関する実装は少なめではありますが、ユーザーの情報入力に関する考慮という点や部品となるViewの再利用と処理の橋渡しについての考慮と言う点に重点を置いたサンプルになります。愚直に実装してしまうと煩雑なコードやUI構造になってしまいがちな部分ですが、ユーザーとの接点にもなる大切な部分ですので、UIのわかりやすさと実装のしやすさを両立した実装が求められる奥が深い例の1つだと思います。

第4章サンプル図

3. その他サンプルに関することについて

その他、サンプルにおける気になる点や要望等がある場合は是非GithubのIssueやPullRequestをお送り頂けますと嬉しく思います。