2017-09-27 8 views
15

iOS 프로젝트에 그림자가있는 사용자 정의 UIView를 만들었습니다. 목표는보기의 배경과 동일한 그래디언트를 그림자에 적용하는 것입니다.UIView 그림자 그라디언트

다음은 현재의 단색 그림자를 보여주는 예입니다.

Shadow Example

은 아래의 코드에 UIView의 하위 클래스를 통해 이루어집니다 :

override func layoutSubviews() { 
    let gradientLayer = layer as! CAGradientLayer 
    gradientLayer.colors = [topColor.cgColor, bottomColor.cgColor] 
    gradientLayer.startPoint = CGPoint(x: startPointX, y: startPointY) 
    gradientLayer.endPoint = CGPoint(x: endPointX, y: endPointY) 
    layer.cornerRadius = cornerRadius 
    layer.shadowColor = shadowColor.cgColor 
    layer.shadowOffset = CGSize(width: shadowX, height: shadowY) 
    layer.shadowRadius = shadowBlur 
    layer.shadowOpacity = 1 

    let inset: CGFloat = bounds.width * 0.05 
    layer.shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: inset, dy: 0.0), cornerRadius: cornerRadius).cgPath 
} 

내가 두 번째 그라디언트 레이어를 만들고 그림자에 마스킹하지만 운이 없었다 주변에 연주되었다. 저를 올바른 방향으로 가르쳐주십시오!

답변

4

표준 CALayer 그림자로 더 많은 작업을 수행 할 수 없다고 생각합니다. CALayer의 필터 속성을 살펴보십시오.

https://developer.apple.com/documentation/quartzcore/calayer/1410901-filters

번째 CAGradientLayer를 생성하고 예를 들어 GausianBlur 필터를 적용한다.

https://developer.apple.com/library/content/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CIGaussianBlur

안 표준 층의 그림자는 계층과 같이 흐리게 레이어를 추가합니다.

0

나는 @jacek, 당신이 만드는 것입니다 설명 제이 섹로 할 (솔직히 많이하지 않습니다)

가장 좋은 일을 당신이 CALayer 그림자와 함께 할 수있는 일의 한계를 밀어하고 옳은 생각 자신의 그림자, 또 다른 CAGradientLayer 가우시안 블러를 적용하여 그림자처럼 작동합니다.

또한 코드를 layoutSubviews 안에 두는 것이 가장 적합한 장소라고 생각하지 않습니다. 일단 구성되면 레이어가 많이 변경 될 필요가 없으므로 레이아웃이 많이 변경되면 레이어가 많이 호출됩니다.

일반적으로 interface-builder에서 오는보기를 사용하는 경우이 로직을 전용 configureBackgroundViews 함수 내 awakeFromNib에서 호출합니다. 그냥 드래그 앤 프로젝트에 BlurEffect.swift 파일을 드롭 :

0

내 gitRepo https://github.com/Krishnarjun-Banoth/BlurView/tree/master/Shadows

1 단계에서 사용할 수 귀하의 요구에 대한 내 코드를 사용합니다.

2 단계 : 다음에서 간단히보기 각보기에 대해 개별적으로보기 확장 방법을 사용하십시오.

testView.applyGradient(colours: [UIColor.blue,UIColor.orange]) //pass your required colours. 
    testView.blur(blurRadius: 5.0) 

참고 : @Jacek Głazik 대답 및 FlexMonkey의 자습서에서 영감을 얻었습니다.