[iOS - swift] Floating Button (Hover 프레임워크)

* floating 의미: "떠다니는"

floating button: 떠있는 듯한 버튼

음영효과로 FloatingStyle 주는 방법

• UIView에 extension으로 아래 함수 추가

extension UIView {
    func setFloatingStyle() {
        setShadow(color: .black, alpha: 0.2, xPoint: 0, yPoint: 6, blur: 10, spread: 0)
    }

    func setShadow(color: UIColor = .black,
                   alpha: Float,
                   xPoint: CGFloat,
                   yPoint: CGFloat,
                   blur: CGFloat,
                   spread: CGFloat) {
        layer.shadowColor = color.cgColor
        layer.shadowOpacity = alpha
        layer.shadowOffset = CGSize(width: xPoint, height: yPoint)
        layer.shadowRadius = blur / 2.0
        if spread == 0 {
            layer.shadowPath = nil
        } else {
            let diffx = -spread
            let rect = layer.bounds.insetBy(dx: diffx, dy: diffx)
            layer.shadowPath = UIBezierPath(rect: rect).cgPath
        }

    }
}

• 사용

button.setFloatingStyle()

floating 스타일의 음영효과 적용 결과

Hover프레임워크

• 의존성

pod 'Hover'

• Hover 생성

    private func setupBtnFloating() {

        let hoverConfiguration = HoverConfiguration(
            image: UIImage(systemName: "plus"),
            color: .gradient(
                top: UIColor.lightGray,
                bottom: UIColor.lightGray
            ),
            size: 45,
            spacing: 16
        )

        let items = [
            HoverItem(title: "photo", image: UIImage(systemName: "photo")!) { [weak self] in
                print("photo tap event")
            },
            HoverItem(title: "switch", image: UIImage(systemName: "switch.2")!) { [weak self] in
                print("switch tap event")
            },
            HoverItem(title: "flash", image: UIImage(systemName: "bolt.fill")!) { [weak self] in
                print("flash tap event")
            }
            ]

        let hoverView = HoverView(with: hoverConfiguration, items: items)
        hoverView.setFloatingStyle()

        view.addSubview(hoverView)
        hoverView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate(
            [
                hoverView.topAnchor.constraint(equalTo: view.topAnchor),
                hoverView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
                hoverView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
                hoverView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
            ]
        )

    }

• 사용

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        setupBtnFloating()
    }