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

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

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

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

Q&A

2回答

1291閲覧

Swift 4.7inchと5.5inchの画面サイズにレイアウトを対応させる方法

torkia

総合スコア24

Swift

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

0グッド

0クリップ

投稿2018/07/25 04:18

編集2022/01/12 10:55

UI部品をコード記述で、iphone7など(4.4inch)のサイズでレイアウトしているのですが、NSLayoutAnchorを使ってスクロールビューに制約を付けた場合、その上にaddSubviewしているUI部品なども連動して、4.4inchのレイアウトのまま5.5inchに合うように拡大して欲しいのですが、スクロールビューのみ変化します。
コード記述で不足や間違い(制約の付け方)などがあるのか、それぞれのUI部品に個別に制約を付けるコードを記述しなければいけないのか?・・・など、教えて頂けないでしょうか。
他の方法で画面サイズの違いに互換性を持たせることができるのでしたらその方法でもかまいません。
宜しくお願い致します。

■ iPhone7(4.7inch)でビルド
(レイアウトの理想図)
イメージ説明

■ iPhone7Plus(5.5inch)でビルド
(NSLayoutAnchor記述なし) (スクロールビューにNSLayoutAnchor記述)
余白ができる スクロールビューのみ変化あり
イメージ説明 イメージ説明

