I have researched a lot on how to add gradient in NavigationBar in iOS, but it doesn't show what I need. I want 2 color gradient with WHITE on TOP and CLEAR on BOTTOM. like this :
Tried using CAGradientLayer and also CRGradientNavigationBar,
but everything I have tried always shows White on TOP but when i set bottom color to CLEAR, it shows a weird black translucent color.
How to achieve similar NavigationBar like in the picture above?
Thanks!
Create gradient layer and add it as background of navigation bar.
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.navigationController.navigationBar.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];
[self.navigationController.navigationBar setBackgroundImage:[self imageFromLayer:gradient] forBarMetrics:UIBarMetricsDefault];
For creating image from layer.
(UIImage *)imageFromLayer:(CALayer *)layer
{
UIGraphicsBeginImageContext([layer frame].size);
[layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return outputImage;
}
One more thing, there is one library available in github : CRGradientNavigationBar you can also use this library.
Got it! From this link. Actually clearColor has a black color channel with an alpha of 0, so instead use
[UIColor colorWithWhite:1 alpha:0]
and it will do the job! Thanks!
You can try creating a UIView on the top of your screen with the top constrain -70, and add CAGradientLayer inside it with it size.
then make your navigation bar transparent by adding UIImage()//empty image, to is as a background, this way it will show the UIView with grade CAGradientLayer in background
Related
I am working on UIImageView masking. Where i want image background like below.
You can see the black effect at bottom on text "Himalaya Gel".
I want to add such effect every time i add image.
So if anybody know's the solution pls help.
Thanks in advance.
You can use a gradient on the UIImageView, any time you change the UIImage, the gradient will still stay.
- (void)addGradientToView:(UIView *)view
{
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = CGRectMake(0, view.frame.size.height * 0.8, view.frame.size.width, view.frame.size.height * 0.2);
gradient.colors = #[(id)[[UIColor clearColor] CGColor],
(id)[[UIColor blackColor] CGColor]];
[view.layer insertSublayer:gradient atIndex:0];
}
The gradient will only start on the bottom of the view (view.hieght * 0.8) with a clear color, and continue till the end will black gradient.
I want to make a color picker just like in the picture, but I could not do the triangle, which has three points to show the gradient, White, Black and the selected color.
The black and white are always the same, but the color selected should vary according to the user selects in the circle, but do not know how to make a gradient opposite to those three points, and displays the image.
(Only objective c, please)
Hope, someone could help me. Thanks.
HSL Picker
Here is what you can try to create gradient with three colors:
Get the reference from your triangle edges that have the reference to the color they point to.
BOOL isHorizontal=YES;
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[self.startColor CGColor],(id)[self.midColor CGColor], (id)[self.endColor CGColor], nil];
gradient.endPoint = (self.isHorizontal) ? CGPointMake(1, 0) : CGPointMake(0, 1);
[self.layer insertSublayer:gradient atIndex:0];
If you want to change the gradient direction, play around with:
[gradient setStartPoint:CGPointMake(0.0, 0.5)];
[gradient setEndPoint:CGPointMake(1.0, 0.5)];
I'm creating an iOS7 app and I have an UITextView inside a UITableView cell with a CAGradient applied to it. If I use different colors from clearColor works fine, but if I use clearColor as one of the colors for the gradient it turns out to be gray...
This is my code. theContent is my UITextView.
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = theContent.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
[theContent.layer insertSublayer:gradient atIndex:100];
And this is the final (wrong) result...
How can I fix this to have a clearColor to whiteColor gradient???
it may help on you if you try to use
[UIColor colorWithWhite:1.f alpha:0.f];
instead of the clearColor for the white tone.
I am trying to create a UIView with a dark gray gradient:
UIView *sectionSpacer = [[UIView alloc] init];
sectionSpacer.backgroundColor = [UIColor clearColor];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = sectionSpacer.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[RGB(80, 83, 88) CGColor], (id)[RGB(69, 71, 73) CGColor], nil];
[sectionSpacer.layer addSublayer:gradient];
For some reason the gradient view is always blue even thought the RGB values are dark grays. Why is this?
If you just init the view without a frame, it'll default to CGRectZero, so your layer will also have 0 width and height, which is why you don't see it (the gradient you do see looks like a standard UITableView header that may come from elsewhere, I doubt that it is even the same view you're initializing in the code you've shown).
How do you darken a view as if it were disabled/highlighted, preferably without using any additional views?
By view I mean a UIView, with all its children. I want to achieve the same effect of a disabled/highlighted UIButton.
Do not assume that the view is fully opaque.
What I'm currently playing with:
Create a black layer with opacity (_highlightLayer). This is similar to the "black view with alpha" approach.
Mask _highlightLayer with an non-opaque image of the original view.
Add the _highlightLayer to the view's layer.
Only the non-transparent pixels of the view will be darkened.
The code:
- (void)highlight
{
// Black layer with opacity
_highlightLayer = [CALayer layer];
_highlightLayer.frame = CGRectMake(0, 0, self.layer.bounds.size.width, self.layer.bounds.size.height);
_highlightLayer.backgroundColor = [UIColor blackColor].CGColor;
_highlightLayer.opacity = 0.5;
// Create an image from the view
UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0.0);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *maskImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// Create a mask layer for the black layer
CALayer *maskLayer = [CALayer layer];
maskLayer.contents = (__bridge id) maskImage.CGImage;
maskLayer.frame = _highlightLayer.frame;
_highlightLayer.mask = maskLayer;
[self.layer addSublayer:_highlightLayer];
}
And then:
- (void)unhighlight
{
[_highlightLayer removeFromSuperlayer];
_highlightLayer = nil;
}
Of course, this should only be used for small views.
Example:
You have a UIButton *button1 and UIView *view1
You can disable a button and a view in this way:
[view1 setHidden:YES];
[button1 setEnabled:NO];
Enabling a button and a view can be done this way:
[view1 setHidden:NO];
[button1 setEnabled:YES];
Hope this helps..
While this approach fails to meet your preference of not using additional views, simply adding a black view with alpha of 0.6 or so seems to achieve the effect, with the added benefit that you can use this new view to intercept UIEvents so that all the subviews are effectively disabled en masse.
You can even get graphically fancy and instead of just using a black background for the overlaid view, you can fill its background with a radial gradient to achieve the sort of spotlighted effect that happens in iOS when a popup view disables the view behind it...