UI調整

【Swift】.alignmentGuide()とは？使い方や活用シーン、注意点までわかりやすく解説

【Swift】.alignmentGuide()とは？使い方や活用シーン、注意点までわかりやすく解説

SwiftUIでレイアウトを細かく調整したいときに便利なのが .alignmentGuide() です。

「このビューはもうちょっと右に寄せたい」「特定の基準に合わせてズラしたい」といったときに活躍します。

一見すると難しそうに見えますが、仕組みを理解すれば、とても柔軟なレイアウトコントロールが可能になります。

この記事では .alignmentGuide() の基本的な使い方、主要な引数の意味、活用時の注意点までわかりやすく解説します。

.alignmentGuide() とは？

.alignmentGuide() は SwiftUI のモディファイアで、「ビューを並べるときの基準位置を、自分で決められる」 仕組みです。

通常、HStack や VStack は子ビュー（VStackの中で使っているTextビューなど）を「中央揃え」「先頭揃え」など一定の規則で並べます。

しかし .alignmentGuide() を使えば、「特定のビューだけ少しずらす」「基準点を自分で決める」といった調整が可能です。

UIKitであれば Auto Layout で制約を細かく書く必要がありましたが、SwiftUIでは .alignmentGuide() をサッと書くだけで実現できます。

具体例：テキストをずらして配置する

具体例で確認していきましょう。

このコードでは、VStack(alignment: .leading) で左揃えの基準を作っています。

通常だと左揃えでTextが揃いますが、.alignmentGuide(.leading)を使うことで下記のように調整しています。

  • 1つ目と2つ目のテキストはそのまま左端に揃う
  • 3つ目と4つ目は .alignmentGuide(.leading) を使って、右にずらしています。

結果として、同じVStack内でも一部のテキストだけ右に寄せて表示されます。

alignmentGuide1

具体例：階段状にテキストを表示

もう1つ、今度は階段上にテキストが並ぶ例を見ていきましょう。

このコードでは、ForEachで並べたテキストを 1つ目はそのまま、2つ目は10pt、3つ目は20pt… と順番に左にずらして表示しています。

結果として「階段状」に並ぶレイアウトになります。

alignmentGuide2

このように、計算式の中で d の寸法やループ変数を使うことで、柔軟に配置をコントロールできます。

指定の仕方と主要な引数

.alignmentGuide()の使い方は下記の通りです。

このモディファイアには3つの引数があります。

 

引数 型 わかりやすい説明
AlignmentID HorizontalAlignment / VerticalAlignment どこを基準に揃えるかを決めるもの。
例：左揃え(.leading)、右揃え(.trailing)、上揃え(.top)、下揃え(.bottom)
クロージャ d ViewDimensions ビュー自身のサイズや位置の情報。
d[.leading] なら「ビューの左端」、d[.top] なら「ビューの上端」を意味する
戻り値 CGFloat 「基準点をどこに置くか？」を数値で返す。
プラスやマイナスでずらすことができる

具体的には下記のように指定します。

この場合、通常の左揃えより 20ポイント右に寄せる という意味になります。

活用シーン

.alignmentGuide() はちょっとした位置調整から複雑なレイアウトまで幅広く使えます。

特に以下のようなケースでは大きな効果を発揮します。

  • 特定のビューだけ、親の alignment に対して位置をずらしたいとき
     例えば、リストやメニューの中で「強調したい項目だけ少し右に寄せる」といった調整が可能です。
    全体の統一感を保ちながら、一部だけアクセントをつけたい場面で役立ちます。

  • VStackやHStack内で、均一ではなく一部だけ位置を調整したい
    通常の alignment ではすべての子ビューが同じ基準に揃いますが、.alignmentGuide() を使えば一部だけ異なる基準を適用できます。
    階段状やずらしたレイアウトを作りたいときに便利です。

  • テキストやアイコンを「基準線」に合わせて整列させたいとき
    数式や図形の中で、テキストとアイコンを同じベースラインに揃えるなど、細かい整列が可能になります。
    標準の中央揃えや左揃えではズレてしまう要素を正確に合わせたい場合に活躍します。

例えば、「リストの中で見出しだけ少し右に寄せたい」「図や数式の中央揃えを細かく調整したい」といったケースに活用できます。

注意点

便利な .alignmentGuide() ですが、仕組みを理解しないまま使うと「思った通りに動かない」という状況になりがちです。

以下の点を意識しておくと安心です。

  • 親ビューが alignment を持つ必要がある
    そもそも親が「どの基準で揃えるか」を定義していないと、.alignmentGuide() の指定は無効になります。
    VStack/HStack/ZStack の alignment: パラメータが設定されていないと効果が出ません
  • 複雑になりすぎると可読性が下がる
    小さな調整には便利ですが、レイアウト全体を .alignmentGuide() で組み立てるのは避け、基本はHStack/VStackのalignmentを使うのがベストです

小さな調整には非常に便利ですが、全体のレイアウトを .alignmentGuide() で組み上げようとすると逆にメンテナンス性が悪くなります。

バランスを意識して使いましょう。

まとめ

今回はレイアウトを細かく調整したいときに便利な.alignmentGuide()を紹介しました。

  • .alignmentGuide() は「ビューを並べるときの基準位置を調整できる」モディファイア
  • d[.leading] などの寸法を使って「基準点をずらす」指定が可能
  • 個別のビューだけ位置を微調整したいときや、特殊なレイアウトを作りたいときに役立つ
  • ただし、親ビューに alignment が必要であり、複雑な調整を多用すると可読性が下がる点に注意

.alignmentGuide()を活用することで、SwiftUIのレイアウトをより柔軟にコントロールできるようになるはずです！

おすすめの記事