I am trying to only add a border to the bottom of my .xib view. I currently have the following code which places a red border on ALL FOUR sides. I only want the border to be on ONE side, the bottom... How do I set the border to the bottom?
Current Code for class that controls .xib:
- (void)awakeFromNib {
self.contentView.layer.borderWidth = 5.0f;
self.contentView.layer.masksToBounds = YES;
self.contentView.layer.borderColor = [UIColor redColor].CGColor;
}
This is what I get:
CALayer *bottomBorder = [CALayer layer];
bottomBorder.borderColor = [UIColor redColor].CGColor;
bottomBorder.borderWidth = 1;
bottomBorder.frame = CGRectMake(0, self.contentView.frame.size.height - bottomBorder.borderWidth, self.contentView.frame.size.width, bottomBorder.borderWidth);
[self.contentView.layer addSublayer:bottomBorder];
If you don't know how to make a view that draws a red border at its bottom, then why not just make a red subview and pin it to the bottom?
Related
I am trying to add border line between 2 UIView, as i researched, the following code can add 4 borders.
CGFloat borderWidth = 5.0f;
self.imgview.frame = CGRectInset(self.imgview. frame, -borderWidth, -borderWidth);
self.imgview. layer.borderColor = [UIColor blueColor].CGColor;
self.imgview. layer.borderWidth = borderWidth;
However, i just need to add one border, any advice? Thanks in advance.
You can add one One more UIView (BorderView) between two UIView (View1 and View2). Give the border view appropriate width and background color.
If you want to set these borders programmatically, you can use the following snippet of code
+(void)SetImageViewBottomBorder :(UIImageView *)imageView{
CALayer *border = [CALayer layer];
CGFloat borderWidth = 1;
border.borderColor = [[self colorWithHexString:#"9B9B9B"] CGColor];
border.frame = CGRectMake(0, imageView.frame.size.height - borderWidth, imageView.frame.size.width, imageView.frame.size.height);
border.borderWidth = borderWidth;
[imageView.layer addSublayer:border];
imageView.userInteractionEnabled = YES;
imageView.layer.masksToBounds = YES;
}
you can replace the UIImageView with UIView and it will be working like a charm.
I need to set the length size of a UIButton border. I tried using this
[[jb layer] setBorderLength:2.2f];
but got a error saying "setBorderLength is not a method".
Here's my code for my UIButton border:
[[jb layer] setBorderWidth:2.2f];
[[jb layer] setBorderColor:[UIColor blackColor].CGColor];
setting a layer border parameters :
jb.layer.borderColor = [UIColor blackColor].CGColor;
jb.layer.borderWidth = 1;
jb.layer.cornerRadius = jb.bounds.size.width * 0.1;
There is no border length. The border width determines how thick your border is.
The border is around your frame. If you mean your border to be appear wider around your button consider changing the frame.
You would have to create layers and add it to the button to handle this scenario
CALayer * layer = [CALayer layer];
layer.bounds = CGRectMake(0, 0, buttonWidth, 1.0);
layer.backgroundColor = [UIColor blackColor].CGColor;
layer.opacity = 0.1f;
[self.button.layer addSublayer:layer];
This will add border on only the top border of button.
Change the frame and add 3 more layers to cover left right and bottom
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 :)
I am having a UIView which contains other subviews. I am applying border to this UIView and the border is applied to the whole UIView. For that see the first image.
But do not want the border around the title where it says "Leaderboard". How can i remove the border for that portion only. See the below image and in that see that there is no border around the header Leaderboard..
NO,CALayer borders don’t support that behavior.
But you can try an alternate method if you need to implement this,
try adding an n-point-wide opaque subview with your desired border color as its background color, on each side of your main view.
Add this Code:
CGSize mainViewSize = theView.bounds.size;
CGFloat borderWidth = 2;
UIColor *borderColor = [UIColor redColor];
CGFloat heightfromTop = 25;
UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0, heightfromTop borderWidth, mainViewSize.height-heightfromTop)];
UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(mainViewSize.width - borderWidth, heightfromTop, borderWidth, mainViewSize.height-heightfromTop)];
leftView.opaque = YES;
rightView.opaque = YES;
leftView.backgroundColor = borderColor;
rightView.backgroundColor = borderColor;
[mainView addSubview:leftView];
[mainView addSubview:rightView];
This will add borders to both sides only.Repeat the same idea for top and bottom also.
NB : heightfromTop is the height of the top section where you don't want the border view to be present, you can alter it as per your needs
You can subclass the UIView and implement the drawRect like:
- (void)drawRect:(CGRect)rect
{
float borderSize = 3.0f;
//draw the bottom border
CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
CGContextFillRect(context, CGRectMake(0.0f, self.frame.size.height - borderSize, self.frame.size.width, borderSize));
//draw the right border
CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
CGContextFillRect(context, CGRectMake(0.0f,0.0f, borderSize,self.frame.size.height));
//draw the left border
CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
CGContextFillRect(context, CGRectMake(self.frame.size.width - borderSize,0.0f, borderSize,self.frame.size.height));
}
Now, you need to use the subclassed UIView for creating the needed view.
I can add shadow to imageView layer using the following code.
self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"test.png"]];
self.imageView.center = self.view.center;
CALayer *containerLayer= [CALayer layer];
containerLayer.shadowColor = [UIColor blackColor].CGColor;
containerLayer.shadowRadius = 10.0f;
containerLayer.shadowOffset = CGSizeMake(10.0f, 5.0f);
containerLayer.shadowOpacity = .8f;
[containerLayer addSublayer:self.imageView.layer];
[self.view.layer addSublayer:containerLayer];
1 . The problem is that I don't know why I have to add imageView.layer to containerLayer to get the imageView shadow effect. However, if I add containerLayer to imageView.layer, there's no shadow in imageView, why?
The error code is:
self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"test.png"]];
self.imageView.center = self.view.center;
CALayer *containerLayer= [CALayer layer];
/*same as before*/
[self.imageView.layer addSublayer:containerLayer];
[self.view.layer addSublayer:self.imageView.layer];
Question2: the containerLayer's(used to provide shadow to imageView) frame = {{0, 0}, {0, 0}}, but the final position is in the center of screen. why?
A layer needs something opaque inside it to create a shadow around (unless you've specified a shadowPath explicitly). So your first version of the code works because the containerLayer has the imageView's layer as a sublayer. But, as you noticed from Question #2, the containerLayer's frame indicates that it is actually located in the upper left corner with a size of (0,0). The reason you can still see the image is that containerLayer is not masking to its bounds. Add this line to your first version, and the image disappears:
[containerLayer setMasksToBounds: YES]; // kitten (and shadow) is gone
Your version #2 of the code does not display a shadow because, in part, the containerLayer does not "contain" anything. If you use version #2 but give the containerLayer a new frame and an opaque background color, a shadow appears. (But this obviously isn't a solution, because the image is covered up...) Also note that there is no shadow when the layer's background is [UIColor clearColor].
[self.imageView.layer addSublayer:containerLayer];
containerLayer.frame = self.imageView.layer.bounds;
containerLayer.backgroundColor = [UIColor yellowColor].CGColor; // yellow box w/shadow
// containerLayer.backgroundColor = [UIColor clearColor].CGColor; // no shadow here
If you wanted to have a container with a shadow that houses the UIImageView, you could do something like this:
UIView * shadowView = [[UIView alloc] initWithFrame: self.imageView.frame];
shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
shadowView.layer.shadowRadius = 10.0f;
shadowView.layer.shadowOffset = CGSizeMake(10.0f, 5.0f);
shadowView.layer.shadowOpacity = .8f;
[self.view addSubview: shadowView];
self.imageView.frame = (CGRect) { CGPointZero, self.imageView.frame.size };
[shadowView addSubview: self.imageView];
A CALayer could be used instead of a UIView in a similar way. Or you could apply shadow attributes to the imageView's layer directly, making sure that neither the view nor the layer is clipping/masking to bounds.
If you want to add a shadow over the imageview just change the alpha value (0.0 min - 1.0 max) of that imageview. This will give you the shadow effect and whenever you want to remove the shadow just restore the alpha value to 1.0.
For ex:
self.imageview.alpha = 0.5 // shadow state
self.imageview.alpha = 1.0 // original state