画面サイズが変わっても、storyboardに配置したボタンのレイアウトを固定することは可能でしょうか。

Question

前提・実現したいこと

ひとつのView Controllerに複数のUIButton(仮の画像を挿入)を配置してるのですが、画面サイズに合わせた配置にしたいと思っています。

画面のサイズが変わっても、左端のようなレイアウトをキープさせたいです。
ボタンの中心部分も縦と横それぞれ均等に間隔を空けたいです。

ご教授よろしくお願いいたします。
現在は、このような状況になっています。

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

押したボタンによって次の動作が異なるようにしたかったので、それぞれ異なるtagナンバーをつけています。

Swiftのversionは4.1.2
Xcodeのversionは9.4.1

Answer 1

storyboardで行うとそのまま画像が見れるので、イメージしやすいですよね。
プログラミングで行うのも、そう難しくないですよ。
絵を描いて、何個の時、その値をどう計算しているのかを紐解くとわかりやすいです。

https://i-app-tec.com/ios/uiimageview.html
を参考に、作ってみるといいと思います。

と言いつつ自分の興味から作ってみました。

import UIKit

class SampleViewController: UIViewController {

    var viewWidth: CGFloat!
    var viewHeight: CGFloat!
    // ここの下を変えれば表示変えられる。
    var verticalSpace:CGFloat = 10.0
    var horizontalSpace:CGFloat = 20.0
    var imageNameArray = ["xxxx.jpg", "xxxx.jpg", "xxxx.jpg", "xxxx.jpg"]
    let totalRow = 2
    let totalColum = 2
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.viewWidth = self.view.frame.size.width
        self.viewHeight = self.view.frame.size.height

        // for文を重ねることで、各行ずつ、列を追加している
        for i in 0 ... totalRow - 1 {
            for j in 0 ... totalColum - 1 {
                makeView(Row: i, Colum: j, imageNo: i + j)
            }
        }
        
    }
    
    func makeView(Row: Int, Colum: Int, imageNo: Int) {
        // 画像のファイル名を取り出し、viewにセットする
        let image:UIImage = UIImage(named: self.imageNameArray[imageNo])!
        let imageView = UIImageView(image:image)
        // 画像の大きさを設定
        let imageWidth:CGFloat = ( viewWidth - (verticalSpace * CGFloat(Row + 1) ) ) / CGFloat(Row)
        let imageHeight:CGFloat = ( viewHeight - (horizontalSpace * CGFloat(Colum + 1) ) ) / CGFloat(Colum)
        // 画像の位置・大きさを指定する
        imageView.frame = CGRect(x: horizontalSpace + (CGFloat(Colum - 1) * imageWidth),
                                 y: verticalSpace + (CGFloat(Row - 1) * imageHeight),
                                 width: imageWidth, height: imageHeight)
        imageView.tag = Row * 100 + Colum
        self.view.addSubview(imageView)
    }

あとは、iPhoneが横向きになった時のことを考え、viewにtagをつけておきました。
上記が理解できたら、それを使って横向きにしたら、
変更されるようにコード書いてみるのも勉強になると思います。

サンプルでは2x2の表示を想定していますが、
計算は定数を使って行なっているので、
初期のグローバル定数、絵のファイル名リストを編集すれば、
何x何でも対応できると思います。
左右上下の間隔も大きさの数字をいじれば調整できます。

ちなみに比率保存のためにはself.viewの高さが大きい時と、
self.viewの横幅が大きい場合に場合分けして、
絵の縦横の大きい辺の計算をまず、空白を引いて、
残った距離を個数で割り、元の絵のサイズで割り最大倍率を計算し、
残りの辺はその倍率を元の幅に対して掛けて計算し、
最後に空白はその絵の幅を抜いたものを等分する式を作ればいいはずです。
ちょっと言葉では複雑になりますね。
絵を書いて、2x2や3x3で計算式を立ててみると、理解しやすいと思います。
頑張ってください。

[追伸]
各imageのサイズが違いそうなので、
絵の中心点をセットするコードに変更した方がいいかもしれないですね。

でも、実は計算式をなんども回しててリソースを無駄にしてるコードですね。
もっとスッキリ書けますね。

