カテゴリ一覧著者一覧

コンピュータ・IT iOS Swift UIKit

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

0件

1,000円（税込）

獲得ポイント: 10pt 内訳

通常:

10pt

試し読み

カート追加

ギフト購入

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

酒井文也 (著)

発売日 : 2020年2月17日

想定ページ数 : 174ページ

ダウンロード : PDF

全文検索 : 対応

これまでの書籍ではUI実装のアイデアや具体的な手法についてフォーカスを当てた書籍を2冊執筆してきましたが、どうしても誌面の分量の関係等もあって見送ってしまったものもありました。本書では、Vol.1及びVol.2では惜しくも紹介ができなかったUI実装に関する実装解説を「まかない編（番外編）」として簡単でありますがまとめたものになります。また、iOS13以降で新しく登場した新機能を利用して実装したサンプルについても少しだけ触れているものもあります。これまでの実務の中で培ってきた知識や知見に加えて、一見するととても複雑に見えそうではあれども、実装時の少しの工夫やライブラリの有効活用をすることで実現することができるUI実装に関するサンプルを3点収録しております。

※下記URLにこの中で解説を行なっているサンプルコードのGithubリポジトリも公開しておりますので、是非実際のコードとご一緒に活用して頂ければと思います。
https://github.com/fumiyasac/meals_ios_ui_recipe_showcase

目次

はじめに

まえがき

動作環境及びバージョン

サンプルに関して

誤表記などに関するお問い合わせに関して

第1章

第2章

第3章

iOS14から利用可能な新機能や仕様変更に関する補足事項

サンプルにおけるiOS13以降の機能や変更に未対応の部分

第1章　メディアアプリ型のUI

1.1　事前準備に関して

1.2　本章でのサンプル実装における概要

1.3　それぞれの画面における実装と役割について

1.4　一覧表示画面における無限スクロール型の表現を実装する

UIPageViewControllerと連動するタイトル表示用の画面を実装する

一覧データを表示するためのUIPageViewControllerを配置した画面を実装する

1.5　詳細表示画面におけるUIScrollViewの性質を利用した表現を実装する

詳細表示画面全体のUI階層構造に関するポイント

AutoLayoutを利用した水平位置に表示した要素をうまく配置するための制約設定

UIScrollViewを利用したスクロール量に応じたUI表示状態のハンドリング処理

紹介したサンプルの様な実装を考える上での注意点や補足事項

1.6　指の動きで閉じることができるセミモーダルビューを実装する

セミモーダル表示をする画面構成と適用する処理に関する簡単な紹介

1.7　コーヒーブレイク

第2章　構造が複雑な写真表示UI

2.1　事前準備に関して

2.2　本章でのサンプル実装における概要

2.3　それぞれの画面における実装と役割について

2.4　利用したライブラリの紹介

AnimatedCollectionViewLayoutの紹介

Blueprintsの紹介

Parchmentの紹介

Nantesの紹介

TagListViewの紹介

PTCardTabBarの紹介

2.5　複雑な形のサムネイル画像の縦横比を意識したタイル状の表示画面を実装する

Blueprintsを利用したレイアウトパターン定義とサムネイル写真表示

AnimatedCollectionViewLayoutを利用したカルーセル表示をするUICollectionViewの表示

2.6　記事一覧をタブ型表示とスクロール切り替えを伴う画面を実装する

Parchmentで記事コンテンツ画面をまとめるタブ型の一覧表示

2.7　カスタムトランジションやスクロールの変化に応じた動きをする詳細画面を実装する

画面遷移時におけるカスタムトランジションに関する部分の紹介

この画面における各種View要素の配置と構造について

UIScrollViewDelegateを利用したスクロール変化量を利用した画像表示とダミーのナビゲーション表示について

画面内における細かな部分についてもライブラリを有効に活用する

2.8　コーヒーブレイク

第3章　iOS13からの機能を使ったUI

3.1　事前準備に関して

node.js製のjson-serverに関する簡単な紹介

3.2　本章でのサンプル実装における概要

UICollectionViewCompositionalLayoutの基本事項のおさらい

DiffableDataSourceの基本事項のおさらい

3.3　それぞれの画面における実装と役割について

3.4　利用したライブラリの紹介

BetterSegmentedControlの紹介

Nukeの紹介

3.5　APIモックサーバーから表示データを取得する部分をCombineで実現する

3.6　UICollectionViewCompositionalLayoutを利用してセクション毎のレイアウトを構築する

各セクションのセルに適用するNSCollectionLayoutSectionのレイアウト定義

UICollectionViewCompositionalLayoutを利用したセル表示とレイアウトの全体像

3.7　DiffableDataSourceを利用した差分更新を意識した表示用データを構築する

NSDiffableDataSourceを利用する際における基本的なデータの更新方法

(補足)表示ModelデータのHash値が等しいデータがあった場合は新しいものに上書きする場合の配慮

3.8　Combine Frameworkを利用したMVVMアーキテクチャを実現する

Combineを利用してAPIリクエストをMVVMパターンでハンドリングする

Combineを利用したModel → ViewModel部分の実装部分

Combineを利用したViewModel → ViewController部分の実装部分

3.9　UITableViewについてもDiffableDataSourceを利用する

3.10　API通信処理に関連する部分テストコードについて

MockとStubを利用したAPI通信処理の代わりとなるものを準備する

各種API通信処理を伴う画面で利用しているViewModelをテストする

3.11　その他UICollectionViewCompositionalLayoutを利用した例

3.12　コーヒーブレイク

あとがき

今回の執筆に当たって

筆者プロフィール

ユーザーレビュー

レビューがありません