I want to apply square gradient border on view like top window in image:
What i have done:
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
gradientLayer.frame = CGRectMake(0, 0, _imgView.bounds.size.width, _imgView.bounds.size.height);
gradientLayer.startPoint = CGPointMake(0.0, 0.5);
gradientLayer.endPoint = CGPointMake(1.0, 0.5);
gradientLayer.colors = #[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
shapeLayer.lineWidth = 50;
shapeLayer.path = [UIBezierPath bezierPathWithRect:_imgView.bounds].CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
gradientLayer.mask = shapeLayer;
[_imgView.layer addSublayer : gradientLayer];
I want gradient border effect as in first image.
Related
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointZero radius:80 startAngle:0 endAngle:(2 * M_PI) clockwise:YES];
CAShapeLayer * layer = [CAShapeLayer new];
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.lineWidth = 10;
layer.strokeEnd = 1;
layer.position = self.view.center;
layer.lineCap = kCALineCapRound;
[layer setPath : path.CGPath];
[self.view.layer addSublayer : layer];
CAGradientLayer * gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.0,0.5);
gradientLayer.endPoint = CGPointMake(1.0,0.5);
gradientLayer.frame = self.view.frame;
NSArray *colors = #[(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor,(id)[UIColor yellowColor].CGColor];
gradientLayer.colors = colors;
[gradientLayer setMask : layer];
[self.view.layer addSublayer : gradientLayer];
What Im doing:
Adding CAShapeLayer to view.layer with a path to draw a circle.
Adding CAGradientLayer ( 3 colors ) to view.layer and setingMask to the CAShapeLayer.
Result: with and without mask
The problem :
If I change the frame of the gradient to be on top of the circle ( because I want to see the all the colors on the circle ) its moves the circle as well.
particularly the change to the x and y of the gradient
So instead of
gradientLayer.frame = self.view.frame;
I change the x and y only ( width and hight doesn't causing this problem as far as I checked )
gradientLayer.frame = CGRectMake(100,100, self.view.frame.size.width, self.view.frame.size.height);
And this is the result
Can anyone explain why this is happening and what are the possible solutions ?
What Im trying to achieve is this
And then masking it with the CAShapeLayer but then this problem happens
Thanks in advance
change the shapelayer position, because gradient layer is fullscreen and shapelayer set center position and after you change the frame of gradient layer shapelayer also change with same position.
layer.position = CGPointMake(30, 250);
I'm trying to get to a result like this:
And I can't seem to the get there, this is the code I have:
if (size.width > self.name.bounds.size.width) {
CAGradientLayer *l = [CAGradientLayer layer];
CGRect myFrame = self.name.bounds;
myFrame.size.width = 10.0f;
l.frame = myFrame;
l.colors = #[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
l.startPoint = CGPointMake(0.0f, 0.0f);
l.endPoint = CGPointMake(1.0f, 0.0f);
self.name.layer.mask = l;
}
What I'm currently getting is this:
Any help?
The issue with your code is that you are fixing the layer size here.
myFrame.size.width = 10.0f;
The above line fixes the frame size to 10 pixel. So that the layer size will be going to 10 pixel. And the layer can only render on this width.
Just comment or remove above line to get the desired result.
So that your code will be now like
CAGradientLayer *l = [CAGradientLayer layer];
CGRect myFrame = self.name.bounds;
// myFrame.size.width = 10.0f;
l.frame = myFrame;
l.colors = #[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
l.startPoint = CGPointMake(0.0f, 0.0f);
l.endPoint = CGPointMake(1.0f, 0.0f);
self.name.layer.mask = l;
For the bonus - You can make this effect more smooth by adding more colours into the array and by changing the startPoint and endPoint of the layer.
CAGradientLayer *l = [CAGradientLayer layer];
CGRect myFrame = self.name.bounds;
l.frame = myFrame;
l.colors = #[(id)[UIColor lightGrayColor].CGColor, (id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
l.startPoint = CGPointMake(0.0, 0.5);
l.endPoint = CGPointMake(1.0, 0.5);
self.name.layer.mask = l;
I need to do a colour shading in objective c. As shown in this image shade is on the button of HardService and SoftService.
Is there is any way to do this ? Thanks in Advance!
CAGradientLayer would server your purpose - Reference:
http://blog.apoorvmote.com/gradient-background-uiview-ios-swift/
You can use either a gradient image or CAGradientLayer for this purpose
CAGradientLayer added to an existing button:
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = button.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];
[button.layer insertSublayer:gradient atIndex:0];
You can use an image for showing shadow. Use blur image or change alpha of the imageview.
Or if you want to do it programmatically, try it:
Obj c:
//create elliptical shadow for button through UIBezierPath
CGRect ovalRect = button.bounds;
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:ovalRect];
//applying shadow to path
button.layer.shadowColor = [UIColor yourcolor].CGColor;
button.layer.shadowOffset = CGSizeMake(0.0, 0.0);
button.layer.shadowOpacity = 1.0;
button.layer.shadowRadius = 3.0;
button.layer.shadowPath = path.CGPath;
Swift :
//create elliptical shdow forimage through UIBezierPath
var ovalRect = button.bounds
var path = UIBezierPath(ovalInRect: ovalRect)
//applying shadow to path
button.layer.shadowColor = UIColor(white: 0.0, alpha: 0.5).CGColor
button.layer.shadowOffset = CGSizeMake(0.0, 0.0)
button.layer.shadowOpacity = 1.0
button.layer.shadowRadius = 3.0
button.layer.shadowPath = path.CGPath
Taken from http://www.innofied.com/implementing-shadow-ios/ and also have a look to know more: UIView with rounded corners and drop shadow?
My another answer related to this: Drop shadow in ios
I have the following code:
- (void)setupLayer {
self.faucetShape = [CAShapeLayer layer];
self.faucetShape.strokeColor = [[UIColor blackColor] CGColor];
self.faucetShape.lineWidth = 2;
self.faucetShape.fillColor = nil;
self.faucetShape.path = [self faucetPath].CGPath; // faucetPath returns a 4 point diamond shaped UIBezierPath*
self.faucet = [CAGradientLayer layer];
self.faucet.mask = self.faucetShape;
self.faucet.colors = #[(id)[UIColor redColor].CGColor, (id)[UIColor redColor].CGColor];
[self.layer addSublayer: self.faucet];
}
But it shows nothing. Not sure what I'm missing (other than my graphic).
(faucet and faucetPath are both properties)
UPDATE
OK, I guess a CAGradientLayer has to have a meaningful frame. I assume a CAShapeLayer's frame isn't as meaningful, since the path can go outside the frame. Adding the following line made it show up:
self.faucet.frame = CGRectMake(0, 0, 64, 64);
So NOW my question is, is there a way to avoid having to do that? I'd just like the frame of the layer to implicitly be that of the containing View/Layer.
You need to set the frame of the layers. The following code will draw a red circle:
- (void)setupLayer
{
CAShapeLayer *faucetShape = [CAShapeLayer layer];
faucetShape.frame = CGRectMake(0, 0, 100, 100);
faucetShape.strokeColor = [[UIColor blackColor] CGColor];
faucetShape.lineWidth = 2;
faucetShape.fillColor = nil;
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, CGRectMake(0, 0, 100, 100));
faucetShape.path = path;
CGPathRelease(path);
CAGradientLayer *faucet = [CAGradientLayer layer];
faucet.frame = CGRectMake(10, 10, 100, 100);
faucet.mask = faucetShape;
faucet.colors = #[(id)[UIColor redColor].CGColor, (id)[UIColor redColor].CGColor];
[self.view.layer addSublayer: faucet];
}
I'm working on CAShapeLayer by creating a layer using CAShapeLayer like following:
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(150, 50, 200, 200);
shapeLayer.fillColor = [UIColor whiteColor].CGColor;
shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
[self.view.layer addSublayer:shapeLayer];
However, when I execute the codes and I cant see my shapeLayer in the simulator/device.
What I am missing here.
PS : If I am using CALayer *shapeLayer = [CALayer layer]; it works.Confused
add a path to it, like
shapeLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius)
cornerRadius:radius].CGPath;
A shaped layer needs a shape…
I put this in my View Controller and it works fine:
- (void)viewDidLoad
{
[super viewDidLoad];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(150, 50, 200, 200);
shapeLayer.fillColor = [UIColor whiteColor].CGColor;
shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
NSUInteger radius = 90;
shapeLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius)
cornerRadius:radius].CGPath;
[self.view.layer addSublayer:shapeLayer];
}
If you change the path like
shapeLayer.path = [UIBezierPath bezierPathWithRect:shapeLayer.bounds].CGPath;
it'll result in