TabbarController 이용해서 Floating Button

사진(당근마켓 중)에서 표시 되어 있는 플로팅버튼을 구현하기 위해 애를 먹었다.

 

바보 같이 탭바컨트롤러 자체에 구현하지 않았고(되는지도 몰랐음... )

나는 처음에 "Home" 메뉴 화면에 uiview에 넣어주고 위치랑 크기 조절해줌.... 문제는 그러면 다른 메뉴 화면에서는 플로팅 버튼이 안뜸 당연함)

 

여기서 구현하면 모든 메뉴 화면에서 폴로팅 버튼을 구현

 

 TabbarController 해당 swift파일을 만들어주고 코드를 짜자!

 

[FloatingButton 띄우기]

class tabbarcontroller: UITabBarController{
	private let floatingButton: UIButton = {
	let button = UIButton(frame: CGRect(x: 0, y: 0, width: 60, height: 60))
    // 버튼 속성 추가
	return button
}()

[예시]

import UIKit

class ViewController: UITabBarController {

    // 플로팅 버튼
    private let floatingButton: UIButton = {
        let button = UIButton(frame: CGRect(x: 0, y: 0, width: 60, height: 60))
        
        button.backgroundColor = .systemPink
        
        // 아이콘 추가
        let image = UIImage(systemName: "plus", withConfiguration: UIImage.SymbolConfiguration(pointSize: 32, weight: .medium))
        button.setImage(image, for: .normal)    //선택되지도 하이라이트되지도 않은 상태
        button.tintColor = .white
        button.setTitleColor(.white, for: .normal)
        
        // 쉐도우 추가
        button.layer.shadowRadius = 10
        button.layer.shadowOpacity = 0.3
        
        // Corner radius
        // button.layer.masksToBounds = true    //이렇게 되면 쉐도우가 보이지 않는다
        button.layer.cornerRadius = 30
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(floatingButton)
        floatingButton.addTarget(self, action: #selector(didTapButton), for: .touchUpInside)
    }
    
    // 플로팅 버튼 자체의 레이아웃
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        floatingButton.frame = CGRect(x: view.frame.size.width-60-8, y: view.frame.size.height-60-80, width: 60, height: 60)
    }
	
    //버튼 눌렀을 때 액션
    @objc private func didTapButton() {
    
    	//alert창 띄우는 액션
        let alert = UIAlertController(title: "Add Something", message: "Floating button tapped", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "Dismiss", style: .cancel, handler: nil))
        present(alert, animated: true)
    }
}