iOS에서 Floating 버튼 만들기

 

iOS에서 Floating 버튼 만들기

플로팅 버튼(Floating Button)은 화면의 특정 위치에 고정되어 언제든지 클릭할 수 있는 버튼입니다. 주로 사용자가 빠르게 액션을 실행할 수 있도록 하는 UI 요소입니다. 아래 예제에서는 iOS 앱에서 오른쪽 하단에 플로팅 버튼을 코드로 만드는 방법을 설명하겠습니다.

1. UIButton 생성 및 초기 설정

우선, UIButton을 생성하고 필요한 속성을 설정합니다. 이 버튼은 화면 오른쪽 하단에 고정되며, 사용자가 쉽게 접근할 수 있도록 둥근 모양으로 설정합니다.

import UIKit

class ViewController: UIViewController {
    
    // 플로팅 버튼 생성
    let floatingButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("+", for: .normal)  // 버튼의 제목 설정
        button.titleLabel?.font = UIFont.systemFont(ofSize: 24)  // 글씨 크기 설정
        button.setTitleColor(.white, for: .normal)  // 텍스트 색상
        button.backgroundColor = .systemBlue  // 버튼 배경 색상
        button.layer.cornerRadius = 30  // 둥근 버튼을 위한 코너 반경
        button.translatesAutoresizingMaskIntoConstraints = false  // 오토레이아웃 사용을 위해 false 설정
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 버튼을 뷰에 추가
        view.addSubview(floatingButton)
        
        // 플로팅 버튼 제약 조건 설정
        setupFloatingButton()
    }
    
    // 플로팅 버튼의 오토레이아웃 설정
    func setupFloatingButton() {
        NSLayoutConstraint.activate([
            floatingButton.widthAnchor.constraint(equalToConstant: 60),  // 버튼 너비
            floatingButton.heightAnchor.constraint(equalToConstant: 60),  // 버튼 높이
            floatingButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),  // 오른쪽 여백
            floatingButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20)  // 아래쪽 여백
        ])
    }
}
        

2. 설명

1. UIButton 생성: UIButton을 생성하고, 기본적인 속성(타이틀, 배경색, 코너 반경 등)을 설정합니다. 여기서는 플로팅 버튼이 둥근 형태로 보이도록 layer.cornerRadius를 버튼 높이의 절반으로 설정하여 둥글게 만듭니다.
2. translatesAutoresizingMaskIntoConstraints 설정: 오토레이아웃을 사용하여 제약 조건을 설정하기 위해 translatesAutoresizingMaskIntoConstraints를 false로 설정합니다.
3. 버튼 추가: view.addSubview(floatingButton)를 사용하여 버튼을 메인 뷰에 추가합니다.
4. 오토레이아웃 설정: NSLayoutConstraint.activate를 사용하여 버튼의 크기와 위치를 설정합니다.
   • widthAnchor, heightAnchor로 버튼의 크기를 각각 60pt로 고정.
   • trailingAnchor로 오른쪽 여백을 20pt로 설정.
   • bottomAnchor로 아래쪽 여백을 20pt로 설정하여 화면 하단에 위치시킵니다.

3. 버튼의 액션 추가

버튼에 클릭 이벤트를 추가하려면 addTarget 메서드를 사용합니다. 예를 들어, 버튼을 클릭했을 때 "버튼이 눌렸습니다"라는 메시지를 콘솔에 출력하는 코드를 추가할 수 있습니다.

override func viewDidLoad() {
    super.viewDidLoad()

    // 버튼을 뷰에 추가
    view.addSubview(floatingButton)
    
    // 플로팅 버튼 제약 조건 설정
    setupFloatingButton()

    // 버튼 클릭 액션 설정
    floatingButton.addTarget(self, action: #selector(floatingButtonTapped), for: .touchUpInside)
}

// 버튼 클릭 시 실행될 함수
@objc func floatingButtonTapped() {
    print("플로팅 버튼이 눌렸습니다.")
}
        

위 코드에서 @objc로 선언된 floatingButtonTapped 함수가 버튼 클릭 시 실행됩니다. addTarget 메서드를 통해 버튼이 눌렸을 때 해당 함수가 호출되도록 설정합니다.

4. 마무리

이렇게 iOS에서 플로팅 버튼을 코드로 쉽게 구현할 수 있습니다. 오토레이아웃을 사용하여 버튼의 크기와 위치를 동적으로 설정할 수 있으며, addTarget을 사용하여 버튼 클릭 이벤트를 처리할 수 있습니다. 플로팅 버튼은 사용자 경험을 향상시키는 중요한 UI 요소이므로 적절히 활용하여 편리한 인터페이스를 제공할 수 있습니다.