UIButtonのカスタマイズ 角丸/aspect fillにしたい

Question

前提・実現したいこと

UIButtonのカスタマイズで困っていることがあります。
今やりたいことは、まずUIButtonの角を丸く、またそのUIButtonにおく写真をaspect fillの状態にしたいです。
とても簡単なことかもしれませんが、アドバイスございましたらよろしくお願いします。

該当のソースコード

class HomePageViewController: UIViewController {
    
    @IBOutlet weak var homeScrollView: UIScrollView!

    func createContentsView() -> UIView {
        let homeview = UIView()
        let homeview_width = homeScrollView.frame.width
        homeview.frame = CGRect(x: 0, y: 0, width: homeview_width, height: 1000)
        
        let margin = 28
        let space = 12
        let syusyoku = UIButton()
        syusyoku.setTitle("pasta and rice", for: UIControl.State.normal)
        let pi = UIImage(named: "3ac4720cd39fcb7bc418a360734f4769f593c4e0.jpg")
        syusyoku.imageView?.contentMode = .scaleAspectFill　//ここに入れて試してみました。
        syusyoku.layer.masksToBounds = true　//ここに入れて試して見ました。
        syusyoku.setBackgroundImage(pi, for: .normal)
        syusyoku.setTitleColor(UIColor.white, for: .normal)
        let child_width = (Int(homeview_width) - margin - space)/2
        syusyoku.frame = CGRect(x: margin, y: margin, width: child_width, height: child_width)
        homeview.addSubview(syusyoku)
        syusyoku.addTarget(self, action: #selector(buttonEvent(_:)), for: UIControl.Event.touchUpInside)
}

試したこと

角丸に関して

button.layer.masksToBounds = true

aspect fillに関して

button.imageView?.contentMode = .scaleAspectFill

自分的にはこれであっているように見えますが。。
何がおかしいのでしょうか？

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

Swift5
Mac OS 11.2.2
Xcode 12.4

Comments

[TsukubaDepot]

Storyboardと紐付けした変数（プロパティ）、createContentsView()との対応、button.layer.masksToBounds = trueの設定方法などの関係がわからないのですが、コード全体としてはどのように対応づけられているのでしょうか。

少なくとも、このコードだと Storyboard から引っ張ってきた部品に対して、自動的に角丸にすることはできません。

中途半端に省略するよりも、コード全体を掲載されたほうが根本的な勘違いを解決する可能性は高いかと思います。

[pi.chan_san]

ありがとうございます。了解いたしました。情報が足りず申し訳ございません。

[pi.chan_san]

上記に紐付けした、と書きましたが紐付けていませんでした。storyboardに設置したscrollviewのみ紐付け、その上でlet __ = UIViewなどと書いていました。色々と間違いすみません。

Answer 1

たとえば、UIButton の画像だけを半径 20px の角丸にするのであれば、

        // 半径 20px の角丸にする
        button.imageView?.layer.cornerRadius = 20

のような感じで実現可能です。
masksToBoundsで角丸にするのではなく、layer.cornerRaduis で角丸にする半径を具体的に指定する必要があります。

ボタンそのものを角丸にし、内包される（サブレイヤになる）View にも角丸を適用させるのであれば

        button.layer.cornerRadius = 20
        button.layer.masksToBounds = true

のような感じでボタンそのものを角丸にした上で、maskToBounds を true に設定し、サブレイヤにもその効果を適用させる必要があります。

ちなみに、Button に限らず画像をはめ込む際には、余白のことを考慮に入れて設定する必要があります。
特に PNG で背景透過になっていると、角丸に指定しているにもかかわらず、背景透過が原因で角丸に見えないこともあってハマるときがありますのでご注意ください。

下記の例だと、「いらすとや」から借用した画像なのですが、背景透過 PNG なのでそのままでは角丸になったように見えません。なので一度 jpeg に変換し、また角丸の効果がわかるようにあえて view の背景色を赤くしています（透過部分が jpeg によって白色に置き換わっているのがわかるかと思います）。

以下、検証用のコードです。

import UIKit

class ViewController: UIViewController {
    // StoryBoardで配置する代わりにコードでおいている
    let button = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // Storyboard で配置するのであれば、ここから以下は省略可能
        let center = view.center
        button.frame = CGRect(origin: .zero, size: CGSize(width: 200, height: 200))
        button.center = center
        
        view.addSubview(button)
        view.backgroundColor = .red
        
        let image = UIImage(named: "souji_building_madofuki")
        button.setImage(image, for: .normal)
        // ここまで省略可能
        
        // 次の行も Storyboard で設定するなら記述不要
        button.imageView?.contentMode = .scaleAspectFill
        
        // 半径 20px の角丸にする
        button.imageView?.layer.cornerRadius = 20
        
        // ボタンそのものを角丸にする場合
//        button.layer.cornerRadius = 20
//        button.layer.masksToBounds = true
    }
}

Comments

[pi.chan_san]

とてもわかりやすかったです！解決しました。有難うございます。