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

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

- normal
- highlighted
- disabled
- selected

の4状態について

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

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

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

#Normal
![Normal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46631/0a378cfe-a377-e94d-98a6-2c20352e0f41.png)
左がsystem、右がcustom
上から、文字のみ、フォアグラウンド画像指定で文字なし。バックグラウンド画像指定で文字あり。

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


#Highlighted
![HighLighted.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46631/a95f403e-a14c-26d4-d619-9db5a41f80fa.png)
左がsystem、右がcustom
上から、文字のみ、フォアグラウンド画像指定で文字なし。バックグラウンド画像指定で文字あり。

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


#Disabled
![Disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46631/da9d240c-d196-60fa-c000-e2da3713b780.png)
左がsystem、右がcustom
上から、文字のみ、フォアグラウンド画像指定で文字なし。バックグラウンド画像指定で文字あり。

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





#Selected
![Selected.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46631/4155ae9d-bf74-3e37-9259-add24bed11a9.png)
左がsystem、右がcustom
上から、文字のみ、フォアグラウンド画像指定で文字なし。バックグラウンド画像指定で文字あり。

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

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

```swift
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
		}
	}
}
```