Floating Button

swift 에서 간단한 floating button 만들기 

floating button개발중 기록을 위해 남기기로 한다.

 

 

1. floating button 에 사용할 아이콘 배치 

    > stack view를 사용하여 아이콘 배치 후 menu를 통해서 보여지는 버튼들은 hidden 

 

    ** 버튼에 이미지를 넣는경우 이미지사이즈가 버튼영역과 맞지 않는 경우

        > assets에서 넣고자하는 이미지 선택 후  Image Set > Render As 에서 Default 를 Original Image로 변경한다.

2. 버튼 이벤트

    2-1. Menu Button 회전       

	@IBOutlet weak var floatingHomeButton: UIButton!
    @IBOutlet weak var floatingQrcodeButton: UIButton!
    
    lazy var floatingButtons: [UIButton] = [self.floatingHomeButton, self.floatingQrcodeButton]
    var isFloatingHidden: Bool = false
    
    ...
    
	// floating menu button
    @IBAction func floatingMenuButtonTouched(_ sender: UIButton) {
    	// 탭했을때 이미지 변경
        let changeImage = isFloatingHidden ? UIImage(named: "floating_menu") : UIImage(named: "floating_close")
        // 탭 했을 경우 90도 회전
        let rotation = isFloatingHidden ? CGAffineTransform.identity : CGAffineTransform(rotationAngle: .pi - (.pi / 2))
        
        UIView.animate(withDuration: 0.3) {
            sender.setImage(changeImage, for: .normal)
            // 버튼의 이미지만 회전시키기 위해서 imageView추가 (그림자 고정)
            sender.imageView?.transform = rotation
            
        }
        isFloatingHidden.toggle()
    }

 

    2-2. 숨겨진 아이콘 노출

    // floating buttons show/hide
    func floatingButtonOpenEvent() {
        if isFloatingHidden {
        	// close시 버튼들의 역방향으로 애니메이션 이벤트 추가 및 숨김
            floatingButtons.reversed().forEach { button in
                UIView.animate(withDuration: 0.3) {
                    button.isHidden = true
                    self.view.layoutIfNeeded()
                }
                
            }
        } else {
        	// open시 아이콘 노출
            floatingButtons.forEach { [weak self] button in
                UIView.animate(withDuration: 0.3) {
                    button.isHidden = false
                    button.alpha = 0
                    
                    UIView.animate(withDuration: 0.3) {
                        button.alpha = 1
                        self?.view.layoutIfNeeded()
                    }
                }
            }
        }
    }