관리 메뉴

김종권의 iOS 앱 개발 알아가기

[iOS - SwiftUI] Gradients (Linear, Angular, Radial) 사용 방법 본문

iOS 기본 (SwiftUI)

[iOS - SwiftUI] Gradients (Linear, Angular, Radial) 사용 방법

jake-kim 2022. 10. 22. 22:11

목차) SwiftUI의 기본 - 목차 링크

Gradients (Linear, Angular, Radial)

이전 포스팅 글, Swift에서 알아본 CAGradientLayer와 개념은 동일하며, SwiftUI에서는 각 속성이 더 직관적인 이름으로 변경

  • axial(linear) -> Linear
  • radial(circle) -> Radial
  • conic(sweep) -> Angular

https://ios-development.tistory.com/935

LinearGradient

  • 요소
    • 색상 입력 - colors
    • 시작 지점 - startPoint
    • 종료 지점 - endPoint
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
@frozen public struct LinearGradient : ShapeStyle, View {
    public init(gradient: Gradient, startPoint: UnitPoint, endPoint: UnitPoint)
    public init(colors: [Color], startPoint: UnitPoint, endPoint: UnitPoint)
    public init(stops: [Gradient.Stop], startPoint: UnitPoint, endPoint: UnitPoint)
    public typealias Body
}
  • UnitPoint는 9가지의 지점

https://www.sagarunagar.com/Understanding-gradients-using-SwiftUI/

  • LinearGradient
LinearGradient(colors: [.blue, .orange], startPoint: .topLeading, endPoint: .bottomTrailing)
  .overlay(Text("LenarGradient"))

RadialGradient

  • 요소
    • 색상 입력 - colors
    • 중앙 지점 - center
    • 시작 각도 - startRadius
    • 종료 각도 - endRadius
RadialGradient(colors: [.blue, .orange], center: .center, startRadius: 0, endRadius: 270)
  .overlay(Text("RadialGradient"))

AngularGradient

요소

  • 색상 입력 - colors
  • 중앙 지점 - center
AngularGradient(colors: [.blue, .orange], center: .center)
  .overlay(Text("AngularGradient"))

* 전체 코드: https://github.com/JK0369/ExGradient-SwiftUI

* 참고

https://www.sagarunagar.com/Understanding-gradients-using-SwiftUI/

Comments