[iOS - swift] UI 컴포넌트 - Rounded shadow Button (라운드 그림자 버튼)

round + 그림자 + 버튼

BaseButton 정의

• configure()에는 커스텀 버튼에 기본적으로 실행될 레이아웃 구성
• bind()에는 커스텀 버튼에 특정 데이터에 대한 UI 구성

class BaseButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)

        configure()
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func configure() {}
    func bind() {}
}

RoundedShadowButton 구현

• configure() 구현
  • button이 가지고 있는 프로퍼티인 imageEdgeInsets 사용

classs RoundedShadowButton: BaseButton {
    var isBorderStyle = true {
        didSet { bind() }
    }
    
    override func configure() {
        super.configure()
        
        backgroundColor = .white
        setTitleColor(.black, for: .normal)
        titleLabel?.font = .systemFont(ofSize: 14, weight: .bold)
        imageEdgeInsets = UIEdgeInsets(top: 0.0, left: -4.0, bottom: 0.0, right: 0.0) /// 이미지가 title에 바짝 붙어있기 때문에 left inset -4.0 값 부여
    }
}

left inset이 -4.0	left inset이 0

• bind() 구현
  • layer의 스타일 결정
  • layer.shadow의 스타일 결정
  • contentEdgeInsets 프로퍼티에 inset값을 주어 스타일 결정

bind() {
	super.bind()
    
    if isBorderStyle {
    
    	layer.cornerRadius = 13.0
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.systemGray2.cgColor
        
    	layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 3.0, height: 3.0) /// 그림자와 해당 View와의 거리 (width는 x좌표, height는 y좌표)
        layer.shadowOpacity = 0.1
        layer.shadowRadius = 3.0 /// 그림자의 크기
        
        contentEdgeInsets = UIEdgeInsets(top: 4.0, left: 16.0, bottom: 4.0, right: 19.0)
    } else {
    	layer.cornerRadius = 0.0
        layer.borderWidth = 0.0
        layer.shadowOpacity = 0.0
        
        contentEdgeInsets = UIEdgeInsets(top: 4.0, left: 4.0, bottom: 4.0, right: 8.0)
    }
}

• 전체 코드

class RoundedShadowButton: BaseButton {
    var isBorderStyle = true {
        didSet { bind() }
    }

    override func configure() {
        super.configure()

        backgroundColor = .white
        setTitleColor(.black, for: .normal)
        titleLabel?.font = .systemFont(ofSize: 14.0, weight: .bold)
        imageEdgeInsets = UIEdgeInsets(top: 0.0, left: -4.0, bottom: 0.0, right: 0.0)
    }

    override func bind() {
        super.bind()

        if isBorderStyle {
            layer.cornerRadius = 13.0
            layer.borderWidth = 1.0
            layer.borderColor = UIColor.systemGray2.cgColor

            layer.shadowColor = UIColor.black.cgColor
            layer.shadowOffset = CGSize(width: 3.0, height: 3.0) /// 그림자와 해당 view와의 거리 (width는 x좌표, height는 y좌표)
            layer.shadowOpacity = 0.1 /// 그림자의 불투명도
            layer.shadowRadius = 3.0 /// 그림자의 크기

            contentEdgeInsets = UIEdgeInsets(top: 4.0, left: 16.0, bottom: 4.0, right: 19.0)
        } else {
            layer.cornerRadius = 0.0
            layer.borderWidth = 0.0
            layer.shadowOpacity = 0.0

            contentEdgeInsets = UIEdgeInsets(top: 4.0, left: 4.0, bottom: 4.0, right: 8.0)
        }
    }
}

사용하는 쪽

class ViewController: UIViewController {

    lazy var roundedShadowButton: RoundedShadowButton = {
        let button = RoundedShadowButton()

        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        configure()
    }

    private func configure() {
        roundedShadowButton.isBorderStyle = true
        roundedShadowButton.setTitle("커스텀 버튼", for: .normal)
        roundedShadowButton.setTitle("선택된 버튼", for: .selected)
        roundedShadowButton.setImage(#imageLiteral(resourceName: "favoriteCompanyOff"), for: .normal)
        roundedShadowButton.setImage(#imageLiteral(resourceName: "favoriteCompanyOn"), for: .selected)

        view.addSubview(roundedShadowButton)
        roundedShadowButton.snp.makeConstraints { make in
            make.center.equalToSuperview()
        }
    }
}

cf) title 왼쪽, 오른쪽 패딩 주는 방법

• 양쪽padding 총합 값 정의

let titleSidePadding: CGFloat = 10.0

• titleRect에서 패딩 설정

    override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
        super.titleRect(forContentRect: contentRect)

        let titleOneSidePadding = titleSidePadding / 2
        return contentRect.inset(by: UIEdgeInsets(top: 0, left: titleOneSidePadding, bottom: 0, right: titleOneSidePadding))
    }

before	after

• padding으로 인하여 title이 잘리는 현상을 막기위해 intrinsicContentSize 값 변경
  • 현재 intrinsicContentSize구하는 방법: super.intrinsicContentSize로 접근

    override var intrinsicContentSize: CGSize {
        let currentIntrinsicContentWidth = super.intrinsicContentSize.width
        let currentIntrinsicContentHeight = super.intrinsicContentSize.height

        return CGSize(width: currentIntrinsicContentWidth + titleSidePadding, height: currentIntrinsicContentHeight)
    }

결과

* source code: https://github.com/JK0369/RoundedShadowButton