[Swift] Round Button (Circle button) / Border View / 자간 (letter spaceing, NSKernAttributeName)

이 글은 본 블러그(destiny738,tistory.com)의 관리자인 Cloud Travel이 작성하였으며, 이후 이익창출에 사용될 수도 있는 글입니다. 본 글의 저작권 역시 본 블러그의 관리자가 가지고 있습니다. 본 글을 무단 복제, 사용, 인용, 변경 등은 사전에 블러그 관리자에게 문의 바랍니다. 이를 어길 경우 법적제제를 받거나 형사고발을 당할 수 있으니 주의하시기 바랍니다. Contact : create738@bucketplace.net / create738@naver.com

1. 여는글

 황금 일요일의 두번째 Swift 관련 글입니다. 이번 글에서는 뷰에 몇몇 값을 적용하는 방법에 대해서 알아보려고 합니다.

 끝을 둥글둥글하게 한 버튼(round button), 뷰에 테두리(border)를 적용하는 방법,  텍스트 뷰에서 자간(letter-spacing)을 적용하는 법에대해서 보겠습니다.

2. round button

 

 첫번째로 버튼을 둥글둥글하게 하는 방법을 알아보도록 합시다. button을 둥글둥글하게 하는 방법은 간단합니다. keyPath에서 정의해도 잘움직이고요! 버튼을 Storyboard에 하나 생성을 한다음에 keyPath를 아래와 같이 설정해봅시다.

 

 layer.cornerRadius는 얼마만큼 둥글둥글하게 할지를 정하는 부분입니다. 

 layer.masksToBounds는 생성된 뷰보다 큰 경우 크기(Bounds)에 맞춰서 삭제하는 역할을 합니다. 

 Storyboard에 버튼이 변화가 없어도 당황해하지마세요. keyPath에 정의된 값은 컴파일시에 적용되기 때문에 Storyboard에 변화가 없는 것입니다.

 Round button을 만들때 주의할 점이 있다면, 이미지를 Network에서 불러와서 사용하는 경우입니다. Network에서 받아온 이미지를 round해서 보여주려면 파란 이미지만 나오는 현상이 있습니다. 이를 방지하기 위해서는 Button의 Type을 System에서 Custom으로 변경해줘야 합니다.

 

 

3. view border 

 

 

 다음 단계로는 view에 border를 넣는 방법을 알아보도록 합시다. border값은 keyPath로 정의하면 적용이 되지가 않습니다. borderWidth는 keyPath에 정의해도 적용이 되는데 borderColor는 적용이 안됩니다. 이렇게 애매하게 적용을 하면 보기가 힘들기 때문에 border는 소스코드로 정의 하는 것이 좋습니다.

 

 버튼을 예로 들어서 border를 적용하는 값은 아래와 같습니다.

button.layer.borderColor = UIColor(red: 90/255.0, green: 200/255.0, blue: 251/255.0, alpha: 1.0).CGColor
button.layer.borderWidth = 2

 layer.borderWidth는 얼마만큼의 두껍게 테두리를 줄 것인가를 설정합니다.

 layer.borderColor는 어떤 색으로 테두리를 색칠 할 것인가를 설정합니다.

  

 이렇게하면 4방향에 border가 생성되는 것을 볼 수 있습니다. 그렇다면 한쪽 방향에만 boarder값을 적용하고 싶으면 어떻게 해야할가요?

 

 방법은 border를 기존 뷰에 border가 그려진 layer를 입히는 방식입니다. 예를들어 특정뷰의 아래에 선을 긋는 방법은 아래와 같습니다.

var border = CALayer()
var width = CGFloat(2.0)
border.borderColor = UIColor(red: 90/255.0, green: 200/255.0, blue: 251/255.0, alpha: 1.0).CGColor
border.frame = CGRect(x: 0, y: button.frame.size.height - width, width:  button.frame.size.width, height: button.frame.size.height)
border.borderWidth = width 

button.layer.addSublayer(border)
button.layer.masksToBounds = true

 소스코드에서 만들어주고 계산(?)해주는 번거로움이 있지만, 비교적 손쉽게 적용이 가능합니다.

4. 자간, letter spacing / NSKernAttributeName

 

 iOS 시스템에서는 특정 부분부터 부분, 또는 특정 단어에 대해서 속성을 적용하기 때문에 텍스트를 반드시 먼저 입력해주고 변경을 가해줘야합니다. 그렇기 때문에 컴파일시보다 실행시에 적용되는 속성이 많습니다. 자간 설정 또한 그렇습니다.

 그렇다면 자간 설정은 어떻게 해줄가요? css나 android에서는 간편하게 자간에 대한 설정이 가능합니다. iOS에서는 kerning value라고 하며, 위에서 말했듯이 실행시 텍스트를 작성한뒤에 설정을 해줘야 합니다. 자간을 일일이 설정하기 힘들기 때문에 extension을 이용하여 글자를 출력하는 모든 것들에 함수를 적용해주면 됩니다. 

 1) UILabel

extension UILabel {
    func kern(kerningValue:CGFloat) {
        self.attributedText =  NSAttributedString(string: self.text ?? "", attributes: [NSKernAttributeName:kerningValue, NSFontAttributeName:font, NSForegroundColorAttributeName:self.textColor])
    }
}

 2) TextView

extension UITextView {
    func kern(kerningValue:CGFloat) {
        self.attributedText =  NSAttributedString(string: self.text ?? "", attributes: [NSKernAttributeName:kerningValue, NSFontAttributeName:font, NSForegroundColorAttributeName:self.textColor])
    }
}

3) UIButton

extension UIButton {
    func kern(kerningValue:CGFloat) {
        let attributedText =  NSAttributedString(string: self.titleLabel!.text!, attributes: [NSKernAttributeName:kerningValue, NSFontAttributeName:self.titleLabel!.font, NSForegroundColorAttributeName:self.titleLabel!.textColor])
        self.setAttributedTitle(attributedText, forState: UIControlState.Normal)
    }
}

 사용법은 간단합니다. 

 

 1) 각각 컴포넌트에 텍스트 값을 적용한다.

 2) 컴포넌트.kern(자간) 함수를 호출해주면 됩니다. 

5. 마치는 글

 글자를 표현하는 방식에는 자간이외의 다양한 속성들이 많습니다. 이를 하나의 함수로 합쳐서 사용하는 것이 좋습니다. 왜냐하면, 특정 Attribute를 추가하고 다른 Attribute를 추가할때 덮어쓰기가되어서 기존의 속성이 사라질때가 있기때문입니다. 예를 들어 자간을 설정하는 함수에서 마지막에 색상을 다시 지정하는 부분이 있습니다. 이는 속성이 덮어씌어지면서 사라지는 경우가 있기 때문입니다. 줄간도 위와같이 함수를 만들어서 관리가 가능합니다.

 머릿속에 있는 것을 정리하는 것은 역시 어려운 것 같습니다. 마음은 이미 다정리하고 남을 시간인데 2개 했는데 벌써 4시내요... 오늘안에 다할 수 있나? 라는 의문을 품으면서 잠시 쉬고 다시 작성을 시작하려고 합니다.