UIControl로 애니메이션 버튼 만들기

14086 단어 SwiftiOS

입문


UIControl을 배웠기 때문에 복습을 겸하고 있습니다.
이런 느낌의 애니메이션 Button을 만들어보도록 하겠습니다.
Animation Button pic.twitter.com/fbZQvRXVjV — Moto (@Moto_0124) May 18, 2019

실시


ViewController


설치 버튼을 사용하여 Constraints를 설치합니다.

이번 leading, trailing, top은 의미가 없습니다. Height의 애니메이션 Button 높이만 설정하고 Button Height, Button을 각각 ViewController에 연결하고 싶습니다.


Button


Constraints를 동일한 방식으로 설치합니다.

Constraints를 설치하지 않아도 되지만 Button의 부품만 지정합니다.

안 나오면 Button과 같이 움직이지 않고 알파만 줄일 거예요.

Button의 Outlet은 Button으로 누르는 것을 수신합니다. ViewController를 조작하기 위해 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 동작을 호출합니다.

이렇게 하면 ViewController에서 Button을 조작할 수 있습니다.

총결산


어플리케이션과 GitHub를 자주 보면 멋진 UIComponent를 볼 수 있기 때문에 저도 이런 자체 제작 Component를 조금씩 배워서 만들고 싶어요.

좋은 웹페이지 즐겨찾기