メニュー

iOSアプリ開発「UI実装であると嬉しいレシピブック おもしろ編」

発売日: 2020/9/12 想定ページ数: 162ページ 全文検索: 対応
★★★★★ ★★★★★ 0件
これまでの書籍ではUI実装のアイデアや具体的な手法についてフォーカスを当てた書籍を3冊執筆してきましたが、急遽Vol.3の前段として更に番外編として表現や動きが特徴的でかつ、ユーザーにもほんの少しだけ遊び心を与えるような楽しい感覚を抱かせてくれるようなUI実装に関する解説を「おもしろ編(番外編Vol.2)」として簡単でありますがまとめたものになります。Chapter1及びChapter2で紹介しているサンプル実装についてはUIKitをベースに構築したサンプルとなっていますが、Chapter3ではiOS13から登場したSwiftUIを利用して構築したサンプルとなっております。

これまでの実務の中で培ってきた知識や知見に加えて、一般的なiOSアプリに対しては利用可能なケースは限られてしまうかもしれませんが、アニメーションやインタラクションにひと工夫を加えることによって、見た目にも美しく触っていて思わず楽しくなりそうな感じのUI実装のエッセンスと、これからの普及が見込めるSwiftUIとOSSのライブラリをうまく利用するアイデアを紹介しておりますので、ほんの少しでもiOSアプリ開発におけるUI実装の道標となることができれば嬉しく思います。

※下記URLにこの中で解説を行なっているサンプルコードのGithubリポジトリも公開しておりますので、是非実際のコードとご一緒に活用して頂ければと思います。
https://github.com/fumiyasac/meals_2nd_ios_ui_recipe_showcase
目次プレビュー
  • はじめに
  • 第1章 Photo Gallery & Transition
  • 第2章 Screen With Passcode Lock
  • まえがき
  • 動作環境及びバージョン
  • サンプルに関して
  • 誤表記などに関するお問い合わせに関して
    • 第1章
    • 第2章
    • 第3章
    • iOS14から利用可能な新機能や仕様変更に関する補足事項
    • サンプルにおけるiOS13以降の機能や変更に未対応の部分
  • 1.1 事前準備に関して
  • 1.2 本章でのサンプル実装における概要
  • 1.3 サンプル実装画面に関する説明
  • 1.4 上下及び左右方向の同時スクロールを実現するレイアウトの実装解説
    • UICollectionViewFlowLayoutクラスを継承したクラスの作成
    • 上下及び左右方向のスクロールをするUICollectionViewの表示に関して
  • 1.5 サムネイル一覧画面から拡大表示する形の画面遷移処理の実装解説
    • 画面遷移時のカスタムトランジションを実現するために必要なクラスの関連性
    • 画面遷移元の画面構造とカスタムトランジションを考える
    • 画面遷移先の画面構造とカスタムトランジションを考える
    • 指の動きと連動するインタラクティブな画面遷移処理を考える
    • UINavigationControllerを拡張してアニメーション等の処理と結びつける
  • 1.6 Safariアプリのタブ表示に類似したレイアウトの実装解説
    • UICollectionViewLayoutクラスを継承したクラスの作成
    • Safariアプリのタブ表示の様な振る舞いをするUICollectionViewの表示に関して
  • 1.7 UITabBarControllerの切り替えアニメーションの実装解説
  • 1.8 UICollectionViewまたはUIScrollViewのどちらを利用するかの考察
  • 1.9 コーヒーブレイク
  • 2.1 事前準備に関して
  • 2.2 本章でのサンプル実装における概要
  • 2.3 サンプル実装画面に関する説明
  • 2.4 利用したライブラリの紹介
    • PanModalの紹介
    • SwipeCellKitの紹介
  • 2.5 本章のサンプルで利用しているアーキテクチャに関して
  • 2.6 コンテンツ一覧からセミモーダルビューで表示する画面を実装する
    • 画面上部にくっつくスクロールをするUICollectionViewの動き
    • ライブラリ「PanModal」を利用したセミモーダルビュー表示
    • ライブラリ「SwipeCellKit」を利用したスワイプ処理でメニュー表示
  • 2.7 パスコードロック機能にひと工夫を加えるためのポイント解説
    • 4桁のパスコードを入力するためのテンキー部分のView実装のポイント
    • ユーザーの入力状態を表す部分におけるView実装のポイント
    • TouchIDやFaceIDをパスコードロックを解除するために利用する際のポイント
  • 2.8 パスコードロック画面を実装する
    • ユーザーが入力したパスコードを管理するModelとPresenterをつなげる
    • パスコード入力画面のViewControllerと用途に応じたPresenterをつなげる
    • SceneDelegate.swiftのライフサイクル処理と一番最初に表示する画面でのパスコードロックの実施する処理の解説
  • 2.9 機能を更により良くするためのアイデアや導入時に注意すると良い点
  • 2.10 コーヒーブレイク
  • 3.1 事前準備に関して
  • 3.2 本章でのサンプル実装における概要
  • 3.3 サンプル実装画面に関する説明
  • 3.4 利用したライブラリの紹介
    • ASCollectionViewの紹介
    • WaterfallGridの紹介
  • 3.5 本章における各画面を構成するView要素の分割に関して
  • 3.6 ライブラリ「ASCollectionView」を利用した実装
    • Section毎の表示に必要なデータ要素を作成する
    • Section毎の表示に必要なView要素を作成する
    • Section毎のレイアウト定義を適用する
  • 3.7 ライブラリ「WaterfallGrid」を利用した実装
    • 高さ可変のグリッド要素の表示に必要なデータ要素を作成する
    • 高さ可変のグリッド要素の表示に必要なView要素を作成する
    • WaterfallGridを利用したセルのグリッド表示を適用する
  • 3.8 画面トップ位置に配置したサムネイル画像のパララックス表現部分の実装
  • 3.9 本章のサンプルで利用しているその他ExtensionやUI調整に関する紹介
  • 3.10 コーヒーブレイク
  • 今回の執筆に当たって
  • 筆者プロフィール

まだレビューが投稿されていません