🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
iOS

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

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

Xcode

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

Swift

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

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

2回答

3843閲覧

Swift UICollectionviewのCellのなかに配置されたUILabelへの制約が反映されない

kurukururin

総合スコア21

iOS

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

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

Xcode

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

Swift

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

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2019/10/16 02:54

UICollectionViewのCellをXibファイルでカスタムしたいと思っています。

そのため、

import UIKit class DayCell: UICollectionViewCell { @IBOutlet weak var dayLabel: UILabel! override func awakeFromNib() { super.awakeFromNib()! // Initialization code } }

のようなCell用のファイルとXibファイルを作成しました。

イメージ説明

Cellの中にLabelを追加し、Labelの大きさはCellの大きさいっぱいになるように、上の画像のような制約を追加しました。

Cellの大きさは画面に合わせた可変サイズになるように下記のように設定しました。
(Cellの配置の仕方としては時間割アプリのような配置を想定しています。)

extension ViewController: UICollectionViewDelegateFlowLayout{ func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { //baseViewはrootViewのsubViewでSpacing to nearest neighborを上下左右0に設定 //gridMarginはCell間の余白でCGFloat: 1.0に設定 let baseWidth = baseView.frame.width let baseHeight = baseView.frame.height //一列に存在する余白の数 let numberOfMargin: CGFloat = 5 let totalGridWidthMargin = gridMargin * numberOfMargin let totalGridHeightMargin = gridMargin * 6 //何時限目かを表すCellの横幅 let classWidth = (baseWidth - totalGridWidthMargin) * 0.1 //曜日のCellの高さ let weekHeight = baseHeight * 0.08 //時間割のCellの高さ let timeTableWidth = (baseWidth - classWidth - totalGridWidthMargin) / CGFloat(numberOfWeek) let timeTableHeight = (baseHeight - weekHeight - totalGridHeightMargin) / 6 switch indexPath.section { case 0: if (indexPath.row == 0) { return CGSize(width: classWidth, height: weekHeight) } else { return CGSize(width: timeTableWidth, height: weekHeight) } case 1: if (indexPath.row % 6 == 0){ return CGSize(width: classWidth, height: timeTableHeight) } else { return CGSize(width: timeTableWidth, height: timeTableHeight) } default: return CGSize(width: 0, height: 0) } } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { return gridMargin } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { return gridMargin } }

理想としては、このようなCellのなかにLabelをCellのサイズいっぱいに広げるように配置したいです。
イメージ説明

しかし、最初に述べたような制約を課すと
イメージ説明
このように、UICollectionViewDelegateFlowLayoutで設定したCellのサイズではなくなってしまいます。

これはどういった原因が考えられるのでしょうか?

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/10/16 11:25 編集

Flowlayoutのデリゲートの設定がひつようだったかな? とりあえず、sizeForItemAtが呼ばれてるか、breakpointやprintで確認してはどうでしょうか?
kurukururin

2019/10/16 12:19

sizeForItemAtが呼ばれていることは確認しました! cellの中のLabelにspacing to nearet heighborの上下左右を0にしたときだけサイズがおかしくなるんですよね・・ 水平、垂直方向を中央に制約した場合は正しいサイズで反映されていました。
退会済みユーザー

退会済みユーザー

2019/10/16 13:20

labelのwide/height == cellのwide/heightにして、vertical/herizontal Centerに設定すると要望どおりに表示されるってことですか?
kurukururin

2019/10/16 13:36

alignmentの設定のところでholiozontally in container とvertically in containerの制約を加えるとlabelの大きさはcellのサイズいっぱいにはならないのですが中央に配置されるって感じです。 lableのwidth/heightをcellのサイズと同じくする制約(例えばequal widthを使う)を追加するとcellのサイズが崩れます。。
退会済みユーザー

退会済みユーザー

2019/10/17 01:10 編集

wide/height を設定するとcellのwide/heightがラベルのwide/heigthに引っ張られるのね… ラベルのIntrinsic Content Sizeについてしらべてみては? https://qiita.com/shtnkgm/items/f0b189e4184fe6c90707
guest

回答2

0

自己解決

UICollectionViewCompositionalLayoutクラスを使ったレイアウト方法が現在は良いみたいですね

投稿2020/01/26 09:47

kurukururin

総合スコア21

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

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

0

あんまり気にしたことなかったけど、layout-Translates Mask into Constraints を入り切りすると変わりますね。

イメージ説明

イメージ説明

↑↓ 違いはLabelのlayout-Translates Mask into Constraintsだけ。

イメージ説明

↓ところどころ、適当に書き換えてます

swift

1import UIKit 2 3class ViewController: UIViewController { 4 5 @IBOutlet weak var tCollectionView: UICollectionView! 6 7 let array = [["A", "B", "C", "D", "E", "F"], 8 ["a01", "b01", "c01", "d01", "e01", "f01"], 9 ["a02", "b02", "c02", "d02", "e02", "f02"], 10 ["a03", "b03", "c03", "d03", "e03", "f03"], 11 ["a04", "b04", "c04", "d04", "e04", "f04"], 12 ["a05", "b05", "c05", "d05", "e05", "f05"], 13 ["a06", "b06", "c06", "d06", "e06", "f06"]] 14 15 let gridMargin: CGFloat = 1.0 16 17 override func viewDidLoad() { 18 super.viewDidLoad() 19 tCollectionView.dataSource = self 20 tCollectionView.delegate = self 21 tCollectionView.register(UINib(nibName: "TCell", bundle: Bundle.main), forCellWithReuseIdentifier: "Cell") 22 } 23} 24 25 26extension ViewController: UICollectionViewDataSource { 27 28 func numberOfSections(in collectionView: UICollectionView) -> Int { 29 return array.count 30 } 31 32 func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 33 return array[section].count 34 } 35 36 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 37 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! TCell 38 cell.tLabel.text = array[indexPath.section][indexPath.row] 39 return cell 40 } 41 42} 43 44extension ViewController: UICollectionViewDelegate, UICollectionViewDelegateFlowLayout { 45 46 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 47 48 let baseWidth = tCollectionView.frame.width 49 let baseHeight = tCollectionView.frame.height 50 51 let numberOfWeek = array[0].count 52 53 //一列に存在する余白の数 54 let numberOfMargin: CGFloat = 5 55 let totalGridWidthMargin = gridMargin * numberOfMargin 56 let totalGridHeightMargin = gridMargin * 6 57 //何時限目かを表すCellの横幅 58 let classWidth = (baseWidth - totalGridWidthMargin) * 0.1 59 //曜日のCellの高さ 60 let weekHeight = baseHeight * 0.08 61 //時間割のCellの高さ 62 let timeTableWidth = (baseWidth - classWidth - totalGridWidthMargin) / CGFloat(numberOfWeek) 63 let timeTableHeight = (baseHeight - weekHeight - totalGridHeightMargin) / 6 64 65 if indexPath.section == 0 { 66 return CGSize(width: timeTableWidth, height: weekHeight) 67 } else { 68 return CGSize(width: timeTableWidth, height: timeTableHeight) 69 70 } 71 72 } 73 74 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { 75 76 return UIEdgeInsets(top: gridMargin, left: 0.0, bottom: gridMargin, right: 0.0) 77 } 78 79 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { 80 return gridMargin 81 } 82 83 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { 84 return gridMargin 85 } 86}

投稿2019/10/16 18:25

編集2019/10/17 12:52
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kurukururin

2019/10/17 11:12

layout-Translates Mask into Constraintsを設定してみたのですが、Cellのサイズがおかしくなってしまい想定している通りにはなりませんでした。。 Translates Mask into ConstraintsについてAppleの公式にて調べてみたのですが、 If you want to use Auto Layout to dynamically calculate the size and position of your view, you must set this property to false, and then provide a non ambiguous, nonconflicting set of constraints for the view. との記述があったので動的なサイズにするという目的にはそぐわないのではないかと思いました。。
退会済みユーザー

退会済みユーザー

2019/10/17 11:53

AutoLayoutではなくてUICollectionViewDelegateFlowLayoutが計算してるんじゃないかなと解釈しちゃうんですが, ちょっとお役に立てなそうです。申し訳ない。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問