下記にきちんと動くコードを記載しました。
imageViewの大きさを先に計算することでリソースもごくわずかに節約してます。

import UIKit

class ViewController: UIViewController {
    
    var viewWidth: CGFloat!
    var viewHeight: CGFloat!
    // ここの下を変えれば表示変えられる。
    var imageWidth:CGFloat = 0.0 // 新規追加
    var imageHeight:CGFloat = 0.0 // 新規追加
    var n : Int = 0 // 新規追加
    let verticalSpace:CGFloat = 10.0
    let horizontalSpace:CGFloat = 30.0
    var imageNameArray = ["List.png", "menuIcon.png", "server.png", "Settings.png"]
    let totalRow = 2
    let totalColum = 2
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.viewWidth = self.view.frame.size.width
        self.viewHeight = self.view.frame.size.height
        self.imageWidth = (self.viewWidth - (CGFloat(totalColum + 1) * horizontalSpace)) / CGFloat(totalColum) // 新規追加
        self.imageHeight = (self.viewHeight - (CGFloat(totalRow + 1) * verticalSpace)) / CGFloat(totalRow) // 新規追加

        // for文を重ねることで、各行ずつ、列を追加している
        for i in 0 ... totalRow - 1 {
            for j in 0 ... totalColum - 1 {
                makeView(Row: i, Colum: j, imageNo: n) // nに変更
                n = n + 1
            }
        }
        
    }
    
    func makeView(Row: Int, Colum: Int, imageNo: Int) {
        print("makeView[Row]", Row, "[Colum]", Colum, "[imageNo]", imageNo) // 確認用
        // 画像のファイル名を取り出し、viewにセットする
        let image:UIImage = UIImage(named: self.imageNameArray[imageNo])!
        let imageView = UIImageView(image:image)
        // 画像の位置・大きさを指定する
        imageView.frame = CGRect(x: horizontalSpace * CGFloat(Colum + 1) + imageWidth * CGFloat(Colum), // 計算し直し
                                 y: verticalSpace * CGFloat(Row + 1) + imageHeight * CGFloat(Row), // 計算し直し
                                 width: self.imageWidth,
                                 height: self.imageHeight)
        print(n, "番目のimageView.frame=", imageView.frame) // 確認用
        imageView.tag = Row * 100 + Colum
        self.view.addSubview(imageView)
    }

Comments

[mimamo]

実際にコーディングしていただきありがとうございます！！本当にありがたいです...。

コーディングしてみたのですが、この一覧？のようなページに遷移するボタンを押すとエラーが発生して落ちてしまいました。

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate のとこに
Thread 1: signal SIGABRT が表示されました。

加えてお伺いしたいことが３つあります。
・画像の大きさと位置の設定に違和感を感じてなおしてみたのですが、以下のようなコードで大丈夫でしょうか？
・for文のとこで作られるimageNoが(0,1,1,2)の順番で出ると思ったのですが、imageNameArrayとの対応がわからず悩んでいます。
・UIImageVIewは実際にstoryboard上で設定しなくてもよいということでしょうか

質問攻めで恐れ入りますが何卒よろしくお願いします。

以下コード

