[swift] 사용자 정의 뷰에 모양과 스타일 적용하기

14 Dec 2023

swift

iOS 앱을 개발할 때, 종종 기본 구성 요소의 외관을 변경해야 하는 경우가 있습니다. 사용자 정의 뷰에 모양과 스타일을 적용하는 방법을 알아보겠습니다.

1. 사용자 정의 뷰 만들기

먼저, 사용자 정의 뷰를 만듭니다. 예를 들어, 다음과 같이 원 모양의 뷰를 만들어보겠습니다.

import UIKit

class CircleView: UIView {
    override func draw(_ rect: CGRect) {
        let circlePath = UIBezierPath(ovalIn: rect)
        UIColor.blue.setFill()
        circlePath.fill()
    }
}

위의 코드는 CircleView 클래스를 정의하고, draw(_:) 메서드를 오버라이드하여 원 모양의 뷰를 그리는 내용을 포함하고 있습니다.

2. 모양과 스타일 적용하기

이제 만들어진 CircleView 클래스에 모양과 스타일을 적용할 수 있습니다. 예를 들어, 스토리보드에서 해당 뷰의 클래스를 CircleView로 설정하고, 다음과 같이 코드를 추가하여 테두리를 둥글게 만들고, 그림자와 경계선을 추가할 수 있습니다.

class CircleView: UIView {
    override func draw(_ rect: CGRect) {
        let circlePath = UIBezierPath(ovalIn: rect)
        UIColor.blue.setFill()
        circlePath.fill()
        
        layer.cornerRadius = frame.size.width / 2
        layer.shadowColor = UIColor.gray.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 3)
        layer.shadowOpacity = 0.8
        layer.shadowRadius = 4.0
        layer.borderWidth = 2.0
        layer.borderColor = UIColor.white.cgColor
    }
}

위의 코드에서 layer.cornerRadius, layer.shadowColor, layer.borderWidth 등을 설정하여 원 모양의 뷰에 테두리를 둥글게 만들고, 그림자와 경계선을 추가하였습니다.

결론

이제 사용자 정의 뷰에 원하는 모양과 스타일을 적용하는 방법을 알아보았습니다. 이를 응용하여 다양한 모양과 스타일을 가진 사용자 정의 뷰를 만들어보세요.

UIBezierPath 및 UIView를 참고하여 더 많은 정보를 얻을 수 있습니다.