2018년 10월 7일 일요일

Xcode에서 이미지 없이 둥근 버튼, 원 버튼 디자인 적용 하기

1. 다음과 같은 라운드 버튼을 이미지 없이





zeplin 오른쪽 사이드에 사각형 이라 표시되고 전혀 image asset에 대한 정보가 없다.
디자이너는 그냥 파란색 도형을 디자인 한것이다.

로그인 버튼은 사각형이며 파란색 도형인데 이미지가 없다?

이러한 경우는

UIVew를 상속 받은 UIButton에서 conerRadius를 설정 하여 처리 하면 된다.
결국 코딩으로 해야 한다.


2. 이번에는 속이 투명한 완전 원형 버튼






width / height 값이 동일하게 그리고 conerRadius를 width/2 로 설정 하면 원이 된다.
결국 코딩이다.

viewDidLoad에 코딩으로 하지 않고 스토리보드 인터페이스 빌더에서 속성으로 처리 하고 싶다면?


import UIKit

extension UIView {
    
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
    
    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }
    
    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }

}


위와 같이 extension을 작성 하면

@IBInspectable 덕에 IB에 표시된다.



extension은 @IBDesignable이 적용이 되지 않아 storyboard 랜더링은 그대로 사각형이지만 런타임에서는 훌륭한 타원으로 표출 된다.


2번 원 버튼의 경우 배경색을 투명으로 하고 border with  와 border color 를 적용 하고 corner radius를 width에 1/2로 적용 하면 원 버튼이 표현 가능 하다.





















Xcode storyboard 리팩토링

Main.storyboard에 ViewController를 계속해서 디자인 하다 보면
성능이 별로 좋지 않은 mac에서는 랜더링 속도가 현저하게 떨어진다.

ViewController에 image등을 올리는 작업이 늘어 나면 늘어 날 수록 더이상 편집 자체가
너무 느려 하기 어려워 질 수도 있다.


이렇게 하나의 Main.storyboard에 모든 ViewController를 때려 박지 않고
여러개의 storyboard 파일로 나누어 segue를 연결 할 수 있다.


스토리보드 리팩토링 방법

1. 새로운 스토리 보드 파일을 추가 한다.
2. 기존 Main.storyboard 파일과 새로 만든 스토리 보드 파일을 보기 좋게 그룹으로 생성 하여 추가 한다.
3. Main.storyboard 파일에서 일부 연결된 ViewController들을 선택 하여 Cmd + X로 자른다.
4. 새로 추가된 스토리 보드 파일에 붙여 넣기를 한다.
5. 새로 추가된 스토리 보드에 첫번째 ViewController를 is Initial View Controller로 체크 한다.
6. Main.storyboard 파일에서 새로 추가된 스토리 보드와 segue를 연결 한다.





Main.storyboard를 간단하게 바꾸고 segue에 연결은 스토리 보드 레퍼런스로 한다.


Xcode 10에서는 라이브러리 화면이 팝업으로 나오게 되어 있다. Cmd + Shift + L




두번째 항목이 스토리 보드 레퍼런스 이다.

이런한 과정을 통해 프로젝트 성격에 맡도록 storyboard 파일을 나누면
각각의 스토리 보드에서 적은수의 View Controller를 처리 하도록 하여 Xcode에서 보다 쾌적 하게 작업 할 수 있다.