UIButtonに画像のみ設定して、縦横比を維持したままbuttonサイズに合わせて拡縮(.scaleAspectFit)したいが、ボタンタップした際のみ拡縮する...。

Question

UIButtonに画像のみを設定して.scaleAspectFitさせたいのですが、該当UIButtonが表示された際には縦横比が崩れていて、タップすると縦横比を維持したまま拡縮します。最初から意図したとおりに表示するにはどこに気をつけて設定してあげればよいのでしょうか？

サンプル

⇣用意した画像のpng版/実際は80px × 80pxのPDF
UIButtonのImageとして設定(Backgroundではなく)
![

⇣症状：タップするまで楕円で表示され、タップすると真円になる。

⇣Assets.xcassets

⇣ストーリーボード/AutoLayoutなど設定

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tBtn: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // ここで設定しても同じ
        //tBtn.imageView?.contentMode = .scaleAspectFit
        //tBtn.contentHorizontalAlignment = .fill
        //tBtn.contentVerticalAlignment = .fill
    }
}

class CustomBtn: UIButton {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super .init(coder: aDecoder)
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        print("awakeFromNib")
        // UIButtonサイズは width:44, height:30 に固定
        // UIButton配置は viewSafeAreaのHcenter/Vcenter
        // ここへの記述が的確なのか？
        self.imageView?.contentMode = .scaleAspectFit
        self.contentHorizontalAlignment = .fill
        self.contentVerticalAlignment = .fill
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
    }
}

⇣Storyboardだけで設定

Answer 1

こんにちは。

以下を参考にしてみてください。
UIButtonの画像をUIButtonに対してAspectFitする方法

※storyboardからではなく、コードで以下のようにすれば期待した動きになります。

btn.imageView?.contentMode = .scaleAspectFit
btn.contentHorizontalAlignment = .fill
btn.contentVerticalAlignment = .fill

Comments

[退会済みユーザー]

回答ありがとうございます。
ViewControllerのviewDidLoadからコードで指定、
UIButtonの自作サブクラスawakeFromNibからコードで指定、
StoryboardのUserDefainedRuntimeAttributesからの３通りを行っているのですが、症状は同じになってしまっています。

[takabosoft]

うーん、他に要因があるんでしょうかねえ。プロジェクトごとgithubとかgoogle driveに上げてもらえませんでしょうかね？こちらで検証してみますので。

[退会済みユーザー]

ありがとうございます。
作ったサンプルを上げておきますのでお時間ありましたらよろしくお願いします。

https://github.com/tyobigoro/tUIButton

Assets.xcassets/Preserve vector dataのチェックを外すと、どの方法でも症状がでなくなりました。
imageViewについてですがこんな記事もありましたので、　AutoLayoutの設定を変えるか、buttonのimageInsetsでも設定してあげれば動くのでしょうか？
https://qiita.com/hikaruna/items/e6fbc283f0b3e21fd2f3
↓backgroundImageなら動くという記事も....。
https://medium.com/swift-column/processing-vector-at-runtime-ecba940309a7