iOS가border에 그라데이션을 설정하는 방법 실례

앞말

본고는 4행 코드에서 출발하여 하나의view에 점차적인 색채를 설정하고 몇 가지 중요한 점차적인 색채 관련 속성을 회담하며 사용 과정에서 특별히 관심을 가져야 할 점이 몇 가지 있다.
하나의view의border에 점차적인 색조를 설정하는 것은 비교적 높은 용법이므로 본고가 이 방면에서 당신을 도울 수 있기를 바랍니다.

뷰에 그라데이션 설정

4행 코드를 통해 뷰에 그라데이션을 설정할 수 있습니다.

let view = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
// @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor]
gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
view.layer.addSublayer(gradientLayer)

CAGradientLayer를 만들려면 프레임을 설정해야 합니다. 그렇지 않으면 크기가 기본 0을 사용합니다.
그라데이션은 colors 수조에 따라 표시됩니다. 이 수조의 유형은 CGColorRef이기 때문에 사용해야 합니다.cgColor 강제 변환;OC 구문을 사용하는 경우 (__bridge id) 를 추가해야 합니다. 그렇지 않으면 그라데이션이 표시되지 않습니다.
기본적으로 그래디언트는 위에서 아래로 이동하지만 startPoint와 endPoint를 설정하여 이 순서를 변경합니다.

gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)

이 두 점의 범위는 0에서 1까지이다. 즉, 맨 왼쪽과 맨 위쪽은 0, 맨 아래와 맨 오른쪽은 1이다.이 예에서 점차적인 변화는 왼쪽 상단에서 오른쪽 하단으로 변한다.
그라데이션의 또 다른 중요한 속성은locations입니다. 이 속성은colors에 설정된 모든 색의 끝점을 지정하는 데 사용됩니다.

gradientLayer.locations = [0.2, 0.8]

locations에서 요소의 범위는 0에서 1까지입니다.여기서 수조의 첫 번째 원소 0.2는 colors 수조의 첫 번째 원소 빨간색의 종점을 0.2로 지정했다. 즉, 전체 그라데이션 범위를 10개로 나누어 처음부터 2/10까지는 순홍색이고 2/10부터 8/10까지는 순홍색에서 순황색까지의 그라데이션이며 8/10부터 10/10까지는 순황색이다.

view의border에 그라데이션 설정

UIBezier Path를 사용하여 원각이 있는 CAShapeLayer를 만들고 원각을view의 원각으로 설정하면view의border를 그라데이션으로 설정할 수 있습니다.

... //  view gradientLayer
  
let shapeLayer = CAShapeLayer()
shapeLayer.borderWidth = 1
shapeLayer.path = UIBezierPath(roundedRect: gradientLayer.bounds, cornerRadius: 10).cgPath
shapeLayer.fillColor = UIColor.clear.cgColor //  clearColor nil， 
shapeLayer.strokeColor = UIColor.white.cgColor //  clearColor 
  
gradientLayer.mask = shapeLayer

view.layer.addSublayer(gradientLayer)

borderWidth shapeLayer의 border 너비는view와 같아서 설계도에 따라 설정할 수 있습니다..

corner Radius UIBezier Path의 원각은view의 원각과 같다.roundedRect와 CAGradientLayer의 크기가 같습니다..

fillColor는 shapeLayer의 충전색이고 기본값은 검은색입니다. nil 또는 투명색clearColor로 설정하는 것을 권장합니다

스트로크 컬러는 border의 테두리 색이고clear Color로 설정하면 border를 그리지 않습니다. 여기 아무거나 그릴 수 있도록 하는 색입니다. 실제로 사용하는 색은 그라데이션입니다

마스크는 shapeLayer를gradientLayer의mask로 사용하여gradientLayer 내부를 비우고 가장자리border의 점차적인 색깔만 보존할 수 있습니다

최종적으로view에 그라데이션 레이어를 추가합니다.layer에서shapeLayer는gradientlayer를 수식하는 데 사용되며, 그 목적은gradientlayer의 내부를 비우고 border와 원각을 만드는 것이다.

총결산

이 글을 통해 우리는view에 어떻게 점차적인 색을 설정하는지 이해하고 점차적인 색의 몇 가지 중요한 속성을 상세하게 논술했다.border에 그라데이션을 설정하는 것은 진급에 대한 지식점입니다.
iOS가 border에 그래디언트를 설정하는 것에 관한 이 글은 여기까지 소개되었습니다. iOSborder 그래디언트에 대한 더 많은 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 찾아보세요. 앞으로 많은 응원 부탁드립니다!