import UIKit
class ViewController3: UIViewController {

var viewWidth: CGFloat!
var viewHeight: CGFloat!
// ここの下を変えれば表示変えられる。
var verticalSpace:CGFloat = 120.0
var horizontalSpace:CGFloat = 30.0
var imageNameArray = ["binsen1.jpg", "binse2.jpg", "binse3.png", "binsen4.jpg"]
let totalRow = 2
let totalColum = 2

override func viewDidLoad() {
super.viewDidLoad()
self.viewWidth = self.view.frame.size.width
self.viewHeight = self.view.frame.size.height

// for文を重ねることで、各行ずつ、列を追加している
for i in 0 ... totalRow - 1 {
for j in 0 ... totalColum - 1 {
makeView(Row: i, Colum: j, imageNo: i + j)
}
}

}

func makeView(Row: Int, Colum: Int, imageNo: Int) {
// 画像のファイル名を取り出し、viewにセットする
let image:UIImage = UIImage(named: self.imageNameArray[imageNo])!
let imageView = UIImageView(image:image)
// 画像の大きさを設定
let imageWidth:CGFloat = ( viewWidth - (horizontalSpace * CGFloat(Row + 1) ) ) / CGFloat(Row)
let imageHeight:CGFloat = ( viewHeight - (verticalSpace * CGFloat(Colum + 1) ) ) / CGFloat(Colum)
// 画像の位置・大きさを指定する
imageView.frame = CGRect(x: horizontalSpace * CGFloat(Colum) + (CGFloat(Colum - 1) * imageWidth),
y: verticalSpace * CGFloat(Row) + (CGFloat(Row - 1) * imageHeight),
width: imageWidth, height: imageHeight)
imageView.tag = Row * 100 + Colum
self.view.addSubview(imageView)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}

[hameji001]

実際に動かして作り直しました。
コードが含まれるので、見やすいように最初の答えを書き直します。
ちなみにstoryboardには何もなくてOKです。
それでも、きちんと表示されます。

[mimamo]

ありがとうございます！！無事４つのviewの表示ができました！

画像のアスペクト比を保つのにaspect fitを使いたかっため、この資料を参考にコーデイングしたら簡単に比率を守ったまま画像を表示させることができました。
(画像はクリックできるようにしたかったので、頂いたコードを参考に画像をボタンに変え、ボタンに画像を当てはめました。)
https://qiita.com/touyoubuntu/items/4fdad9d7b6c6eb5cdccf

画像数を９つに変更すると
iPadだとイメージしていたように画像が配置されるのですが、iPhoneだと縦のスペースがやたら広くなってしまいます。なのでこれからはこちらの調整を頑張っていきたいと思います。
ありがとうございます！

Answer 2

各constraintsに@IBOutletをつけて、
計算式を用いて、大きさを計算し、セットするようにすれば解決すると思います。

storyboard上だけで実現する方法は、、、
あるかもしれませんが、自分はちょっと疎いので、すみませんが、お答えできません。
ごめんなさい。

上記のようにview、NSLayoutConstraintに1個一個@IBOuteletを接続し、
①画面サイズをまず取得
②接続したviewのheight, widthを画面の○○%と指定する
③間のスペースは残りのpixelを必要なスペースの数で割ったものを1個1個に指定すれば
自然と画面が変わろうと同じレイアウトを保存したままにできると思います。

ただし、元の画像？が横長、縦長になるのを防ぐためには
さらに面倒な計算をし、比率を固定する設定をしないといけなそうですね。

collectionviewは自分は用いたことがないので、できませんが、
collectionviewを使えば、もっと簡単に実現できるかもしれません。
調べてみてください。

参考URL https://i-app-tec.com/ios/collectionview.html

ここを見ると、中段あたりに「cellの調整」
＞＞UICollectionViewDelegateFlowLayout を使うと画面サイズに合ったセルサイズを計算して合わせこみができます。

と書いてあるので、できそうですよ。試してみてください。

Comments

[mimamo]

ご回答ありがとうございます！
ボタンとボタンの間に間隔を空けつつ画面サイズに合わせたレイアウトにしたいと思うのですが、実際のコーディングがわからないのでどのように考えればよいのか教えて頂けると幸いです。

[mimamo]

丁寧な解説ありがとうございます！　
collectionviewも考えたのですが、画面サイズによってレイアウトが変わってしまったりする可能性があるみたいなので、先にいただいた提案の方で挑戦してみたいと思います！

[hameji001]

まず、9個配置していきなり行うのは、複雑になると思いますので、
1個だけ配置をし、できるかどうか、
コードの流れ等を確認してみるのはどうでしょうか？
それができたら、徐々に増やしていくか、9個いきなりか・・・。

また、同じ処理を連続して行う場合は、
storyboardを使わずに全部コードで書いた方が楽かもしれませんよ。
繰り返しの for や repeat , whileを用いる方がスッキリするし、
変更も加えやすいかもしれません。

[mimamo]

たしかに一気に全て配置させようとするのはとても複雑ですね。一個ずつ処理していくことにしました！

storyboardは後々の変更が効きにくい部分があるのでコーディングでやってみようと思ったのですが今の私には少しハードルが高かったです...。もっと慣れてきたらコーディングできるようになりたいと思います！

画面のアスペクト比は、storyboardで設定することができました。
無事配置することができました！！ありがとうございます。