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

はじめに

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

Animation Button pic.twitter.com/fbZQvRXVjV

— Moto (@Moto_0124) May 18, 2019

実装

ViewController

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

Button

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

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

SourceCode

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()
	}
}

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を勉強して作っていきたいと思います