Swift

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

更新日 :

今回は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が学べるプログラミングスクールおすすめ6選【iPhoneアプリ開発】
Swiftが学べるプログラミングスクールおすすめ6選【iPhoneアプリ開発】

Swiftを学習して挫折したからプログラミングスクールに入塾したい!でもどのスクールが良いんだろう... SwiftやiPhoneアプリ開発を学びたいけどまず何から始めたら良いのか分からない...プロ ...

更新日:2024年1月29日

マンツーマンサポート付きのプログラミングスクールおすすめ8選をご紹介

せっかくプログラミングを学習するなら、マンツーマンでしっかり教わりたい! マンツーマンサポート付きのプログラミングスクールを探しているけどどんなメリット・デメリットがあるのかな? 今回はこんな悩みを解 ...

更新日:2024年1月30日

無料体験できるプログラミングスクールおすすめ10選を解説
無料体験できるプログラミングスクールおすすめ10選を解説

プログラミングスクールって思ったより高いからなかなか決められない... 無料体験できるプログラミングスクールを知りたい! せっかくプログラミングスクールに入るなら、無料体験に参加して自分に合うスクール ...

更新日:2024年1月29日

プログラミングスクールの口コミ投稿フォーム
  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-Swift

Copyright © wagtechblog All Rights Reserved.