Facing problem when adding rounded corners to imageview.
here is my code
CALayer * lay = [imageview layer];
[lay setMasksToBounds:YES];
[lay setCornerRadius:10.0];
[lay setBorderWidth:5.0];
[lay setBorderColor:[[UIColor clearColor] CGColor]];
imageview.layer.rasterizationScale = [UIScreen mainScreen].scale;
imageview.layer.shouldRasterize = YES;
And its working fine but if I am resizing the imageview, its not making corners round.
Here is my resizing code:
[UIView animateWithDuration:0.2 animations:^ {
[imageview setTransform:CGAffineTransformMakeScale(1.1, 1.1)];
CALayer * l = [imageview layer];
[l setMasksToBounds:YES];
[l setCornerRadius:10.0];
[l setBorderWidth:5.0];
[l setBorderColor:[[UIColor clearColor] CGColor]];
imageview.layer.rasterizationScale = [UIScreen mainScreen].scale;
imageview.layer.shouldRasterize = YES;
newimage = imageview.image;
[[NSUserDefaults standardUserDefaults] setValue:UIImageJPEGRepresentation(newimage,1.1) forKey:#"newimage"];
}];
Any help would be appreciated.
You can set corner radius from storyboard or XIB hope it will work, Please check This.
Plz import the QuartzCore/QuartzCore.h
and then write the code ...
yourImageView.layer.cornerRadius = yourRadius;
yourImageView.clipsToBounds = YES;
Why to write the clipsToBounds property
A Boolean value that determines whether subviews are confined to the bounds of the view.
Discussion
Setting this value to YES causes subviews to be clipped to the bounds of the receiver. If set to NO, subviews whose frames extend beyond the visible bounds of the receiver are not clipped. The default value is NO.
Try
[UIView animateWithDuration:0.2
delay:0.1
options: UIViewAnimationOptionCurveEaseOut
animations:^
{
[imageview setTransform:CGAffineTransformMakeScale(1.1, 1.1)];
}
completion:^(BOOL finished)
{
[imageview.layer setCornerRadius:10.0];
imageview.clipsToBounds = YES;
imageview.layer.masksToBounds = YES;
[imageview.layer setBorderWidth:5.0];
[imageview.layer setBorderColor:[[UIColor clearColor] CGColor]];
newimage = imageview.image;
[[NSUserDefaults standardUserDefaults] setValue:UIImageJPEGRepresentation(newimage,1.1) forKey:#"newimage"];
}];
You have to round corners after animation complete. You may get animation completion as above.
Related
To achieve the above design I use the below code. Every thing is perfect.
for(....)
{
CALayer *layer=[CALayer layer];
[layer setFrame:CGRectMake(xAxis, 2.0f, width, height)];
[layer setBackgroundColor:[self getColor:colorId]];
[[self layer] addSublayer:layer];
}
I have use cornerRadious for rounding the corner. And the problem is on corners it's shows the background colours little bit. Can anybody please suggest me what to do. I am using below code for cornerRadious. Thanks in advance.
[[vBarHolder layer] setCornerRadius:3.0f];
[[vBarHolder layer] setBorderColor:[[UIColor whiteColor] CGColor]];
[[vBarHolder layer] setBorderWidth:2.0f];
[[vBarHolder layer] setMasksToBounds:YES];
[vBarHolder setClipsToBounds:YES];
Your coloured views are overlapped by vBarHolder.
Modify the code as below.
for(....)
{
CALayer *layer=[CALayer layer];
[layer setFrame:CGRectMake(xAxis + 2, 2.0f + 2, width - 4 , height- 4)];
[layer setBackgroundColor:[self getColor:colorId]];
[[self layer] addSublayer:layer];
}
as the layers are having corner radius as 0 you are able to see in background.
Regards,
Amit
I am using below code to add text and border to selected image from cameraroll.
-(UIImage*)image:(UIImage*)image withText:(NSString*)text atPoint:(CGPoint)point{
if (text) {
CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
[image drawInRect:rect];
NSDictionary *attributes = #{NSFontAttributeName : [UIFont boldSystemFontOfSize:80],
//NSStrokeWidthAttributeName : #(4),
NSStrokeColorAttributeName : [UIColor whiteColor]};
[text drawAtPoint:point withAttributes:attributes];
CALayer *l = [self.imageView layer];
[l setBorderWidth:10.0];
[l setBorderColor:[[UIColor blueColor] CGColor]];
newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
return newImage;
}
When i click on save button in my app, i am saving edited image to cameraroll.But edited image inside cameraroll only has text without any added border. Whether i am missing anything in above code to add and save border around image? Is there any other way to add border other than CALayer?
Replace this:
CALayer *l = [self.imageView layer];
[l setBorderWidth:10.0];
[l setBorderColor:[[UIColor blueColor] CGColor]];
With this:
UIBezierPath *rectangleBezier = [UIBezierPath bezierPathWithRect:rect];
rectangleBezier.lineWidth = 20.0f; // 10 * 2 because line drawn from the center of edge
[[UIColor blueColor] setStroke];
[rectangleBezier stroke];
Remarks:
CALayer *l = [self.imageView layer]; has nothing to do with UIImage data. imageView's layer change imageView presentation. Not the content of UIImage.
I will respond to "Adding a border around an UIImage in a UIView"
From far, the easiest method is to insert another view in the view hierarchy.
[self.view insertSubview:({
UIView * border = [[UIView alloc]
initWithFrame:CGRectInset(self.imageView.frame, -1, -1)];
border.backgroundColor = [UIColor blueColor];
border;
})
belowSubview:self.imageView];
I've seen similar questions asked before but the solutions I tried not working very well.
Here is part of the code. First, a label is defined.
UILabel* _label;
...
Below is the animation code inside touchesBegan of the label. So basically, when the label is clicked, I would like to gradually fade in background image and change the text color.
_label.backgroundColor = [UIColor clearColor];
_label.textColor = [UIColor blackColor];
UIImage* image = [UIImage imageNamed:#"tile.png"];
CGSize imageSize = _label.frame.size;
UIGraphicsBeginImageContext(imageSize);
[image drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[UIView animateWithDuration:2.0
animations:^{
_label.backgroundColor = [UIColor colorWithPatternImage:newImage];
_label.textColor = [UIColor whiteColor];
[UIView setAnimationDidStopSelector:#selector(highlightEnded:finished:context:)];
}
completion:^(BOOL finished){
NSLog(#"stoped");
}];
The image background and text color change correctly, but no animation; both of them changes rapidly.
Thanks for the tip.
You should use transitionWithView:duration:options:animations:completion: instead of animateWithDuration: when animating text.
After trying half a dozen or so suggestions, I found one way that guarantees to work is to add an extra UIImageView as the background (set the background color of label as clearColor), then animate through its alpha. This is as good as I can solve.
You can't animate text color changes or background image changes.
What you can do is
image1.alpha = 0;
image2.alpha = 1;
[UIView animateWithDuration:.3 animations:^{
image1.alpha = 1;
image2.alpha = 0;
}];
This would give you a fade effect.
You could manually insert image1 and image2 as subViews of the label.
CATransition *animation = CATransition.animation;
animation.duration = 1.0;
animation.type = kCATransitionFade;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[viewToFade.layer addAnimation:animation forKey:#"fade"];
Should work with both image views and labels.
I have a background on the homescreen of my app which want to expand to fill the screen when it is rotated though I have tried to give it autoresizingmasks though it won't let as it is a CALayer. At the moment when you resize the screen there is a big white space on the right left by where the gradient was
Here is the code I am using to initialize the gradient:
UIColor *highColor = [UIColor colorWithRed:0.0f/255.0f green:128.0f/255.0f blue:214.0f/255.0f alpha:1.000];
UIColor *lowColor = [UIColor colorWithRed:5.0f/255.0f green:69.0f/255.0f blue:150.0f/255.0f alpha:1.000];
gradientBackground = [CAGradientLayer layer];
[gradientBackground setFrame:CGRectMake(0, 0, screenWidth, screenHeight)];
[gradientBackground setColors:[NSArray arrayWithObjects:(id)[highColor CGColor], (id)[lowColor CGColor], nil]];
backgroundLayer = [CALayer layer];
[backgroundLayer setFrame:CGRectMake(0, 0, screenWidth, screenHeight)];
[backgroundLayer setMasksToBounds:YES];
[backgroundLayer addSublayer:gradientBackground];
backgroundObject = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, screenWidth, screenHeight)];
[self.view addSubview:backgroundObject];
[[backgroundObject layer] insertSublayer:backgroundLayer atIndex:0];
[backgroundObject setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
Any advice as to how to fix this issue will be muchly appreciated
I managed to work out a way around using a CALayer and just set the background of the view to an image of a gradient like this:
UIGraphicsBeginImageContext(self.view.frame.size);
[[UIImage imageNamed:#"home-gradient.png"] drawInRect:self.view.bounds];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.view.backgroundColor = [UIColor colorWithPatternImage:image];
Can you embed the layer in a view, then set the resizing mask on the view? You could subclass both UIView and CALayer, then implement the view's +layerClass method to return your layer subclass and use the layer subclass to draw the gradient.
I'm trying to create a UIbutton that has the following characteristics:
* A custom image as its content
* Rounded corners
* A drop shadow
Using the following code will format the button to appear correctly and function but the highlight action (i.e., the darkening of the button when touched) is lost when the touch occurs. Any ideas?
+(void) styleButton:(UIButton*)button{
UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(button.bounds.origin.x, button.bounds.origin.y, button.bounds.size.width, button.bounds.size.height)];
CALayer *sublayer = [CALayer layer];
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(button.bounds.origin.x, button.bounds.origin.y, button.bounds.size.width, button.bounds.size.height);
backgroundView.userInteractionEnabled = NO;
[backgroundView.layer addSublayer:sublayer];
[button insertSubview:backgroundView atIndex:0];
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = sublayer.bounds;
imageLayer.cornerRadius = 10.0;
imageLayer.contents = (id) [UIImage imageNamed:#"myImage.png"].CGImage;
imageLayer.cornerRadius = 5.0f;
imageLayer.masksToBounds = YES;
[sublayer addSublayer:imageLayer];
}
Have you tried converting your backgroundView into a UIImage and add it to the button instead of adding backgroundView as a subview? That would preserve the darkening when the button is pressed:
UIGraphicsBeginImageContext(backgroundView.frame.size);
[backgroundView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[button setImage:image forState:UIControlStateNormal];
Like this (ARC enabled):
UIGraphicsBeginImageContextWithOptions(self.button.bounds.size, NO, [[UIScreen mainScreen] scale]);
CGContextRef context = UIGraphicsGetCurrentContext();
for (UIView *aView in self.button.subviews) {
CGContextSaveGState(context);
CGContextTranslateCTM(context, aView.frame.origin.x, aView.frame.origin.y);
[aView.layer renderInContext:UIGraphicsGetCurrentContext()];
CGContextRestoreGState(context);
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.button setImage:image forState:UIControlStateNormal];
[self.button.subviews makeObjectsPerformSelector:#selector(removeFromSuperview)];
[self.button setAdjustsImageWhenHighlighted:YES];