import UIKit class ViewController: UIViewController,UIScrollViewDelegate { let scrollView = UIScrollView() var scrollViewContentHeight:CGFloat = 667 var labelsMaxY: CGFloat = 100 let titleLabel = UILabel() let aLabel = UILabel() let bLabel = UILabel() let cLabel = UILabel() var labels = [UILabel]() override func viewDidLoad() { super.viewDidLoad() scrollView.frame.size = CGSize(width: 375, height: 667) scrollView.contentSize = CGSize(width: 375, height: scrollViewContentHeight) scrollView.bounces = false scrollView.indicatorStyle = .default scrollView.scrollIndicatorInsets = UIEdgeInsets(top: 10, left: 5, bottom: 10, right: 5) scrollView.delegate = self scrollView.backgroundColor = UIColor.yellow scrollView.translatesAutoresizingMaskIntoConstraints = false self.view.addSubview(scrollView) // NSLayoutAnchor scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true scrollView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true // タイトルラベル titleLabel.frame = CGRect(x: 20, y: 20, width: 335, height: 20) titleLabel.text = "タイトルラベル" titleLabel.backgroundColor = UIColor.magenta scrollView.addSubview(titleLabel) // ABCラベル aLabel.frame = CGRect(x: 20, y: 50, width: 100, height: 30) aLabel.text = "Aラベル" aLabel.backgroundColor = UIColor.red scrollView.addSubview(aLabel) bLabel.frame = CGRect(x: 137.5, y: 50, width: 100, height: 30) bLabel.text = "Bラベル" bLabel.backgroundColor = UIColor.green scrollView.addSubview(bLabel) cLabel.frame = CGRect(x: 255, y: 50, width: 100, height: 30) cLabel.text = "Cラベル" cLabel.backgroundColor = UIColor.cyan scrollView.addSubview(cLabel) // ラベル量産 for index in 0..<20 { let label = UILabel() label.frame = CGRect(x:20, y:100+(40*index), width:335, height:40) label.text = "test(index + 1)" if index % 2 == 0 {label.backgroundColor = UIColor.gray} if index % 2 == 1 {label.backgroundColor = UIColor.lightGray} labels.append(label) scrollView.addSubview(label) } // 表示されてるラベルのmaxYを取得 var sum: CGFloat = 100 for index in 0..<labels.count { if labels[index].isHidden == false { let height = labels[index].frame.height sum += height labelsMaxY = sum } } // scrollViewContentHeightの値を再設定 scrollViewContentHeight = labelsMaxY + 100 scrollView.contentSize.height = scrollViewContentHeight } //viewDidLoadを閉じる }

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

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

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

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

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

guest

回答2

0

このようにデバイスのサイズを検出して、デバイスによってサイズを変更すれば、デバイスが変わっても、同じような配置ができます。

swift

1import UIKit 2 3class ViewController: UIViewController,UIScrollViewDelegate { 4 5 let scrollView = UIScrollView() 6 var scrollViewContentHeight:CGFloat = 667 7 var labelsMaxY: CGFloat = 100 8 9 let titleLabel = UILabel() 10 let aLabel = UILabel() 11 let bLabel = UILabel() 12 let cLabel = UILabel() 13 var labels = [UILabel]() 14 15 16 override func viewDidLoad() { 17 super.viewDidLoad() 18 19 let devMaxWidth: CGFloat = self.view.frame.width // 追加 20 let devMaxHeight: CGFloat = self.view.frame.height // 追加 21 22// scrollView.frame.size = CGSize(width: 375, height: 667) 23 scrollView.frame.size = CGSize(width: devMaxWidth, height: devMaxHeight) // 変更 24// scrollView.contentSize = CGSize(width: 375, height: scrollViewContentHeight) 25 scrollView.contentSize = CGSize(width: devMaxWidth, height: scrollViewContentHeight) // 変更 26 scrollView.bounces = false 27 scrollView.indicatorStyle = .default 28 scrollView.scrollIndicatorInsets = UIEdgeInsets(top: 10, left: 5, bottom: 10, right: 5) 29 scrollView.delegate = self 30 scrollView.backgroundColor = UIColor.yellow 31 scrollView.translatesAutoresizingMaskIntoConstraints = false 32 self.view.addSubview(scrollView) 33 34 // NSLayoutAnchor 35 scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true 36 scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true 37 scrollView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true 38 scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true 39 40 41 // タイトルラベル 42// titleLabel.frame = CGRect(x: 20, y: 20, width: 335, height: 20) 43 titleLabel.frame = CGRect(x: 20, y: 20, width: devMaxWidth - 40, height: 20) // 変更 44 titleLabel.text = "タイトルラベル" 45 titleLabel.backgroundColor = UIColor.magenta 46 scrollView.addSubview(titleLabel) 47 48 49 // ABCラベル 50// aLabel.frame = CGRect(x: 20, y: 50, width: 100, height: 30) 51 aLabel.frame = CGRect(x: 20, y: 50, width: (devMaxWidth - 40) / 3 - 10, height: 30) // 変更 52 aLabel.text = "Aラベル" 53 aLabel.backgroundColor = UIColor.red 54 scrollView.addSubview(aLabel) 55 56// bLabel.frame = CGRect(x: 137.5, y: 50, width: 100, height: 30) 57 bLabel.frame = CGRect(x: (devMaxWidth - 40) / 3 + 25, y: 50, width: (devMaxWidth - 40) / 3 - 10, height: 30) // 変更 58 bLabel.text = "Bラベル" 59 bLabel.backgroundColor = UIColor.green 60 scrollView.addSubview(bLabel) 61 62// cLabel.frame = CGRect(x: 255, y: 50, width: 100, height: 30) 63 cLabel.frame = CGRect(x: (devMaxWidth - 40) / 3 * 2 + 30, y: 50, width: (devMaxWidth - 40) / 3 - 10, height: 30) // 変更 64 cLabel.text = "Cラベル" 65 cLabel.backgroundColor = UIColor.cyan 66 scrollView.addSubview(cLabel) 67 68 69 // ラベル量産 70 for index in 0..<20 { 71 let label = UILabel() 72// label.frame = CGRect(x:20, y:100+(40*index), width:335, height:40) 73 label.frame = CGRect(x:20, y: 100.0+(40*CGFloat(index)), width: devMaxWidth - 40, height:40) // 変更 74 label.text = "test(index + 1)" 75 if index % 2 == 0 {label.backgroundColor = UIColor.gray} 76 if index % 2 == 1 {label.backgroundColor = UIColor.lightGray} 77 labels.append(label) 78 scrollView.addSubview(label) 79 } 80 81 // 表示されてるラベルのmaxYを取得 82 var sum: CGFloat = 100 83 for index in 0..<labels.count { 84 if labels[index].isHidden == false { 85 let height = labels[index].frame.height 86 sum += height 87 labelsMaxY = sum 88 } 89 } 90 91 // scrollViewContentHeightの値を再設定 92 scrollViewContentHeight = labelsMaxY + 100 93 scrollView.contentSize.height = scrollViewContentHeight 94 95 } //viewDidLoadを閉じる 96 97 override func didReceiveMemoryWarning() { 98 super.didReceiveMemoryWarning() 99 // Dispose of any resources that can be recreated. 100 } 101 102} 103

投稿2018/08/10 05:11

t.harima

総合スコア55

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

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

torkia

2018/08/11 07:20

ご回答ありがとうございます。 コード記述での丁寧な説明、ありがとうございました。 大変参考になりました。
guest

0

それぞれのUI部品に個別に制約を付けるコードを記述しなければいけないのか?

全てのUIに制約を付けないといけません。
大雑把なレイアウトでいいのであれば、UIStackViewやAutoresizingを併用する手もあります。

投稿2018/07/25 04:24

fuzzball

総合スコア16731

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

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

torkia

2018/07/29 05:45

ご回答ありがとうございます。 大変参考になりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問