[iOS] 클릭시 버튼의 이미지가 회전하는 버튼 구현 / 버튼 재사용하기

iOS 입문자의 공부기록 포스팅 입니다. 정확하지 않은 내용이 있을 수 있으므로 보시면 댓글로 알려주세요 :)

해당 게시글은 인프런 <iOS앱 진짜 개발자 되기> 강좌를 보고 이해한 토대로 작성된 글입니다.

 

 

 

버튼을 눌렀을때 이미지가 회전하는 버튼을 만들어보자!

버튼의 이미지가 움직이면서 배경색도 바뀌게 되는 예시로 진행해 보겠습니다.

 

 

 

우선 알아야할 내용은 기본적인 버튼에는 이미지를 포함하고 있습니다. 위 사진에서 맨 아래쪽을 보면 Image 라는 속성이 따로 있어서 설정해주면 아래 사진처럼 버튼에 내가 설정한 이미지가 보이게 됩니다.

기본적으로 이미지가 아무것도 설정되어 있지 않아 몰랐던 사실이네요...

기본적으로 이미지가 글씨의 왼쪽에 추가됩니다.

 

버튼을 누르면 이미지가 돌아가는 설정은 기본적으로 없기 때문에 클래스를 작성해 해당 기능을 가진 버튼 클래스를 만들어주고 이 클래스를 여러번 이용해 버튼을 사용할 수 있게 해주려고 합니다.

 

 

 

먼저 UIButton 을 상속하면서 내가 만들고자 하는 버튼 클래스를 새로 만들어줍니다.

enum RotateType {
    case up
    case down
}

class RotateButton: UIButton {
    // 해당 버튼을 코드로 생성했을때 실행됨
    init() {
        super.init(frame: .zero)
        configure()
    }
    
    // interface builder(storyboard or xib) 에서 생성하고 RotateButton 클래스를 연결한 버튼은 해당 init 을 통해 호출됨
    // 여기에도 configure 함수를 호출해 주어야 함
    // super.init(frame: .zero) 코드 역시 필요 - 에러 해결
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configure()
    }
    
    // isUP 값이 바뀔 때 didSet 실행
    var isUP = RotateType.down {
        didSet {
            changeDesign()
        }
    }
    
    // configure 함수를 한번 호출해야 버튼 클릭의 기능이 작동함
    // init 할때 자동으로 한번 실행되게 해야함
    func configure() {
        self.addTarget(self, action: #selector(selectButton), for: .touchUpInside)
    }
    
    @objc func selectButton() {
        if isUP == .down {
            isUP = .up
        }
        else {
            isUP = .down
        }
    }
    
    // 이미지를 회전시키는 함수
    func changeDesign() {
        // 이미지 회전하는 부분에 애니메이션 넣음
        UIView.animate(withDuration: 0.25) {
            if self.isUP == .up {
                // 버튼에는 기본적으로 이미지가 포함되어 있음
                // 해당 이미지를 180도 회전
                self.imageView?.transform = CGAffineTransform(rotationAngle: .pi)
                //배경 투명화
                self.backgroundColor = self.backgroundColor?.withAlphaComponent(0.3)
            }
            else {
                // 이미지 회전을 원래대로 초기화
                self.imageView?.transform = .identity
                // 배경 원래대로 초기화
                self.backgroundColor = self.backgroundColor?.withAlphaComponent(1)
            }
        }
    }
}

 

 

위 버튼 클래스를 이용하여 두 가지 방법으로 버튼을 생성할 수 있습니다.

 

다만 위에서 유의깊게 봐야 할 부분이 있는데 바로 init() 과 required init?(coder: NSCoder) 입니다.

해당 부분을 추가해 주지 않으면 에러가 발생합니다.

위와 관련된 내용은 다음에 올릴 게시글에 자세하게 기재할 예정입니다.

 

 

첫번째 : code로 직접 버튼 생성

해당 방법은 버튼을 생성해주고 오토레이아웃과 관련된 코드를 직접 작성해 버튼을 뷰에 추가해주는 방식입니다.

override func viewDidLoad() {
        super.viewDidLoad()
        makeCustomButton()
    }
    
    // 커스텀 버튼을 코드로서 생성하는 함수
    func makeCustomButton() {
        var myButton = RotateButton()
        self.view.addSubview(myButton)
        
        // autolayer 설정을 하기 위한 설정
        myButton.translatesAutoresizingMaskIntoConstraints = false
        
        // x, y 축 기준 설정
        myButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        myButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        
        // 크기 설정
        myButton.widthAnchor.constraint(equalToConstant: 100)
        myButton.heightAnchor.constraint(equalToConstant: 40)
        
        // 배경설정
        myButton.backgroundColor = UIColor.black
        // 버튼 글씨 설정
        myButton.setTitle("my custom button", for: .normal)
        // 버튼 이미지 설정
        myButton.setImage(UIImage(systemName: "arrow.down"), for: .normal)
    }

 

해당 방식은 디자인 값이 모두 주어졌을때 입력만 하면 되어 편하다는 장점이 있을 것 같네요! 

 

뷰에 아무것도 없다가 실행하면 오른쪽 사진처럼 버튼이 추가되네요

 

 

두번째 : Interface Builder(storyboard, xib) 를 통한 버튼 생성

해당 방법은 첫번째 방법처럼 버튼을 생성하는 코드를 치지 않고 인터페이스 빌더로 버튼을 생성하는 방식입니다.

 

 

먼저 storyboard 나 xib 에 기본적인 버튼을 하나 생성해줍니다

 

 

이미지가 돌아가는 모습과 배경색이 변화하는 모습을 확인하기 위해 임시  이미지와 배경색을 지정하고

 

 

제일 중요!! 해당 버튼에 아까 전에 만들었던 버튼 클래스를 연결해 줍니다

이렇게 연결해두면 IBAction 이라던지 IBOutlet 등을 따로 연결해 주지 않더라도 설계했던 클래스 RotateButton 의 로직대로 실행됩니다

넘 편하죠..

 

그렇게 완성된 버튼 클래스 재사용을 통한 버튼 이미지 돌리기 입니다~