UIControl を使ったAnimationButtonを作ってみる

#はじめに
UIControlを勉強することがありましたので、復習を兼ねて
こんな感じのAnimationするButtonを作ってみます


<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Animation Button <a href="https://t.co/fbZQvRXVjV">pic.twitter.com/fbZQvRXVjV</a></p>&mdash; Moto (@Moto_0124) <a href="https://twitter.com/Moto_0124/status/1129686794700640256?ref_src=twsrc%5Etfw">May 18, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#実装

###ViewController
Buttonを設置してConstraintsを設置していきます。
今回はleading,trailing,topに意味はなく,Heightだけ設置したいAnimationButtonの高さにして、ButtonHeight,ButtonをそれぞれViewControllerに接続します


![スクリーンショット 2019-05-19 1.16.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/f0beb0f5-9c55-cc4f-ccc8-9e6f87968a9e.png)


###Button

同じようにConstraintsを設置していきます。
こちらもConstraintsは設置しなくても構わないのですが、Buttonに載せる部品だけは指定してあげます。
出ないとButtonと一緒に移動せず、そのままalphaが減少するだけになってしまいます

ButtonのOutletは押したのをButtonで受け取って、ViewControllerを操作するためViewではなく、FileOwnerに接続します

![スクリーンショット 2019-05-19 1.47.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/354f084d-46d4-04ec-c75d-7f9585aaf1b3.png)


###SourceCode

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
	
	@IBOutlet weak var button: AnimationButton!{
		didSet{
			button.addTarget(self, action: #selector(buttonTapped(_:)), for: .primaryActionTriggered)
			button.backgroundColor = .gray
		}
	}
	
	@IBOutlet weak var buttonHeightConstraint: NSLayoutConstraint!
	
	override func viewDidLoad() {
		super.viewDidLoad()
		// Do any additional setup after loading the view, typically from a nib.
	}

	@IBAction func buttonTapped(_ sender: AnimationButton) {
		UIView.animate(withDuration: 3.0, animations: {
			self.updateConstraint()
		})
	}
	
	private func updateConstraint(){
		buttonHeightConstraint.constant =  button.hiddenSwitch.isSelected ? button.bounds.height + 100 : 50
		view.layoutIfNeeded()
	}
}

```

```swift:AnimationButton.swift
import UIKit

class AnimationButton: UIControl {
	
	@IBOutlet weak var hiddenSwitch: UIButton!{
		didSet{
			hiddenSwitch.setTitle("View Hidden Switch", for: .normal)
			hiddenSwitch.titleLabel?.font = UIFont.systemFont(ofSize: 18.0)
			hiddenSwitch.titleLabel?.adjustsFontSizeToFitWidth = true
		}
	}
	
	@IBOutlet weak var descritpionLabel: UILabel!
	
	public override init(frame: CGRect) {
		super.init(frame: frame)
		xibInit()
	}
	
	required public init?(coder aDecoder: NSCoder) {
		super.init(coder: aDecoder)
		xibInit()
	}
	
	private func xibInit(){
		guard let view = UINib(nibName: String(describing: type(of: self)), bundle: nil).instantiate(withOwner: self, options: nil).first as? UIView else{
			return
		}
		self.addSubview(view)
		self.translatesAutoresizingMaskIntoConstraints = false
		let constraints:[NSLayoutConstraint] = [
			self.topAnchor.constraint(equalTo: view.topAnchor),
			self.bottomAnchor.constraint(equalTo: view.bottomAnchor),
			self.leadingAnchor.constraint(equalTo: view.leadingAnchor),
			self.trailingAnchor.constraint(equalTo: view.trailingAnchor)
		]
		NSLayoutConstraint.activate(constraints)
		
		descritpionLabel.alpha = 0.0
	}
	
	@IBAction func buttonTouchUpInside(_ sender: UIButton) {
		hiddenSwitch.isSelected = !hiddenSwitch.isSelected
		hiddenSwitch.layoutIfNeeded()
		
		UIView.animate(withDuration: 3.0, animations: {
			if self.hiddenSwitch.isSelected{
				self.descritpionLabel.alpha = 1.0
			}else{
				self.descritpionLabel.alpha = 0.0
			}
		})
		sendActions(for: .primaryActionTriggered)
	}
}

```

`sendActions`を使って、ViewControllerで指定した`.primaryActionTriggered`のActionを呼び出します
そうすることにより、ButtonをViewControllerから操作できます


#まとめ



アプリやGitHubをみているとかっこいいUIComponentをよくみるので、自分でも少しずつこういった自作Componentを勉強して作っていきたいと思います