Swift

Swiftの便利ライブラリ『Cartography』の使い方をご紹介

【Swiftライブラリ】Cartographyの使ったレイアウトの仕方

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

実装環境

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

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で上の灰色のバナー画像を配置してみましょう。

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

ちなみに例としてこちらの文章を解説すると
「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には他にも便利な機能がたくさんあります。

詳細はrobb/Cartography: A declarative Auto Layout DSL for Swiftをご覧ください。

*すべて英語で書かれています。

もしも分からない部分があればお問い合わせフォームで質問して頂ければすぐに返信致します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

▼プログラミングで行き詰まっている方はこちらの記事がオススメです▼

プログラミングを理解できないときの対処法【5つのパターンから解説します】
プログラミングを理解できないときの対処法【5つのパターンから解説します】

続きを見る

プログラミングスクールおすすめ6選【料金や口コミを徹底比較】
プログラミングスクールおすすめ6選【料金や口コミを徹底比較】

続きを見る

プログラミングでエラーが発生したときの解決方法
プログラミングでエラーが発生したときの解決方法

続きを見る

▼最新映画や漫画が無料で見れちゃう▼
▼最新ドラマや漫画が無料で見れちゃう▼

-Swift

Copyright © wagtechblog All Rights Reserved.