[UIButton] Button에 Corner Radius 와 Shadow 속성 추가하기Swift -1

iOS 개발 필수 언어인 Swift의 첫 포스팅으로 최근 새로운 버튼을 디자인을 적용하기 위해 노력했던 것을 적어보려고 합니다.

 

최근 앱을 개편하면서 많은 디자인이 추가되었고 그 중에서 버튼에게 다음과 같은 두가지 속성이 부여되었습니다.

1. 버튼의 테두리가 둥근 모서리여야한다.
2. 버튼의 테두리를 따라서 그림자가 나타나야 한다.

우선 일반적인 버튼을 생성하고 뷰에 그리는 코드는 다음과 같습니다.

import UIKit

class ViewController: UIViewController {
    
    let roundShadowButton : UIButton = {
        let aButton = UIButton()

        aButton.backgroundColor = .blue
        aButton.setTitle("둥근 버튼", for: .normal)
        aButton.setTitleColor(.white, for: .normal)
        aButton.translatesAutoresizingMaskIntoConstraints = false
        return aButton
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.view.backgroundColor = .white
        self.view.addSubview(roundShadowButton)
        
        print("View Controller View Did Load")
        
        NSLayoutConstraint.activate([
            
            self.roundShadowButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            self.roundShadowButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        ])
    }
}

(코드로 뷰를 그리는 것이 생소하신 분들도 있을 것입니다. 하지만 제가 뷰를 그리는 방식을 코드로 표현하는 것을 선호해서 그러니 그 점 감안해주시면 감사하겠습니다. 코드로 뷰를 그리는 방식에 대해서는 추후에 따로 포스팅하겠습니다.) 

 

파란색의 배경색을 가진 버튼에 하얀 글씨로 "둥근 버튼"이라고 쓰여진 버튼을 만들어서 뷰에 띄워봤습니다. 해당 코드를 실행시켜보면 다음과 같은 화면을 볼 수 있습니다.

기본적인 버튼이 나타났습니다. 하지만 버튼의 크기도 작고 색상도 영 맘에 들지가 않습니다. 버튼을 조금만 더 이쁘게 꾸며보겠습니다.

import UIKit

class ViewController: UIViewController {
    
    let roundShadowButton : UIButton = {
        let aButton = UIButton()
        //4fc775
        aButton.backgroundColor = UIColor(red: 0x4f/0xff, green: 0xc7/0xff, blue: 0x75/0xff, alpha: 1.0)
        aButton.setTitle("둥근 버튼", for: .normal)
        aButton.setTitleColor(.white, for: .normal)
        aButton.translatesAutoresizingMaskIntoConstraints = false
        return aButton
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.view.backgroundColor = .white
        self.view.addSubview(roundShadowButton)
        
        print("View Controller View Did Load")
        
        NSLayoutConstraint.activate([
            
            self.roundShadowButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            self.roundShadowButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            //AutoLayout 크기를 지정하는 Constraint
            self.roundShadowButton.widthAnchor.constraint(equalToConstant: 160),
            self.roundShadowButton.heightAnchor.constraint(equalToConstant: 120)
        ])
    }
}

버튼의 크기를 좀 더 키우고 색상도 조금 부드러운 색으로 바꿔봤습니다. 전보단 훨씬 보기 좋아보입니다.

이제 우리가 원하던대로 해당 버튼에 둥근 모서리 속성을 부여해보겠습니다. 사실 둥근 모서리를 부여하는 방법은 매우 쉽습니다. 코드의 상단부분에 버튼을 선언하고 속성을 부여하는 block안에 코드 한줄만 부여하면 됩니다.

 

aButton.layer.cornerRadius = (원하는 테두리의 휘어짐 정도 : CGFloat) //15

 

해당 부분을 적용하면 입력한 수치(Ex: 15)에 따라 이런 테두리를 얻을 수 있습니다.

각진 모서리보단 보기가 좋아?보인다.

이제 부드러운 모서리를 갖게 되었으니 그림자 속성만 더 부여하면 되겠습니다. 그림자 속성은 둥근 모서리와 달리 부여할 속성이 여러개입니다. 오늘은 간편하게 그림자를 부여하는 방법까지만 포스팅하고 다음 포스팅에서 해당 속성에 대한 디테일한 설명을 추가하겠습니다.

 

aButton.layer.shadowColor = UIColor.gray.cgColor
aButton.layer.shadowOpacity = 1.0
aButton.layer.shadowOffset = CGSize.zero
aButton.layer.shadowRadius = 6

 

해당 코드를 cornerRadius를 부여한 코드 밑에 작성하면 아래와 같은 화면을 얻을 수 있습니다.

그림자가 들어가니 입체감이 나타난다.

그림자를 부여하니 입체감이 더 살아나서 버튼이 좀 더 강조되는 효과를 볼 수 있습니다. 처음에 밋밋한 직사각형의 파란 버튼에 비해서 훨씬 보기 좋은 거 같습니다.

 

오늘의 포스팅은 여기까지 하겠습니다 다음 포스팅에서는 2가지 효과를 동시에 부여할 때 주의할 점과 해당 속성들을 좀 더 디테일하게 customize하는 방법으로 돌아오겠습니다.

 

감사합니다.

 

P.S : 잘못된 부분에 대해서는 언제나 피드백 및 비판을 환영합니다.