I am trying to add round corner to UISearchBar at the top-left and top-right corners.
However, I found the mask layer doesn't work on UISearchBar, no matter how I set it.
Here is my code
// UIView* bar = [searchBar_.subviews objectAtIndex:0]; // try to add mask to background view but also failed
UIView* bar = searchBar_;
CGRect toolbarBounds = bar.bounds;
CAShapeLayer *maskLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect: toolbarBounds
byRoundingCorners:UIRectCornerTopLeft
cornerRadii:CGSizeMake(5.0f, 5.0f)];
[maskLayer setPath:[path CGPath]];
[maskLayer setFillColor:[[UIColor greenColor] CGColor]];
bar.layer.masksToBounds = YES;
bar.layer.mask = maskLayer;
I have also tried the "Clip subviews", but it doesn't work either.
Then I try something more, I just set the background view (subview 0) hidden. To mu surprise, it is still visible.
Is there any magic in the UISearchBar?
The mask does work on UIToolbar.
Your problem could be related to how the mask property is implemented. It will not work if you add a mask layer to a layer which is already part of a hierarchy. The docs for CALayer say:
When setting the mask to a new layer, the new layer’s superlayer must first be set to nil, otherwise the behavior is undefined.
You'll have to remove the search bar from its superview before adding the mask layer. Wrap your last line like so:
UIView *superview = [bar superview];
[bar removeFromSuperview];
bar.layer.mask = maskLayer;
[superview addSubview:bar];
You can also use removeFromSuperlayer and addSublayer: if you prefer. Also, if your search bar isn't the topmost view in your hierarchy, make sure to find out where it is and put it back in the right place using insertSubview:atIndex: or one of the similar methods.
Related
According to the official doc on UIView about the contentMode property:
The content mode specifies how the cached bitmap of the view’s layer is adjusted when the view’s bounds change
What's defined the content in this definition? Is it a sub view or when we have define a background color for a view for example.
My very first guess was that it should apply at least for the subviews in a view, but for example the following code snippet will not give me the expected result when playing with the UIViewContentModeCenter tag:
UIView* redView = [[UIView alloc] initWithFrame:CGRectMake(80, 80, 150, 200)];
redView.contentMode = UIViewContentModeCenter;
redView.backgroundColor = [UIColor redColor];
UIView* greenView = [[UIView alloc] initWithFrame:redView.bounds];
greenView.backgroundColor = [UIColor greenColor];
[redView addSubview:greenView];
redView.frame = CGRectInset(redView.frame, -5, -5);
[self.view addSubview:redView];
I have just set up a redView that will include a greenView. I have also set-up the content mode of the redview to UIViewContentModeCenter - why in the code I wrote the greenView is not centered when I change the frame of its parent? isn't what UIViewContentModeCenter is supposed to do?
Thanks for clarifying!
Ps: You can easily test the above code in the loadView of a simple view controller template project.
From the documentation:
The content mode specifies how the cached bitmap of the view’s layer
is adjusted when the view’s bounds change.
For an image view, this is talking about the image. For a view that
draws its content, this is talking about the drawn content. It does
not affect the layout of subviews.
You need to look at the autoresizing masks in place on the subviews.
Content mode is a red herring here. If you can't achieve the layout
you need using autoresizing masks, then you need to implement
layoutSubviews and calculate the subview positions and frames
manually.
from jrturton's answer to: https://stackoverflow.com/a/14111480/1374512
First read about Content Modes here
In your example you change the frame of the red view. That will invoke layoutSubviews on the view which will reposition the green view according to the layout constraints or autoresizing masks. You haven't specified any. So the frame of the green view will stay the same.
The content mode specifies how the view's layer should update when resizing. Depending on the content mode drawRect will be called or not.
You can test the effect of the different content modes with the following example:
Add a UIView subclass, that draws a circle using this drawRect implementation:
- (void)drawRect:(CGRect)rect
{
// Drawing code
NSLog(#"drawRect %#", NSStringFromCGRect(rect));
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, self.bounds);
[[UIColor redColor] setFill];
CGContextFillPath(ctx);
}
In the view controller create and add the circle view:
CircleView* circleView = [[CircleView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
circleView.contentMode = UIViewContentModeCenter; // <- try different modes here
[self.view addSubview:circleView];
Now lets animate the frame and see what happens:
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:5 animations:^{
circleView.frame = CGRectMake(10, 10, 100, 200);
}];
});
I'm doing that asynchronously to force CoreGraphics to draw the view at least one time with the original frame.
When you don't set the content mode you end up with a blurry circle, because it just scales up without redrawing. UIViewContentModeCenter makes the small circle stay at the center - also no redraw needed. UIViewContentModeRedraw makes the view draw the view again with the new frame. Actually that happens before the animation starts.
Note that the content mode can affect the drawing performance.
This is my code.
listView.layer.masksToBounds = NO;
listView.layer.shadowOffset = CGSizeMake(-3, 3);
listView.layer.shadowColor=[[UIColor blackColor] CGColor];
listView.layer.shadowRadius = 4;
listView.layer.shadowOpacity = 1.0;
[listView.layer setShouldRasterize:YES];
It works good with shadow effect.
While changing
listView.layer.masksToBounds = YES;
I didnt get shadow effect.
The shadow is actually drawn below the UIView. If you set maskToBounds to YES, this clips any drawing outside of the UIView frame. Here is a SO link that describes this in more detail.
The shadow is drawn outside of the layer's bounds. You have to set listView.layer.masksToBounds = NO to see the shadow
if you set listView.layer.masksToBounds = YES you can't draw anything out side of bounds so you can not get shadow
Only below worked for me
[self.view bringSubviewToFront:subView];
If you have to use masksToBounds = YES; check out this SO post. It tells you how to use both shadows and rounded corners (in this particular case) on a view by using two nested views: the outer view casts the shadow and does not mask to bounds while the inner view has rounded corners and masks to bounds.
I'd like to draw a simple inset line in Interface Builder to separate some items in a list and make the UI a bit more tidy. I don't see any "line" or similar objects in the objects library and can't seem to find any drawing commands in Interface builder.
I use a very narrow UIView with backgroundColor set to the appropriate color.
There are no lines in the iPhone UI library. This functionality on Max OS X was supplied by NSBox, but on the iPhone there is no corresponding UI element.
If you're afraid a UIView might affect performance, you can draw a line in code using CoreGraphics' CAShapeLayers.
Every UIView has a CALayer, so draw the line and add it to the views CALayer.
You can do this either in a custom UIView's drawRect or in your view controller:
(Make sure to add Quartz framework to your project)
UIBezierPath *linePath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0,self.view.frame.size.width, 1)];
//shape layer for the line
CAShapeLayer *line = [CAShapeLayer layer];
line.path = [linePath CGPath];
line.fillColor = [[UIColor blackColor] CGColor];
line.frame = CGRectMake(xPosition, yPosition, self.view.frame.size.width,1);
[self.view.layer addSublayer:line];
In place of view, why not just use a label and set the appropriate background color?
I used a view and made it narrow & changed the color to make it look like a line. But my issue is I am using the line on a vertical scrollview and the lines also get scrolled.
Interface Builder does not allow you to draw the shadows essential for an inset line. If you work with Photoshop you know this.
The following code will draw an "inset" if the line is in front of a white/beige Background.
UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 1.0f)];
line.backgroundColor = [UIColor colorWithRed:(200.0f/255.0f) green:(200.0f/255.0f) blue:(200.0f/255.0f) alpha:1.0f];
line.layer.shadowColor = [UIColor darkGrayColor].CGColor;
line.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);
line.layer.shadowRadius = 0.5f;
line.layer.shadowOpacity = 0.4f;
line.layer.masksToBounds =NO;
[Background addSubview:line];
Remember to import < QuartzCore/QuartzCore.h>.
As an alliterative - in Interface Builder, add a view who's height is set to 2 points. Wire up a IBOutlet to that view and set its layer border color and width:
self.mySeparatorLine.layer.borderWidth = 1.0f;
self.mySeparatorLine.layer.borderColor = [UIColor lightGrayColor].CGColor;
You can use Progress View as an option for a horizontal line. Just change the tint color and progress to 1 which is 100%.
I have a UIView whose color is black and opacity is 0.9 or something like that. What I want to do is to fill the UIView with black portion, but a specified rectangular area should not get black. i.e. that particular rectangular area remains with clear color...
Any kind of help will be appreciated.
regards,
Imran
You can subclass UIView and override - (void)drawRect:(CGRect)rect
And do something of the following (untested, but used something similar myself);
- (void)drawRect:(CGRect)rect {
// fill the whole UIView with a color
[[UIColor colorWithRed:1 green:1 blue:1 0.9] setFill];
UIRectFill( rect );
// draw a rect
CGRect rectIntersection = CGRectIntersection(theRectIWantToDrawIn, rect);
[[UIColor clearColor] setFill];
UIRectFill( rectIntersection );
}
The code above draws a black view with a simulated clearColor hole in it at a certain position. You could, of course, alter this behavior to your liking.
This is quite fast.
UPDATE: Do note that I set the UIView on which I want to draw the rect to UIClear color (I added it to a xib and set those properties there) and unchecked 'Opaque'. That should make the hole see-through.
UPDATE 2: My answer was based on this answer (credit where credit is due): iPhone - Draw transparent rectangle on UIView to reveal view beneath
Add another view (subview) to that area. And set its to your desired color. Thats the easy solution with your current requirements.
Or you can use some quartz core functions.
You can create a small UIView in the main view by custom and set background clear color
UIView *View1 = [[UIView alloc] initWithFrame:CGRectMake(128.0f, 50.0f, 34.0f, 34.0f)];
[View1 setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:View1];
[View1 release];
I have a view with has another view (called swipeView) inside it. I'm trying to gradient color it using the CAGradientLayer - the code is below
CAGradientLayer *layer = [CAGradientLayer layer];
layer.colors = [NSArray arrayWithObjects:(id)[UIColor darkGrayColor].CGColor,
[UIColor lightGrayColor].CGColor, nil];
layer.frame = swipeView.bounds;
[swipeView.layer insertSublayer:layer atIndex:0];
I'm calling this in the ViewDidLoad method of the main view controller. I see no effect - the view I'm trying to color remains just the same. What am I doing wrong? Are there any other settings/ordering etc. I should know about?
I don't know if this is the problem you're having, but I was just having the exact same symptom, and after a few hours of bafflement, I discovered my problem: I was creating a button, adding the gradient layer, and only later positioning the button. Initially, the button dimensions are all 0, and when setting layer.frame = swipeView.bounds; I was setting the gradient layer to have 0 dimensions too. I added code so that when sizing the button, I also sized the sublayers to match, and this fixed the problem. I'm actually using MonoTouch, so the code looks like this:
btn.Frame = new RectangleF([the dimensions you need]);
foreach(var s in btn.Layer.Sublayers)
{
s.Frame = btn.Bounds;
}
Maybe you're creating a view in code, and the view hasn't been sized or positioned, and so when you add the gradient it also has no size, and that's why you can't see it. When the view changes size (in ViewDidLayoutSubviews maybe), resize the gradient layer and see if that solves it.
That should work. Are you sure you hooked up your swipeView outlet correctly? Debug your -viewDidLoad and verify that swipeView is not nil. Also double check that the bounds (layer.frame) is something sensible.
It shouldn't be necessary, but you can try throwing in a [layer setNeedsDisplay] just to force the layer to render again, but I don't think that is your issue here.
CAGradientLayer *layer = [CAGradientLayer layer];
layer.colors = [NSArray arrayWithObjects:(id)[UIColor darkGrayColor].CGColor,
(id)[UIColor lightGrayColor].CGColor, nil];
layer.frame = swipeView.bounds;
[swipeView.layer insertSublayer:layer atIndex:0];
Make sure that swipeView is not nil and try swipeView.frame.
You don't need the nil terminator at the end of the colors array.
Also, I found insertSublayer did not work, with index either 0 or 1. Changing to simply addSublayer did the trick.