I'm trying just to create a simple gradient with a label on it that I can overlay on top of a MKMapView. I looked on SO and saw I could use CAGradientLayer rather than override drawRect in UIView. I thought I would give it a shot. In my viewDidLoad, I do this:
CGRect frame = CGRectMake(self.mapView.frame.origin.x, self.mapView.frame.origin.y, 320.0, 44.0);
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = frame;
gradientLayer.backgroundColor = (__bridge CGColorRef)((__bridge id)([UIColor clearColor].CGColor));
[gradientLayer setCornerRadius:12.0];
[gradientLayer setOpacity:0.5];
gradientLayer.colors = #[(id)[UIColor blackColor].CGColor, (id)[UIColor whiteColor].CGColor];
[self.view.layer addSublayer:gradientLayer];
It's on the right path, except the upper left corner and upper right corner have this white underneath. Is there a reason for this? I thought it might be because I didn't set the backgroundColor of the layer or something since that has happened to me on UIViews before, but it doesn't seem like it.
Thanks!
The corners don't have white underneath. They have map underneath. Here are the four corners, zoomed 600%:
When you set the corner radius of a layer, you're clipping that layer. Anything under the layer will show through where you've clipped the rounded layer away.
In your case, you've clipped your gradient layer's corners off, so the map layer underneath shows through without being blended with the gradient.
You need to clip your map layer's corners also. The easiest way is to set the same corner radius on your map layer.
R u include this header files...
#import <QuartzCore/QuartzCore.h>
#import "QuartzCore/CALayer.h"
then use radius.
gradientLayer.layer.cornerRadius = 7.0;
Add QuartzCore.framework
#import <QuartzCore/QuartzCore.h>
yourView.layer.cornerRadius = 12.0f;
Related
Hi in one of my application i had created a circle using drawrect method on UIView object.Now my concern i want draw a highlight border around the circle for that actually i used
myView.layer.borderWidth =3.0;
myView.layer.borderColor=[UIColor colorWithRed:myView.patternRed green:myView.patternGreen blue:myView.patternBlue alpha:1.0].CGColor;
But due to this code what is happening is a border is creating around the view and it's looks a rectangle, but i want to create a border around the circle itself. So if anyone know how to implement this functionality please let me know. Thanks in advance.
Try this
myView.layer.cornerRadius = 80.0f;
It'll curve your view into a circle.
Thanks.
you have to set some radius for the corners of that view so add this line
myView.layer.cornerRadius=20;
play with the numeric value to match your requirements
I hope it helps
This Works for me:
UIView *myView =[[UIView alloc]initWithFrame:CGRectMake(0,0,100,100)];
[self createRoundUIView:myView:80];
-(void)createRoundUIView:(UIView *)inputView sizeDiameter:(float)diameterSize;
{
CGPoint saveCenter = inputView.center;
CGRect frame = CGRectMake(inputView.frame.origin.x, inputView.frame.origin.y, diameterSize, diameterSize);
roundedView.frame = frame;
roundedView.layer.cornerRadius = diameterSize / 2.0;
roundedView.center = saveCenter;
}
I have an UIImageView 3 levels deep in a super view. (The white region on top of the gray rectangle is my superview, the gray elongated rectangle is one subview, the black square is another subview of the elongated gray rectangle, the cog is the image of the UIImageView which is a subview of the black square). The frame rectangle of the UIImageView is calculate as follows, where _normalImage is a UIImage object. I do this inside the subclass that represents the black square
CGFloat xPoint = self.bounds.size.width/2 - _normalImage.size.width/2;
CGFloat yPoint = self.bounds.size.height/2 - _normalImage.size.height/2;
CGRect frameRect = CGRectMake(xPoint, yPoint, _normalImage.size.width, _normalImage.size.height);
self.imageHolder = [[UIImageView alloc] initWithFrame:frameRect];
The _normalImage is 26X26 and should be a perfect square. However the image is rendering as distorted as if there is an aspect ratio loss.
Whats wrong ?
try using floorf() function for your coordinates to prevent them contain the fractional part.
Image is stretched because by default it use UIViewContentModeScaleToFill content mode.
self.imageHolder.contentMode = UIViewContentModeScaleAspectFit;
I'm looking for a way to add a solid color border to an existent image with Core Image. I've found the filter list reference but there is no one to make it.
Help !!
We need to have the CIImage extent or the CGRect in which we want to create the solid border. Than, We can draw a CIImage forming a solid line in the specified area, and repeat the steps for 3 more times for different positions to draw a complete solid rectangle. Following is the piece of code which will draw a straight solid line above the specified area.
CIImage *overlay1 = [CIImage imageWithColor:[CIColor colorWithRed:255/255.f green:0/255.f blue:0/255.f alpha:1.00f]];
overlay1 = [overlay1 imageByCroppingToRect:image.extent];
overlay1 = [overlay1 imageByApplyingFilter:#"CIPerspectiveTransformWithExtent" withInputParameters:#{#"inputExtent":[CIVector vectorWithCGRect:image.extent],#"inputTopLeft":[CIVector vectorWithCGPoint:CGPointMake(topLeft.x - 5, topLeft.y + 5)],#"inputTopRight":[CIVector vectorWithCGPoint:CGPointMake(topRight.x + 5, topRight.y + 5)],#"inputBottomLeft":[CIVector vectorWithCGPoint:CGPointMake(topLeft.x - 5, topLeft.y )],#"inputBottomRight":[CIVector vectorWithCGPoint:CGPointMake(topRight.x + 5, topRight.y ) ]}];
overlay = [ overlay1 imageByCompositingOverImage:overlay];
I have kept the width for 5 pixels. topLeft , topRight.... are the respective CGPoint for the position. For a complete rectangle you will also need bottomLeft and bottomRight.
Overlay is the original CIImage .
This isn't exactly what you asked about, but it might be better if you just want to display the image with a border (rather than actually drawing a border onto it)...
You can use CALayer to add borders (and rounded corners, shadows, etc.) to any UIView...
// imgView is an instance of UIImageView, but this works with any UIView
imgView.layer.borderWidth = 2.0f;
imgView.layer.borderColor = [[UIColor blackColor] CGColor];
You also need to #import <QuartzCore/QuartzCore.h> and link to the QuartzCore framework for this to work.
I have a custom UIView class which I add a UIScrollView on top of. What i am trying to do is add a gradient to the UIView's layer so that is visible above the scroll view. Currently i am doing it this way:
[self.layer insertSublayer:self.leftShadowLayer atIndex:[self.layer.sublayers count]];
[self.layer insertSublayer:self.rightShadowLayer atIndex:[self.layer.sublayers count]];
but this seems a little hackish and prone to issues for some reason. Is there any other preferred way of adding a sublayer is the top layer in a view regardless of what else is added to the view's layers?
Thx
Draw the gradient using CGGradientCreateWithColorComponents() or CGGradientCreateWithColors().
The documentation lies at-
CGGradientRef guide
See the sample code to draw a CALayer, which u can add to a UIView's layer property.
-(void)drawInContext:(CGContextRef)theContext
{
// self.opacity=.5;
CGMutablePathRef thePath = CGPathCreateMutable();
//CGPathMoveToPoint(thePath,NULL,100.0f,200.f);
CGPoint aOnePoint=CGPointMake(cgpoint.x,tipPoint.y);
CGPoint aTwoPoint=CGPointMake(cgpoint.x+5,460);
CGPoint aThreePoint=CGPointMake(320,100);
CGPoint aFourPoint=CGPointMake(320,tipPoint.y-25);
CGPoint points[]={aOnePoint,aTwoPoint,aFourPoint};
CGPathAddLines(thePath, NULL,points,3);
CGContextBeginPath(theContext);
CGContextAddPath(theContext, thePath);
//CAGradientLayer here...using the CGCreateGradient methods.
CGContextSetLineWidth(theContext,2.0f);
CGSize theShadowSize = CGSizeMake(4.0f,4.0f);
CGContextSetShadowWithColor(theContext, theShadowSize,3,[UIColor darkGrayColor].CGColor);
CGContextSetFillColorWithColor(theContext,[UIColor redColor].CGColor);
CGContextFillPath(theContext);
CFRelease(thePath);
}
this way you can draw your own layer and add it to .layer property of a view.
Notice that we have to override the - (void)drawInContext:(CGContextRef)theContext to have a custom layer. May need to call
Hope that helps..
i would like to draw a border / shadow around a uiscrollview, i know that i could get there with an additional view or scrollview but dont like the handling an drawbacks but i heard that there should be a possibility to dirctly draw a border to a scrollview and that is what i would prefer.
I am quiet new to iphone developement,any answer would helpful.
If you use the layer property of your scroll view (or any UIView) you can easily get a solid border...
#import <QuartzCore/QuartzCore.h>
...
myView.layer.borderWidth = 2;
myView.layer.borderColor = [UIColor blackColor].CGColor;
You can also use the layer to apply real-time shadows by setting the layer.shadow* properties, but performance can be slow with this technique, so I generally prefer to use the following more complex, but more performant technique. You can create a PNG image with transparency in the middle and shadows around the edge - it needs to have 9 distinct areas: 4 for each corner, 4 for each edge, and a completely transparent 1x1 pixel area in the middle. For example if your shadow extends 6 pixels into your image, your image would be 13x13 with the 6 pixel wide/high borders and the 1x1 area in the middle. Then you set it as a scalable image using:
newImage = [image stretchableImageWithLeftCapWidth:6 topCapHeight:6];
UPDATE: Since iOS 5.0 stretchableImageWithLeftCapWidth:topCapHeight: is deprecated so only use this if you still want to support iOS 4.x devices. If you want to support only iOS 5.0+ devices use this instead:
newImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(6, 6, 6, 6)];
Then you put the image on the parent view so it takes up the entire area of the scroll view. If you want the shadows to go OVER your scrollable elements, (so your scroll view looks inset/behind the rest of the page) then place a transparent UIView over the top with the shadow image on it so that it shows through to your scroll view behind it.
Dont forget to:
#import <QuartzCore/QuartzCore.h>
If you want to use
myView.layer.borderWidth = 2;
myView.layer.borderColor = [UIColor blackColor].CGColor;
To get the CGColorRef from an UIColor you can also use this example:
myView.layer.borderWidth = 2;
myView.layer.borderColor = [UIColor blackColor].CGColor;
myView.layout.borderColor generates an incompatible pointer warning when using UIColor, and did not change the border for me.
Using CGColorRef worked for me instead:
CGFloat lComponents[4] = {0,0,0,1};
CGColorSpaceRef lColorSpace = CGColorSpaceCreateDeviceRGB();
myView.layer.borderColor = CGColorCreate(lColorSpace, lComponents);
CGColorSpaceRelease(lColorSpace);