[Swift/Clone] 야놀자 TabBar 따라해보기

야놀자 어플의 탭바는 항상 흥미로웠기 때문에 꼭 한번 구현해보고 싶었었다.

꺾여있는 탭바와 4개의 아이템으로 구성되어 있고

가운데에는 애니메이션이 있는 버튼이 있다.

 

 

결과 화면

 

 

꺾인 탭바와 아이템들은 다른 글에서 다뤄봤기 때문에 설명을 생략하겠다.

 

 

먼저 버튼에 gif를 넣기 위해 Gifu라는 라이브러리를 사용하였다.

라이브러리를 추가하고 아래와 같은 코드로 버튼을 생성한다.

func makeButton() {
    let button = CustomButton(type: .custom) // 커스텀 버튼
    button.frame = CGRect(x: 167, y: -10, width: 60, height: 60) // 위치와 크기

    // gif를 설정해주고 버튼에 서브뷰로 추가
    let gifImageView = GIFImageView(frame: CGRect(x: 0, y: 0, width: 60, height: 60))
    gifImageView.animate(withGIFNamed: "ya.gif")
    button.addSubview(gifImageView)

    // 버튼에 액션 추가
    button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

    // 탭바 위에 버튼 추가
    if let tabBar = self.tabBarController?.tabBar {
        tabBar.addSubview(button)
    }
}

@objc func buttonTapped() {
    print("touch")
}

위 코드를 통해 gif가 적용된 버튼이 탭바 위에 추가된다.

 

 

그리고 ya버튼을 누를 때 모션이 있는데 버튼을 커스텀하여 구성하였다.

class CustomButton: UIButton {
    // 버튼을 터치할 때 이미지의 축소 비율
    private let shrinkScale: CGFloat = 0.8

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupButton()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupButton()
    }

    private func setupButton() {
        // 버튼의 이미지가 터치되었을 때의 변화를 비활성화
        adjustsImageWhenHighlighted = false
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        // 버튼 이미지 축소
        UIView.animate(withDuration: 0.1) {
            self.transform = CGAffineTransform(scaleX: self.shrinkScale, y: self.shrinkScale)
        }
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        // 버튼 이미지 원래 크기로 복구
        UIView.animate(withDuration: 0.1) {
            self.transform = .identity
        }
    }

    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesCancelled(touches, with: event)
        // 버튼 이미지 원래 크기로 복구
        UIView.animate(withDuration: 0.1) {
            self.transform = .identity
        }
    }
}

UIButton의 함수들을 재정의하여 버튼을 누를 때 크기를 변화시키는 귀여운 효과를 부여했다.

 

 

여기까지 야놀자 어플의 탭바를 구현해 보았는데
코드는 별로 없지만 새로운 기술들을 공부하고 적용시키는데 조금 애를 먹었던 것 같다^^

시중의 어플들을 살펴보면 구현해 보고 싶은 것들이 산더미 같은데

앞으로 차근차근 구현해 보려고 한다.

끝!!