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.
Related
i'm trying to make a UIImageView with rounder corner and white border, i have subclassed a UIImageView, this is the code:
MyUIImageView.h
#interface MyUIImageView : UIImageView
#end
MyUIImageView.m
#implementation MyUIImageView
-(void)layoutSubviews
{
self.layer.cornerRadius = CGRectGetWidth(self.frame)/2.f;
self.layer.borderColor = [[UIColor whiteColor] CGColor];
self.layer.borderWidth = kLineWidth;
self.layer.masksToBounds = YES;
self.clipsToBounds = YES;
self.contentMode = UIViewContentModeScaleAspectFill;
self.backgroundColor = [UIColor colorWithRed:0.82 green:0.82 blue:0.83 alpha:1];
}
#end
this is the result:
seems fine, but there is a problem as you can see from here:
the image pops out from the borders edge, how i can avoid this problem? how i can cut the image exactly at the edge of the border?
Perhaps a better solution doesn't involve making another View at all - with two views you greatly increase complexity for animation etc, not to mention overhead to keep track of and manipulate both.
I'd instead create a shape layer and add it as a sublayer. Something like this:
CAShapeLayer border = [[CAShapeLayer alloc] init];
border.path = [UIBezierPath bezierPathWithRoundedRect: self.bounds cornerRadius: self.layer.cornerRadius];
border.strokeColor = [UIColor whiteColor];
border.fillColor = [UIColor clearColor];
self.layer.addSublayer(border)
The benefit of doing it this way is that you can add it as a method on your UIImageView subclass if you wish. You can add a border to an object and forget about it, as long as you're not changing the frame of the base object. Transforms etc affect sublayers so you can scale, rotate, etc and not have gross edges.
Hope this helps!
Create a custom border like this:
UIImage *image = [UIImage imageNamed:#"spongebob.jpg"];
UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(30, 30, 200, 200)];
[borderView.layer setMasksToBounds:YES];
[borderView.layer setCornerRadius:borderView.frame.size.width/2.0f];
[borderView setBackgroundColor:[UIColor whiteColor]];
int borderWidth = 3.0f;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(borderWidth, borderWidth, borderView.frame.size.width-borderWidth*2, borderView.frame.size.height-borderWidth*2)];
[imageView.layer setCornerRadius:imageView.frame.size.width/2.0f];
[imageView.layer setMasksToBounds:YES];
[imageView setImage:image];
[borderView addSubview:imageView];
[self.view addSubview:borderView];
Now you image does not pop out of the border.
Hope this helps :)
This seems simple enough - perhaps you can help me find the solution?
I wrote a custom drop shadow for a UIButton. I'm attempting to place it at the lowest index of the UIButton's layer stack. Unfortunately, it isn't being placed beneath the rest of the UIButton.
The Code:
//UIButton type custom
alarmSetterButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *img = [UIImage imageNamed:#"rootSchedulerButton"];
//Scaling
float delta = 2.4f;
if (IS_IPHONE_5) delta = 2.0f;
[alarmSetterButton setFrame:CGRectMake(0.0f, 0.0f, (img.size.width/delta), (img.size.height/delta))];
[alarmSetterButton setBackgroundImage:img forState:UIControlStateNormal];
[alarmSetterButton setTitle:#"" forState:UIControlStateNormal];
[alarmSetterButton addTarget:self action:#selector(setSecondaryView:) forControlEvents:UIControlEventTouchUpInside];
//the colors for the gradient
UIColor *high = [UIColor colorWithWhite:0.0f alpha:1.0f];
UIColor *low = [UIColor colorWithWhite:0.0f alpha:0.0f];
//The gradient, simply enough. It is a rectangle
CAGradientLayer * gradient = [CAGradientLayer layer];
[gradient setFrame:[b bounds]];
[gradient setColors:[NSArray arrayWithObjects:(id)[high CGColor], (id)[low CGColor], nil]];
[gradient setAnchorPoint:CGPointMake(0.5f, 0.0f)];
[gradient setTransform:CATransform3DMakeRotation(315.0 / 180.0 * M_PI, 0.0, 0.0, 1.0)];
// What needs altered
[alarmSetterButton.layer insertSublayer:gradient below:alarmSetterButton.layer];
I found the solution. Instead of using UIButton's setBackroundImage:forState: method I wrote a new CALayer to contain the contents of the image.
Thanks for the help.
:)
Try this, it places the layer at position zero in the stack, i.e. the bottom.
[alarmSetterButton.layer insertSublayer:gradient atIndex:0];
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 want to add a white border to an UIImageView. I tried the following, but it didn't work:
UIImage *image = [UIImage imageNamed:imagePath];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.width = rect.size.width + 1; // create white right border
[imageView setBackgroundColor:[UIColor whiteColor]];
imageView.frame = rect;
[myViewView addSubview:imageView];
I now did it like
CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor whiteColor].CGColor;
sublayer.frame = CGRectMake(imageView.bounds.size.width, 0, 1, imageView.frame.size.height);
[imageView.layer addSublayer:sublayer];
You can create a UIView that is larger than the UIImage view, and set the image view's frame to be 0,0, width+1, height, and that will add the extra to the side.
Take a look at the following image:
As you can see the edges are sharp rectangle and they are coming out of the rounded corner button. How can I not show the edges and only show the round button?
UPDATE (Solution):
I used the following code to achieve the round corners:
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.stopButton.bounds
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(12.0, 12.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.stopButton.bounds;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
self.stopButton.layer.mask = maskLayer;
NEW PROBLEM:
This code gives me the error on the startButtonRound.layer.cornerRadius line.
UIButton *roundStartButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
roundStartButton.frame = CGRectMake(10, 10, 100, 20);
[roundStartButton setBackgroundImage:[UIImage imageNamed:#"green_gradient.jpg"] forState:UIControlStateNormal];
roundStartButton.layer.cornerRadius = 12.0;
UIBarButtonItem *startButton = [[UIBarButtonItem alloc] initWithCustomView:roundStartButton];
You could do this with CALayer alone:
CALayer *myLayer = [CALayer layer];
[myLayer setMasksToBounds:YES];
[myLayer setCornerRadius:5.0f];
[myLayer setBorderWidth:1.0f];
[myLayer setBorderColor: [[UIColor blackColor] CGColor]];
[myLayer setBackgroundColor: [[UIColor whiteColor] CGColor]];
You'll also want to include the QuartzCore framework and include the frameworks header in your own.
#include <QuartzCore/QuartzCore.h>
Hope this helps
Tim
I think all that can be accomplished with:
self.stopButton.layer.cornerRadius = 12.0;
But did you try
self.stopButton.opaque = NO;
self.stopButton.backgroundColor = [UIColor clearColor];
?
form the look of the image you have set your UIButton bckground color to 'White'. Make it 'Clear Color'.