Chapter 01無料公開

はじめに

崎山圭
崎山圭
2021.05.12に更新

この書籍について

この書籍はiOSのレイアウトの仕組みであるAutolayoutの応用について記載されてます。
iOSのレイアウトは2021/05現在はSwiftUIとUIKitの2種類が使われており、AutolayoutはUIKitの機能の一部です。
SwiftUIはUIKitに変わるレイアウトの仕組みとして2019年にWWDCで発表されました。
しかし、まだ機能が十分とは言えず、iOS開発ではUIKitを使うことが主流で、SwiftUIを使うにしてもUIKitと併用して使われるのが現状です。
そのため現在でもAutolayoutの知識はほぼ必須ですので、複雑なUIをなるべくシンプルなAutolayoutの実装で実現できるようになることを目指しています。

前提知識

Autolayoutの基礎的な制約は理解していることが前提です。
UIScrollView, UIStackView、UICollectionViewを扱いますがそれらの解説はありません。

Twitterのマイページ

Twitterのマイページに似た動きを実装していきますが、その前にTwitterのマイページを見て、何がどのように動くのか調べてみましょう。

  • 横スクロールする
    複数のUICollectionView(UITableView)が横に並んでおりスクロールさせることで切り替わる機能があります。

Twitterの横スクロール

  • 上のタブのスクロールが止まる
    ツイートツイートへの返信メディアいいねなどのタブがスクロールしていきますが、ヘッダ画像の下までくると止まります。

Twitterの上タブ

  • ヘッダ画像が途中でスクロールしなくなる
  • ヘッダ画像より前にあったアイコンがヘッダ画像の後ろにきてスクロールしていく

ヘッダ画像も全体と同じくスクロールしていきますが、一定の高さになったら動かないことが分かります。
下にスクロールをしていくとまた高さが変わっています。
また、ヘッダ画像より前にあったアイコンですが、スクロールに合わせて位置が変わることなくどんどん小さくなり、ある程度の大きさになるとスクロールしていきますが、その時はヘッダ画像の後ろにきています。

Twitterのヘッダ画像

  • 名前のレイアウトが変わる
    名前がスクロールしていくとヘッダ画像の境目でレイアウトが切り替わっています。

Twitterのタイトル

最終的にできあがるもの

細かい部分は省くため完全にTwitterのマイページと同じものができるわけではありませんが、先ほどあげた特徴のうち「ヘッダ画像より前にあったアイコンがヘッダ画像の後ろにきてスクロールしていく」以外は全ての動きをAutolayoutの設定だけで実現させます。
できあがるものが以下の図です。

Twitterのクローン

ライブラリについて

今回は外部ライブラリは使いませんが、以下のようなライブラリを使って実現させることもできます。

これらを組み合わせた参考記事があります。

外部ライブラリを使うと早く実装できますが以下のようなデメリットがあります。

  1. 複数のライブラリを組み合わせるとうまく動かない
  2. 細かい動きが理想とは違った
  3. 仕様変更でレイアウトが変わった時に柔軟に対応できない
  4. 機能が豊富過ぎて設定が複雑になり、ビルド時間も長くなる

私は、外部ライブラリは自分で実装するための参考資料とするか、ある程度ソースを読み込んで自分で改修できるものじゃないとなるべく使わないようにしています。

Storyboardのソースコード(xml)の確認の仕方

この書籍ではStoryboardのソースコード(xml)が記載されています。
そのためXcodeにコピー&ペーストする方法を紹介します。

Storyboardをxmlとして表示させるには以下の図のようにXcodeで「右クリック > Open As > Source Code」を押します。

右クリック

するとグラフィカルに表示されていたStoryboardが以下のようにxmlとして表示されます。

xml

この状態でペーストすることで書籍のstoryboardを確認することができます。

Storyboardの表示を元に戻すにはXcodeで「右クリック > Open As > Interface Builder」を押します。