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

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

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

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

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

Q&A

解決済

1回答

1411閲覧

NSLayoutConstraintでItem同士の距離をコードから設定したい

kawano108

総合スコア17

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

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

0グッド

0クリップ

投稿2018/10/29 15:20

前提・実現したいこと

掲題の通り、NSLayoutConstraintでItem同士の距離をコードから設定したいです。
どういうことかというと、以下の画像の紫色の四角を、青色の下かつ緑色の右に配置したいです。(サイズでかくてすみません)

イメージ説明

発生している問題・エラーメッセージ

addConstraint(NSLayoutConstraint(item: titleLabel, attribute: .top, relatedBy: .equal, toItem: thumbnailImageView, attribute: .bottom, multiplier: 1, constant: 8))

このメソッドを使ってtitleLabelというLabelにAutoLayoutを適応させようとしていますが、画面の最上部に行ってしまいます。

該当のソースコード

Swift

1 2import Foundation 3import UIKit 4 5class VideoCell: UICollectionViewCell { 6 override init(frame: CGRect) { 7 super.init(frame: frame) 8 setupViews() 9 } 10 11 let thumbnailImageView: UIImageView = { 12 let imageView = UIImageView() 13 imageView.backgroundColor = UIColor.blue 14 return imageView 15 }() 16 17 let separaterView: UIView = { 18 let view = UIView() 19 view.backgroundColor = UIColor.gray 20 return view 21 }() 22 23 let userProfileImageView: UIImageView = { 24 let imageView = UIImageView() 25 imageView.backgroundColor = UIColor.green 26 return imageView 27 }() 28 29 let titleLabel: UILabel = { 30 let label = UILabel() 31 label.backgroundColor = UIColor.purple 32 return label 33 }() 34 35 36 37 required init?(coder aDecoder: NSCoder) { 38 fatalError("init(coder:) has not been implemented") 39 } 40 41 func setupViews() { 42 addSubview(thumbnailImageView) 43 addSubview(separaterView) 44 addSubview(userProfileImageView) 45 addSubview(titleLabel) 46 47 addConstraintsWithFormat(format: "H:|-16-[v0]-16-|", view: thumbnailImageView) 48 addConstraintsWithFormat(format: "H:|[v0]|", view: separaterView) 49 addConstraintsWithFormat(format: "H:|-16-[v0(44)]|", view: userProfileImageView) 50 addConstraintsWithFormat(format: "V:|-16-[v0]-8-[v1(44)]-16-[v2(1)]|", view: thumbnailImageView, userProfileImageView ,separaterView) 51 52 // TopConstraints ここがなぜか設定できない 53 addConstraint(NSLayoutConstraint(item: titleLabel, attribute: .top, relatedBy: .equal, toItem: thumbnailImageView, attribute: .bottom, multiplier: 1, constant: 8)) 54 55 // LeftConstraints ここはいけてる 56 addConstraint(NSLayoutConstraint(item: titleLabel, attribute: .left, relatedBy: .equal, toItem: userProfileImageView, attribute: .right, multiplier: 1, constant: 8)) 57 58 // RightConstraints ここもいけてる 59 addConstraint(NSLayoutConstraint(item: titleLabel, attribute: .right, relatedBy: .equal, toItem: thumbnailImageView, attribute: .right, multiplier: 1, constant: 0)) 60 61 addConstraintsWithFormat(format: "V:|[v0(20)]|", view: titleLabel) 62 63 // HeightConstraints これは無理だった 64 // addConstraint(NSLayoutConstraint(item: titleLabel, attribute: .height, relatedBy: .equal, toItem: self, attribute: .height, multiplier: 0, constant: 20)) 65 } 66} 67 68extension UIView { 69 func addConstraintsWithFormat(format: String, view: UIView...) { 70 var viewDictionary = [String: UIView]() 71 72 for (index, view) in view.enumerated() { 73 let key = "v(index)" 74 view.translatesAutoresizingMaskIntoConstraints = false 75 viewDictionary[key] = view 76 } 77 78 addConstraints(NSLayoutConstraint.constraints( 79 withVisualFormat: format, 80 options: NSLayoutConstraint.FormatOptions(), 81 metrics: nil, 82 views: viewDictionary)) 83 84 } 85} 86

試したこと

・ブレイクポイント貼り付けてメソッド自体が呼ばれてるか調べた。ちゃんと呼ばれてた。

補足情報(FW/ツールのバージョンなど)

Swift4/Xcode10.0

以下の動画を参考にしてます。
https://www.youtube.com/watch?v=3Xv1mJvwXok&list=PL0dzCUj1L5JGKdVUtA5xds1zcyzsz7HLj

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

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

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

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

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

kosanai

2018/10/30 12:47 編集

念の為言うと、コードでAutoLayoutを書くのは割と高等テクで難しいです。この動画の方はかなり強い「コード派」なようですが、世の中はほぼ「Storyboard/Xib派」なので、コードはググラビリティも低いです。もちろんそれを承知で使ってる人もいるので否定はしないですが。(初学者向けにコード勧めるの酷いなと思いました。回答しようと思ったんですが、やっぱパット見で分からないですね・・・)
kawano108

2018/10/30 14:09

回答ありがとうございます!コードでAutoLayoutを指定するのが高等テクで、しかも実業務においてはStoryboard/Xib派が多いということは承知しています。けどStoryboard/Xibは普段から使用してるので、コードだけでレイアウトを作ってみたかったから上記の動画を見てます。初学者なりにモチベーションがあって取り組んでることなので大丈夫です!お心遣いありがとうございました!
kosanai

2018/10/31 06:38

なるほど、失礼しました。(ちなみにこの前SnapKitも試してみたんですがやはり難しかったです)
guest

回答1

0

自己解決

自己解決しました!
原因はtitleLabelに以下の記述が足りなかったためです。

Swift

1label.translatesAutoresizingMaskIntoConstraints = false

ご回答頂きありがとうございました!

投稿2018/10/30 13:44

kawano108

総合スコア17

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問