質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

1回答

424閲覧

anchorとconstraintを使ってのレイアウトを上手く配置できません。

退会済みユーザー

退会済みユーザー

総合スコア0

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2018/04/05 07:43

NSLayoutのアンカーとUIViewのconstraintを使って
画像にある3色のUIViewでレイアウトを作ってみたのですが、
グリーンとレッド(ブルー)の間のconstraintが設定できません。

下記のコードではgreenView.anchorのleftを12と設定しているのですが、
シミュレーターには反映されず間に12のスペースが入りません。

何度も見直してはいるのですが、不備があればご指摘頂きたいです。
よろしくお願いします。

イメージ説明

import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white let redView = UIView() redView.backgroundColor = .red let blueView = UIView() blueView.backgroundColor = .blue let greenView = UIView() greenView.backgroundColor = .green //each 各 [redView, blueView, greenView].forEach { view.addSubview($0) } redView.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading: nil, bottom: nil, trailing: view.safeAreaLayoutGuide.trailingAnchor, padding: .init(top: 0, left: 0, bottom: 0, right: 12), size: .init(width: 125, height: 0)) //dimension 寸法 redView.heightAnchor.constraint(equalTo: redView.widthAnchor).isActive = true blueView.anchor(top: redView.bottomAnchor, leading: nil, bottom: nil, trailing: redView.trailingAnchor, padding: .init(top: 12, left: 0, bottom: 0, right: 0)) blueView.anchorSize(to: redView) greenView.anchor(top: redView.topAnchor, leading: view.safeAreaLayoutGuide.leadingAnchor, bottom: blueView.bottomAnchor, trailing: redView.leadingAnchor, padding: .init(top: 0, left: 12, bottom: 0, right: 12)) } } extension UIView { func anchorSize(to view: UIView) { widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true } func anchor(top: NSLayoutYAxisAnchor?, leading: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, trailing: NSLayoutXAxisAnchor?, padding: UIEdgeInsets = .zero, size: CGSize = .zero) { translatesAutoresizingMaskIntoConstraints = false if let top = top { topAnchor.constraint(equalTo: top, constant: padding.top).isActive = true } if let leading = leading { leadingAnchor.constraint(equalTo: leading, constant: padding.left).isActive = true } if let bottom = bottom { bottomAnchor.constraint(equalTo: bottom, constant: padding.bottom).isActive = true } if let trailing = trailing { trailingAnchor.constraint(equalTo: trailing, constant: padding.right).isActive = true } if size.width != 0 { widthAnchor.constraint(equalToConstant: size.width).isActive = true } if size.height != 0 { heightAnchor.constraint(equalToConstant: size.height).isActive = true } } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

赤/青が緑の下に潜り込んでいる & 画面の外にはみ出ている。
rightを両方とも-12にして下さい。(逆ってことです)

投稿2018/04/05 08:08

編集2018/04/05 08:09
fuzzball

総合スコア16731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/04/05 08:15

right には -マイナス を付けるのですね。 解決しました 具体的に教えていただき理解できました。 ありがとうございます!
fuzzball

2018/04/05 08:24 編集

rightだからマイナスというわけではありません。 Red.trailing = SafeArea.trailing - 12 Green.trailing = Red.leading -12 だからマイナスなのです。
退会済みユーザー

退会済みユーザー

2018/04/05 08:46 編集

すみません 自分がコードを書いているというのに... >>赤/青が緑の下に潜り込んでいる ので RedをRed側に- 12してgreenらとのスペースを作るイメージでしょうか?
fuzzball

2018/04/05 09:01

イメージと言うか、見たままなのですが。 「緑と赤の間に12のスペース」について説明すると、「赤の左端 = 緑の右端 + 12」もしくは「緑の右端 = 赤の左端 -12」の制約を付けることになります。 今回、この制約は緑に付けているので「緑の右端 = 赤の左端 -12」になります。 (もし赤に付けるなら「赤の左端 = 緑の右端 + 12」になります)
退会済みユーザー

退会済みユーザー

2018/04/05 09:04

噛み砕いて説明して頂きありがとうございます。 分かりました。基礎を勉強します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問