swift4 UIViewの縦の比率に画像の縦を合わせたい。

Question

swift初学者です。
以下のような画像を

以下のようなUIImage内で,

以下のような形で表示させたいのですが、(UIViewの縦の比率に画像の縦を合わせる)やり方が解らずに困っています。どなたかご存知の方がいらっしゃればご教授いただけないでしょうか。
コードでもstorybord上からでも構いません。

ちなみに Content Mode を Aspect Fillに設定した場合は、
以下のように出力されます。

コードは以下になります。

@IBOutlet weak var mainStackView: UIStackView!
    @IBOutlet weak var navigationLabel: UILabel!
    @IBOutlet weak var finishEditingButton: UIButton! //編集の終了
    @IBOutlet weak var editPhotoView: UIView! //トリミングで残す範囲を可視化するためのUIView
    @IBOutlet weak var headerView: UIView!
    @IBAction func cancelButton(_ sender: Any) {
        dismiss(animated: true, completion: nil)
    }
    
    var image : UIImage!
    var imageView : UIImageView! //トリミング対象画像を表示するためのUIImageView
    var previousImages = [UIImage]()
    var nextImages = [UIImage]()
    var scaleZoomedInOut : CGFloat = 1.0 //拡大・縮小した時にはUIImageViewのサイズのみが変わるので、実際のUIImageのサイズとUIImageViewとの倍率の差を記録する
    var previousScaleZoomedInOut = [CGFloat]()
    var nextScaleZoomedInOut = [CGFloat]()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewWillAppear(true)
        finishEditingButton.addTarget(self, action: #selector(finishEdittingAlert), for: .touchUpInside)
        
        editPhotoView.layer.borderColor = UIColor.black.cgColor
        editPhotoView.layer.borderWidth = 1
        setUpPinchInOutAndDoubleTap()
        
        //load image and show UIImageView
        let appDelegate = UIApplication.shared.delegate as! AppDelegate
        image = appDelegate.photoLibraryImage
        previousScaleZoomedInOut.append(scaleZoomedInOut)
        createImageView(sourceImage: image, on: editPhotoView)
        mainStackView.bringSubview(toFront: headerView)
    }
    
    //ピンチイン/アウト・ダブルタップの検出
    func setUpPinchInOutAndDoubleTap(){
        // ピンチイン・アウトの準備
        let pinchGetsture = UIPinchGestureRecognizer(target: self, action: #selector(pinchAction(gesture:)))
        pinchGetsture.delegate = self as? UIGestureRecognizerDelegate
        
        self.editPhotoView.isUserInteractionEnabled = true
        self.editPhotoView.isMultipleTouchEnabled = true
        
        self.editPhotoView.addGestureRecognizer(pinchGetsture)
        // ダブルタップの準備
        let doubleTapGesture = UITapGestureRecognizer(target: self, action:#selector(doubleTapAction(gesture:)))
        doubleTapGesture.numberOfTapsRequired = 2
        self.editPhotoView.addGestureRecognizer(doubleTapGesture)
    }
    
    //画像の全体が把握できるように、画像本体（UIImage）の幅がスクリーンの幅よりも大きい時は、画像を画面の幅に合わせたUIImageViewとして表示するという処理を施す関数
    func createImageView(sourceImage: UIImage, on parentView: UIView){
        imageView = UIImageView(image: sourceImage)
        // 画像の幅・高さの取得
        let imageWidth = sourceImage.size.width
        let imageHeight = sourceImage.size.height
        let screenWidth = editPhotoView.frame.width
        let screenHeight = editPhotoView.frame.height
        
        if scaleZoomedInOut == 1.0{
            if imageWidth > screenWidth{
                scaleZoomedInOut = screenWidth/imageWidth
            }
        }
        
        let rect:CGRect = CGRect(x:0, y:0, width:scaleZoomedInOut*imageWidth, height:scaleZoomedInOut*imageHeight)
        imageView.frame = rect// ImageView frame をCGRectで作った矩形に合わせる
        imageView.contentMode = .scaleAspectFill // Aspect Fill = 縦横の比率はそのままで短い辺を基準に全体を表示する
        imageView.center = CGPoint(x:screenWidth/2, y:screenHeight/2) // 画像の中心をスクリーンの中心位置に設定
        
        parentView.addSubview(imageView)
        parentView.sendSubview(toBack: imageView)
    }

ご親切にコードでもアドバイスをいただいておりますがどうしても、
横長の画像を出力する際にUIViewの縦の比率に対して画像の縦の長さに収まらずにいます。(ぴったりしない)

よろしくお願いします。

Answer 1

daisuke7さんとfuzzballさんの回答をコードにしたものが以下のものです。
fuzzballさんのおっしゃているclipsToBounds(勉強になりました)が分かる様に横幅を空けています。
画像は、Ryoma.pngにして、Assets.xcassetsに入れました。

import UIKit

let devWidth  = UIScreen.main.bounds.size.width
let devHeight = UIScreen.main.bounds.size.height

class ViewController: UIViewController {

    var myImageView : UIImageView!
    var myImage : UIImage!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        myImageView = UIImageView()
        myImageView.frame = CGRect(x: 20.0, y: 20.0, width: devWidth - 40.0, height: devHeight - 40.0)
        myImageView.image = UIImage(named: "Ryoma")
        myImageView.contentMode = .scaleAspectFill
        myImageView.clipsToBounds = true        
        self.view.addSubview(myImageView)
    }
}

Comments

[RyomaD]

コードで解りやすく記述していただき、有難すぎて普通に感動しました！
ありがとうございます！

Answer 2

横長画像で縦が短辺であれば、

imageView.contentMode = .scaleAspectFill

あるいは Content Mode を Aspect Fill。

Comments

[fuzzball]

imageView.clipsToBounds = true（あるいはClip to Boundsにチェック）しないとハミ出した部分が表示されちゃいますね。

[daisuke7]

あ、画面の幅いっぱいかつ縦長のUIImageViewで、さらに横長の画像を出す前提だと思っていました、、

[fuzzball]

確かに画面幅一杯ならハミ出しませんね‥。まぁclipsToBoundsは覚えていてもいいかと。（自己フォローｗ）

[daisuke7]

念のため、Aspect FillとAspect Fitでは挙動が変わります。

Answer 3

追記されたコードを見たところ、createImageViewメソッドのコメントに丁寧に

//画像の全体が把握できるように、画像本体（UIImage）の幅がスクリーンの幅よりも大きい時は、画像を画面の幅に合わせたUIImageViewとして表示するという処理を施す関数

と説明していますよね。
この通り動作するなら、UIImageViewのサイズは画面の横幅にあわせたサイズに調整されるので、Aspect FillにしようがAspect Fitにしようが関係なく画面の横幅に合わせた形で画像全体が表示されると思います。
このような処理をわざわざ自分で書いておいて、画面の高さいっぱいに画像が表示されるわけないです。

おそらく、このコードの意図は画面の横幅にあったサイズで画像全体を初期表示し、ピンチイン・ピンチアウトの操作で画像を拡大/縮小表示できるようにするつもりなのだと思います(コメントでも説明されている通り、画像の全体が把握できるように最初は画像全体を表示するのが適切だと私も思います)。

その初期表示を画面の高さに合わせた形で画面全体に表示するよう変更したいのなら、createImageViewメソッドの処理でUIImageViewのサイズを画面の横幅に合わせたサイズに調整しているのを画面の高さに合わせたサイズに調整するよう修正すればいいと思います。

Comments

[RyomaD]

大変勉強になりました！
ありがとうございます！