[ios] 색상 그라디언트로 프로그래밍 방식으로 UIView 만들기

런타임에 그라디언트 색상 배경 (단색에서 투명으로)으로 뷰를 생성하려고합니다. 그렇게하는 방법이 있습니까?

답변

목표 -C :

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor blackColor].CGColor];

[view.layer insertSublayer:gradient atIndex:0];

빠른:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 50))
let gradient = CAGradientLayer()

gradient.frame = view.bounds
gradient.colors = [UIColor.white.cgColor, UIColor.black.cgColor]

view.layer.insertSublayer(gradient, at: 0)

정보 : startPoint 및 endPoint를 사용 하여 그라디언트 방향 을 변경하십시오 .

이에 추가 된 다른 뷰가있는 경우 UIView(예로서 UILabel), 당신은 사람들의 배경 색상을 설정하는 것이 좋습니다 UIView‘에이야 [UIColor clearColor]그라데이션보기 대신 서브 뷰의 배경색으로 표시됩니다 있도록. 사용 clearColor에 약간의 성능 저하가 있습니다.

답변

사용자 정의 클래스를 만들 수 있습니다 GradientView.

스위프트 5

class GradientView: UIView {
    override open class var layerClass: AnyClass {
       return CAGradientLayer.classForCoder()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        let gradientLayer = layer as! CAGradientLayer
        gradientLayer.colors = [UIColor.white.cgColor, UIColor.black.cgColor]
    }
}

스토리 보드에서 클래스 유형을 그라디언트 배경을 가지려는보기로 설정하십시오.

이것은 다음과 같은 방식으로 더 좋습니다.

의 프레임을 설정할 필요가 없습니다 CLayer
NSConstraint평소와 같이 사용UIView
하위 계층을 만들 필요가 없습니다 (메모리 사용이 적음)

답변

이것을 시도해보십시오. 그것은 나를 위해 매력처럼 작용했습니다.

목표 C

내가 설정 한 RGB 에 그라데이션 배경 색상 의 UIView

   UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,35)];
   CAGradientLayer *gradient = [CAGradientLayer layer];
   gradient.frame = view.bounds;
   gradient.startPoint = CGPointZero;
   gradient.endPoint = CGPointMake(1, 1);
   gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:34.0/255.0 green:211/255.0 blue:198/255.0 alpha:1.0] CGColor],(id)[[UIColor colorWithRed:145/255.0 green:72.0/255.0 blue:203/255.0 alpha:1.0] CGColor], nil];
   [view.layer addSublayer:gradient];

업데이트 :
-Swift3 +

코드 :-

 var gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 35))
 let gradientLayer:CAGradientLayer = CAGradientLayer()
 gradientLayer.frame.size = self.gradientView.frame.size
 gradientLayer.colors =
 [UIColor.white.cgColor,UIColor.red.withAlphaComponent(1).cgColor]
//Use diffrent colors
 gradientView.layer.addSublayer(gradientLayer)

그라디언트 색상의 시작점과 끝점을 추가 할 수 있습니다.

  gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
  gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

자세한 내용은 CAGradientLayer Doc을 참조하십시오.

이것이 어떤 사람에게 도움이되기를 바랍니다.

답변

이것이 내가 권장하는 접근법입니다.

재사용 성을 높이기 위해 범주를 만들고 CAGradientLayer원하는 그라디언트를 클래스 메서드로 추가합니다. 다음 header과 같이 파일에 지정 하십시오.

#import <QuartzCore/QuartzCore.h>

@interface CAGradientLayer (SJSGradients)

+ (CAGradientLayer *)redGradientLayer;
+ (CAGradientLayer *)blueGradientLayer;
+ (CAGradientLayer *)turquoiseGradientLayer;
+ (CAGradientLayer *)flavescentGradientLayer;
+ (CAGradientLayer *)whiteGradientLayer;
+ (CAGradientLayer *)chocolateGradientLayer;
+ (CAGradientLayer *)tangerineGradientLayer;
+ (CAGradientLayer *)pastelBlueGradientLayer;
+ (CAGradientLayer *)yellowGradientLayer;
+ (CAGradientLayer *)purpleGradientLayer;
+ (CAGradientLayer *)greenGradientLayer;

@end

그런 다음 구현 파일에서 다음 구문으로 각 그라디언트를 지정하십시오.

+ (CAGradientLayer *)flavescentGradientLayer
{
    UIColor *topColor = [UIColor colorWithRed:1 green:0.92 blue:0.56 alpha:1];
    UIColor *bottomColor = [UIColor colorWithRed:0.18 green:0.18 blue:0.18 alpha:1];

    NSArray *gradientColors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
    NSArray *gradientLocations = [NSArray arrayWithObjects:[NSNumber numberWithInt:0.0],[NSNumber numberWithInt:1.0], nil];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = gradientColors;
    gradientLayer.locations = gradientLocations;

    return gradientLayer;
}

그런 다음이 범주를 귀하 ViewController또는 다른 필수 항목으로 가져 와서 다음 subclass과 같이 사용하십시오.

CAGradientLayer *backgroundLayer = [CAGradientLayer purpleGradientLayer];
backgroundLayer.frame = self.view.frame;
[self.view.layer insertSublayer:backgroundLayer atIndex:0];

답변

내 앱 전체에 한 가지 유형의 그라디언트 만 필요했기 때문에 UIView의 하위 클래스를 만들고 고정 색상으로 초기화 할 때 그라디언트 레이어를 사전 구성했습니다. UIView의 이니셜 라이저는 configureGradientLayer -method를 호출하여 CAGradientLayer를 구성합니다.

DDGradientView.h :

#import <UIKit/UIKit.h>

@interface DDGradientView : UIView {

}
@end

DDGradientView.m :

#import "DDGradientView.h"

@implementation DDGradientView

// Change the views layer class to CAGradientLayer class
+ (Class)layerClass
{
    return [CAGradientLayer class];
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if(self) {
        [self configureGradientLayer];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if(self) {
        [self configureGradientLayer];
    }
    return self;
}

// Make custom configuration of your gradient here   
- (void)configureGradientLayer {
    CAGradientLayer *gLayer = (CAGradientLayer *)self.layer;
    gLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor lightGrayColor] CGColor], nil];
}
@end

답변

신속한 구현 :

var gradientLayerView: UIView = UIView(frame: CGRectMake(0, 0, view.bounds.width, 50))
var gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = gradientLayerView.bounds
gradient.colors = [UIColor.grayColor().CGColor, UIColor.clearColor().CGColor]
gradientLayerView.layer.insertSublayer(gradient, atIndex: 0)
self.view.layer.insertSublayer(gradientLayerView.layer, atIndex: 0)

답변

Swift의 확장 기능과 열거 형을 사용하여 허용되는 답변을 약간 확장했습니다.

내가 할이 만들처럼 스토리 보드를 사용하는 경우 아, 그리고 확실히 호출 gradientBackground(from:to:direction:)에 viewDidLayoutSubviews()이상이 필요합니다.

스위프트 3

enum GradientDirection {
    case leftToRight
    case rightToLeft
    case topToBottom
    case bottomToTop
}

extension UIView {
    func gradientBackground(from color1: UIColor, to color2: UIColor, direction: GradientDirection) {
        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = [color1.cgColor, color2.cgColor]

        switch direction {
        case .leftToRight:
            gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        case .rightToLeft:
            gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
        case .bottomToTop:
            gradient.startPoint = CGPoint(x: 0.5, y: 1.0)
            gradient.endPoint = CGPoint(x: 0.5, y: 0.0)
        default:
            break
        }

        self.layer.insertSublayer(gradient, at: 0)
    }
}