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

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

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

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

Q&A

解決済

3回答

9938閲覧

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

RyomaD

総合スコア34

Swift

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

0グッド

0クリップ

投稿2018/09/20 12:57

編集2018/09/21 16:22

swift初学者です。
以下のような画像を
イメージ説明
以下のようなUIImage内で,
イメージ説明
以下のような形で表示させたいのですが、(UIViewの縦の比率に画像の縦を合わせる)やり方が解らずに困っています。どなたかご存知の方がいらっしゃればご教授いただけないでしょうか。
コードでもstorybord上からでも構いません。
イメージ説明
ちなみに Content Mode を Aspect Fillに設定した場合は、
以下のように出力されます。
イメージ説明

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

swift

1@IBOutlet weak var mainStackView: UIStackView! 2 @IBOutlet weak var navigationLabel: UILabel! 3 @IBOutlet weak var finishEditingButton: UIButton! //編集の終了 4 @IBOutlet weak var editPhotoView: UIView! //トリミングで残す範囲を可視化するためのUIView 5 @IBOutlet weak var headerView: UIView! 6 @IBAction func cancelButton(_ sender: Any) { 7 dismiss(animated: true, completion: nil) 8 } 9 10 var image : UIImage! 11 var imageView : UIImageView! //トリミング対象画像を表示するためのUIImageView 12 var previousImages = [UIImage]() 13 var nextImages = [UIImage]() 14 var scaleZoomedInOut : CGFloat = 1.0 //拡大・縮小した時にはUIImageViewのサイズのみが変わるので、実際のUIImageのサイズとUIImageViewとの倍率の差を記録する 15 var previousScaleZoomedInOut = [CGFloat]() 16 var nextScaleZoomedInOut = [CGFloat]() 17 18 19 override func viewDidLoad() { 20 super.viewDidLoad() 21 } 22 23 override func viewDidAppear(_ animated: Bool) { 24 super.viewWillAppear(true) 25 finishEditingButton.addTarget(self, action: #selector(finishEdittingAlert), for: .touchUpInside) 26 27 editPhotoView.layer.borderColor = UIColor.black.cgColor 28 editPhotoView.layer.borderWidth = 1 29 setUpPinchInOutAndDoubleTap() 30 31 //load image and show UIImageView 32 let appDelegate = UIApplication.shared.delegate as! AppDelegate 33 image = appDelegate.photoLibraryImage 34 previousScaleZoomedInOut.append(scaleZoomedInOut) 35 createImageView(sourceImage: image, on: editPhotoView) 36 mainStackView.bringSubview(toFront: headerView) 37 } 38 39 //ピンチイン/アウト・ダブルタップの検出 40 func setUpPinchInOutAndDoubleTap(){ 41 // ピンチイン・アウトの準備 42 let pinchGetsture = UIPinchGestureRecognizer(target: self, action: #selector(pinchAction(gesture:))) 43 pinchGetsture.delegate = self as? UIGestureRecognizerDelegate 44 45 self.editPhotoView.isUserInteractionEnabled = true 46 self.editPhotoView.isMultipleTouchEnabled = true 47 48 self.editPhotoView.addGestureRecognizer(pinchGetsture) 49 // ダブルタップの準備 50 let doubleTapGesture = UITapGestureRecognizer(target: self, action:#selector(doubleTapAction(gesture:))) 51 doubleTapGesture.numberOfTapsRequired = 2 52 self.editPhotoView.addGestureRecognizer(doubleTapGesture) 53 } 54 55 //画像の全体が把握できるように、画像本体(UIImage)の幅がスクリーンの幅よりも大きい時は、画像を画面の幅に合わせたUIImageViewとして表示するという処理を施す関数 56 func createImageView(sourceImage: UIImage, on parentView: UIView){ 57 imageView = UIImageView(image: sourceImage) 58 // 画像の幅・高さの取得 59 let imageWidth = sourceImage.size.width 60 let imageHeight = sourceImage.size.height 61 let screenWidth = editPhotoView.frame.width 62 let screenHeight = editPhotoView.frame.height 63 64 if scaleZoomedInOut == 1.0{ 65 if imageWidth > screenWidth{ 66 scaleZoomedInOut = screenWidth/imageWidth 67 } 68 } 69 70 let rect:CGRect = CGRect(x:0, y:0, width:scaleZoomedInOut*imageWidth, height:scaleZoomedInOut*imageHeight) 71 imageView.frame = rect// ImageView frame をCGRectで作った矩形に合わせる 72 imageView.contentMode = .scaleAspectFill // Aspect Fill = 縦横の比率はそのままで短い辺を基準に全体を表示する 73 imageView.center = CGPoint(x:screenWidth/2, y:screenHeight/2) // 画像の中心をスクリーンの中心位置に設定 74 75 parentView.addSubview(imageView) 76 parentView.sendSubview(toBack: imageView) 77 }

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

よろしくお願いします。

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

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

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

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

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

guest

回答3

0

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

swift

1import UIKit 2 3let devWidth = UIScreen.main.bounds.size.width 4let devHeight = UIScreen.main.bounds.size.height 5 6class ViewController: UIViewController { 7 8 var myImageView : UIImageView! 9 var myImage : UIImage! 10 11 override func viewDidLoad() { 12 super.viewDidLoad() 13 // Do any additional setup after loading the view, typically from a nib. 14 15 myImageView = UIImageView() 16 myImageView.frame = CGRect(x: 20.0, y: 20.0, width: devWidth - 40.0, height: devHeight - 40.0) 17 myImageView.image = UIImage(named: "Ryoma") 18 myImageView.contentMode = .scaleAspectFill 19 myImageView.clipsToBounds = true 20 self.view.addSubview(myImageView) 21 } 22}

投稿2018/09/21 05:46

t.harima

総合スコア55

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

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

RyomaD

2018/09/21 07:07

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

0

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

Swift

1imageView.contentMode = .scaleAspectFill

あるいは Content Mode を Aspect Fill。

投稿2018/09/20 13:48

daisuke7

総合スコア1563

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

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

fuzzball

2018/09/21 00:30

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

2018/09/21 02:15

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

2018/09/21 02:48

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

2018/09/21 04:51

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

0

ベストアンサー

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

swift

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

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

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

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

投稿2018/09/22 00:45

TakeOne

総合スコア6299

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

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

RyomaD

2018/09/22 07:56

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問