UIButtonのsystemとcustomのデフォルトの挙動の違い

UIButtonのsystemとcustomのデフォルトの挙動（色変化など）について調べる

• normal
• highlighted
• disabled
• selected

の4状態について

• テキストのみ
• フォアグラウンドの画像を指定(normalに指定)、テキストなし
• バックグラウンドの画像を指定(normalに指定)、テキストあり

の3パターンを調べる。画像は彩度と明度を金融会社のイメージカラーぽくした緑色を用いる。

Xcode 11.3
シミュレータ iPhone8 iOS13.3

Normal

左がsystem、右がcustom
上から、文字のみ、フォアグラウンド画像指定で文字なし。バックグラウンド画像指定で文字あり。

文字色はnormalが青、customが白。
systemのフォアグラウンド画像指定は効かない。
customの方が字が大きい。

Highlighted

左がsystem、右がcustom
上から、文字のみ、フォアグラウンド画像指定で文字なし。バックグラウンド画像指定で文字あり。

systemは文字は白方向の補正、画像は白方向の補正。
customは文字が変わらず。画像は黒方向の補正。

Disabled

左がsystem、右がcustom
上から、文字のみ、フォアグラウンド画像指定で文字なし。バックグラウンド画像指定で文字あり。

systemの文字が灰色に。フォアグラウンド画像が灰色に。
customは画像が白方向に補正。

Selected

左がsystem、右がcustom
上から、文字のみ、フォアグラウンド画像指定で文字なし。バックグラウンド画像指定で文字あり。

systemは、文字のみの時は周りに青。フォアグラウンドのみの場合は画像の周りに青。文字の色は白（orうすーい灰色）に
customは変わらず。

終わりに

hightlightedなどを調べるのになんで画像の指定がnormalなのかという点が気になるかもしれません。normalの画像だけ指定したときの他のstateのデフォルトの挙動を調べることがこの検証の趣旨でございます。
バックグラウンド画像を指定して、ハイライトで白くしたいならsystemでも結構使える。

import UIKit

class ViewController: UIViewController {

    let scrollView = UIScrollView()
    let contentView = UIView()

    var systems: [UIButton] = []
    var customs: [UIButton] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        view.backgroundColor = UIColor(white: 0.9, alpha: 1.0)

        view.addSubview(scrollView)
        scrollView.addSubview(contentView)

        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        scrollView.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.rightAnchor).isActive = true

        contentView.translatesAutoresizingMaskIntoConstraints = false
        contentView.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor).isActive = true
        contentView.heightAnchor.constraint(equalToConstant: 3000.0).isActive = true
        contentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
        contentView.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
        contentView.rightAnchor.constraint(equalTo: scrollView.rightAnchor).isActive = true

        for i in 0..<4 {
            for j in 0..<3 {
                let system = UIButton(type: .system)
                let custom = UIButton(type: .custom)
                systems.append(system)
                customs.append(custom)

                var title = ""
                switch i {
                    case 0:
                        title = "Normal"
                    case 1:
                        title = "HighLighted"
                        system.isHighlighted = true
                        custom.isHighlighted = true
                    case 2:
                        title = "Disabled"
                        system.isEnabled = false
                        custom.isEnabled = false
                    case 3:
                        title = "Selected"
                        system.isSelected = true
                        custom.isSelected = true
                    default:
                        break
                }

                switch j {
                    case 0:
                        system.setTitle(title, for: .normal)
                        custom.setTitle(title, for: .normal)
                    case 1:
                        system.setImage(UIImage(named: "backgroundImage"), for: .normal)
                        custom.setImage(UIImage(named: "backgroundImage"), for: .normal)
                    case 2:
                        system.setBackgroundImage(UIImage(named: "backgroundImage"), for: .normal)
                        custom.setBackgroundImage(UIImage(named: "backgroundImage"), for: .normal)
                        system.setTitle(title, for: .normal)
                        custom.setTitle(title, for: .normal)
                    default:
                        break
                }
            }
        }

        let w: CGFloat = 140.0
        let h: CGFloat = 60.0

        var y = contentView.topAnchor

        for b in systems {
            contentView.addSubview(b)
            b.translatesAutoresizingMaskIntoConstraints = false
            b.widthAnchor.constraint(equalToConstant: w).isActive = true
            b.heightAnchor.constraint(equalToConstant: h).isActive = true
            b.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: -80.0).isActive = true
            b.topAnchor.constraint(equalTo: y, constant: 40.0).isActive = true
            y = b.bottomAnchor
        }

        y = contentView.topAnchor

        for b in customs {
            contentView.addSubview(b)
            b.translatesAutoresizingMaskIntoConstraints = false
            b.widthAnchor.constraint(equalToConstant: w).isActive = true
            b.heightAnchor.constraint(equalToConstant: h).isActive = true
            b.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 80.0).isActive = true
            b.topAnchor.constraint(equalTo: y, constant: 40.0).isActive = true
            y = b.bottomAnchor
        }
    }
}