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

안녕하세요. 지난 포스트에서는 버튼에 간단한 둥근 모서리와 그림자를 적용하는 방법에 대해서 알려드렸습니다. 이번 포스트에서는 해당 코드들을 분석하고 좀 더 디테일하게 변화를 주는 방법에 대해서 알아보고자 합니다.

 

먼저 지난 시간까지 결과물을 다시 한번 확인할까요?

멋진? 버튼

일반적인 버튼보다 강조된 느낌을 주는 버튼을 완성했습니다. 딱 이정도로만 만족할 수 있다면 좋겠지만 만약 디자이너가 추가적으로 요구를 한다면 어떨까요?

 

• 네 방향의 모서리가 아닌 왼쪽 위와 오른쪽 아래에만 둥근모서리를 가지고 싶어요.
• 그림자에 방향이 4방향이 아닌 오른쪽 아래의 느낌이 나게 하고 싶어요.

이쁘고 좋은 앱을 만드는 것은 너무나도 어려운거 같습니다. 하지만 그렇다고 포기할 수는 없겠죠? 우선 지난번에 작성했던 코드를 먼저 살펴보겠습니다.

 

let roundShadowButton : UIButton = {

  let aButton = UIButton()

  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.layer.cornerRadius = 15
  aButton.layer.shadowColor = UIColor.gray.cgColor
  aButton.layer.shadowOpacity = 1.0
  aButton.layer.shadowOffset = CGSize.zero
  aButton.layer.shadowRadius = 6

  aButton.translatesAutoresizingMaskIntoConstraints = false
  return aButton
}()

우선 둥근모서리를 생성하는 부분인 cornerRadius을 살펴보면 CGFloat 값을 입력해야 합니다. 이 수치에 따라서 둥글게 되는 정도가 결정되는 것이죠. 만약 버튼을 아예 원으로 만들고 싶다면 해당 버튼 프레임의 높이나 너비의 값(높이와 너비가 같다는 가정하)에서 절반의 수치를 입력하면 됩니다.

aButton.layer.cornerRadius = (해당 버튼 사이즈의 절반) //60

다시 본론으로 돌아와서 해당 버튼의 둥근 모서리를 왼쪽 위와 오른쪽 아래만 적용하고 싶다면 어떻게 해야할까요? cornerRadius는 하나의 값이 4방향에 전부 적용되는데 말이죠. 그렇게 하고 싶을 땐 한 줄의 코드만 추가하면 됩니다.

aButton.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]

어쩌다 보니 나뭇잎과 유사한 모양이 되었는데 보기 나쁘진 않군요.

위의 코드를 다시 한번 보면 maskedCorner라는 속성에 값을 부여했는데 해당 내용은 내가 부여한 cornerRadius의 속성을 해당 layout 방향에만 적용하겠다 라는 이야기입니다. 저는 위에서 .layerMinXMinYCorner와 .layerMaxXMaxYCorner를 지정했기때문에 (0,0)과(n,n)을 방향을 지정했다고 생각하면 될 것같습니다.

 

자 우리의 디자이너가 요구한 사항을 한가지 충족했습니다.

그럼 이제 두번째 요구사항인 그림자의 방향을 전방향이 아닌 특정 방향으로 보여지도록 바꾸어 볼까요?

우선 위에서 설정한 shadow 속성들이 어떤 역활을 하는지 살펴보겠습니다.

 

shadowColor : 그림자 색상

shadowOffset : CGSize값을 사용하여 그림자를 이동시킨다.

shadowOpacity : 그림자 투명도

shadowRadius : 그림자 경계의 선명도

 

속성들을 살펴보니 우리에게 필요한 속성은 shadowOffset이라는 것을 알 수 있습니다. 우리는 CGSize.zero를 사용해 그림자를 이동시키지 않았기 때문에 그림자가 모든 방향으로 퍼져나갔습니다. 만약 그림자를 오른쪽 아래로 이동시키려면 어떻게 해야할까요?

aButton.layer.shadowOffset = CGSize(width: 3, height: 3)

해당 코드를 입력하면 가로방향으로 3만큼 세로방향으로 3만큼 그림자가 이동하기때문에 아래 그림과 같이 오른쪽 아래 부분의 그림자가 더 선명한 것을 볼 수 있습니다.

이렇게 디자이너의 요구를 충족시키는 버튼을 제작하게 되었습니다.

 

지금까지 한 내용은 UIButton에만 해당되는 것이 아닌 layer속성을 가진 UIView를 상속받는 UI 컴포넌트들이라면 모두 적용되는 내용입니다. 지금까지 긴글 읽어주셔서 감사합니다.

 

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