Swift

Swiftの便利ライブラリ『Cartography』の使い方を徹底解説

2020年9月26日

今回はSwiftでレイアウトを簡単に実装できるライブラリ「Cartography」の導入から基本的な使い方を解説していきます!

実装環境

  • Xcode Version 11.4
  • Swift5
  • iPhoneXS , iOS 13.2.3
  • Cartography 3.0

>> Cartographyの公式サイト(github)はこちら

Cartographyの導入

CocoaPodsを使ってインストールします。

ターミナルでプロジェクトに移動したら次のように進めましょう。

まずはPodfileを新しく作ります。

 command
pod init

次にPodfileを書き換えるためにPodfileを開きます。

 command
vi Podfile

Podfileを次のように書き換えましょう。

 command
target 'プロジェクト名' do
pod 'Cartography', '~> 3.0'
use_frameworks!
end

書き換えたら「escボタン」を押して「:wq」と入力して変更を保存しましょう。

最期にpodをインストールして終了です。

 command
pod install

Cartographyを使ったレイアウト

今回は下のような画面を作っていきます。
(某フリマアプリの出品画面のUIをモチーフにしています)

Cartographyの完成図

バナー画像の配置

バナー画像の配置

まずはCartographyで上の灰色のバナー画像を配置してみましょう。

画像サイズは最初に取得した画面の横幅(width)を基準に設定しています。

ちなみに例としてこちらの文章を解説すると
「banner_imageの上部のy座標 == banner_imageの親要素の上から120pxの距離」
という意味になります。

テキストの配置

テキストの配置

続いて「出品へのショートカット」というテキスト(UILabel)を配置していきましょう。

先程の画像配置とほとんど同じですね。

フォントや文字サイズはSwift標準の構文を使って記述しています。

viewを並列させる

viewを並列させる

続いて一番下の4つ並んでいるviewを実装していきます。

こちらは背景である白い四角形を親要素にして画像とテキストを配置しています。

まずは四角形を出力するクラスを作るために別ファイルを作成します。

続いて作成したDrawViewを使って白い四角形を、Cartographyで4つ並列させます。

並列させたviewの端を揃えたい場合にはalignを、並列したviewに間隔を設定したい時はdistributeを使います。

これで4つの四角形を並列に実装できました。
次はそれぞれの四角形にアイコン画像とテキストを配置していきます。

アイコン画像の配置

4つの画像に共通する処理はいちいち書くのは効率的ではないので、辞書の配列を使って繰り返し処理をしています。

テキストの配置

こちらも4つのテキストに共通する処理はいちいち書くのは効率的ではないので、辞書の配列を使って繰り返し処理をしています。

まとめ:Swiftの便利ライブラリ『Cartography』の使い方を徹底解説

今回はSwiftの便利ライブラリCartographyの基本的な使い方をご紹介しました。

Cartographyには他にも便利な機能がたくさんあります。

詳細はCartographyの公式サイト(github)をご覧ください。

SwiftやiOS開発の学習でつまづいた時、独学に限界を感じた時はこちらの記事もオススメです。

【厳選】Swift・iPhoneアプリ開発を学べるプログラミングスクール3選

続きを見る

マンツーマンサポートに対応しているプログラミングスクール6選をご紹介

続きを見る

【超お得】無料体験があるプログラミングスクール10選を徹底解説

続きを見る

  • この記事を書いた人(執筆者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。フリーランスのエンジニアとしてiOSアプリやWebアプリの開発をしています。その傍らWeb集客のベンチャー企業で勤務。フロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティングなどの業務に携わっています。好きなプログラミング言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-Swift

Copyright © wagtechblog All Rights Reserved.