I am having some trouble setting the correct location of the image for a UIImageView, which I am adding as a subview to a UIButton. I start by creating the button and adding some sublayers:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:bounds];
//add gradient background
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = button.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[UIColor colorWithRed:.5 green:.5 blue:.5 alpha:1.0].CGColor, (id)[[UIColor blackColor] CGColor], nil];
[button.layer insertSublayer:gradient atIndex:0];
//set green background
CALayer *layer = [CALayer layer];
layer.frame = CGRectInset(button.bounds, 5, 5);
layer.backgroundColor = [UIColor colorWithRed:.55 green:.8 blue:.5 alpha:1.0].CGColor;
[button.layer insertSublayer:layer above:gradient];
I then use two methods to set the image. The first (which I use if no image is saved) uses an image resource that is scaled to be the right size, and is part of the app bundle. I set this with the following code:
UIImageView *v = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"profile.png"]];
[v setBounds:CGRectInset(button.bounds, 8, 8)];
[button addSubview:v];
The trouble comes from when I use an image taken through the camera, and saved to the file system. I am setting this to the background using the following code:
//path is an NSString set the the documents location of the image.
UIImageView *v = [[UIImageView alloc] initWithImage:[UIImage imageWithContentsOfFile:path]];
[v setBounds:CGRectInset(button.bounds, 8, 8)];
[v setContentMode:UIViewContentModeScaleToFill];
[button addSubview:v];
The output to the screen now shows the image way offset from where it should be:
What am I doing wrong? How do I correctly scale/fit the image in its parent view? I have tried simply setting the button image, but nothing appeared (perhaps the image was behind the sublayers?).
Use -setFrame method to set the frame of imageview instead of bounds
[v setFrame:CGRectInset(button.bounds, 8, 8)];
Thus the code become
UIImageView *v = [[UIImageView alloc] initWithImage:[UIImage imageWithContentsOfFile:path]];
[v setFrame:CGRectInset(button.bounds, 8, 8)];
[v setContentMode:UIViewContentModeScaleToFill];
[button addSubview:v];
Related
I would like to change the color of an image view when the user touches it. I don't need it to change a great deal. However, I would like it to change to a shade of blue. I found the following code to change the gradient but it is not having any effect. I don't need a gradient, actually, only a tint. Would appreciate any suggestions.
UIView *snapshot = [[UIImageView alloc] initWithImage:image];
snapshot.layer.masksToBounds = NO;
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.colors = #[(id)[UIColor redColor].CGColor, (id)[UIColor blackColor].CGColor];
[snapshot.layer insertSublayer:gradient atIndex:0];
An easy and non-intrusive way is to add a translucent overlay to your image view. This can then be shown and hidden as the button is pressed and released.
- (void)indicatedImageViewPressed:(UIImageView *)imageView on:(BOOL)on {
UIView *overlay = [imageView viewWithTag:1]; // See if already created
if (overlay == nil) {
overlay = [[UIView alloc] initWithFrame:imageView.bounds];
overlay.tag = 1; // Mark view to find it next time
overlay.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:0.3]; // Your color overlay goes here
[imageView addSubview:overlay];
}
overlay.hidden = !on;
}
You can try giving the UIImage a tint
UIImage *image = [[UIImage imageNamed:#"Your Image"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.tintColor = [UIColor clearColor]; // Or any color really you'd like would work
imageView.image = newImage;
And then changing that tint when the user touches the image using a tap gesture recognizer
I have a custom UIButton with transparent background and white title.
I'm looking for a simple solution to invert it on highlight (white background and transparent title) as it is achieved on system UISegmentedControl.
Is there simpler solution than inverting alpha on snapshot used as a CALayer mask?
If not, could you tell how can I invert CALayer alpha?
You can draw the text on a CGContext using Destination Out as blend mode.
This code seems to work:
- (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor greenColor];
UIFont* font = [UIFont fontWithName:#"Helvetica-Bold" size:18];
NSString* buttonText = #"BUTTON";
CGSize buttonSize = CGSizeMake(200, 50);
NSDictionary* textAttributes = #{NSFontAttributeName:font};
CGSize textSize = [buttonText sizeWithAttributes:textAttributes];
UIGraphicsBeginImageContextWithOptions(buttonSize, NO, [[UIScreen mainScreen] scale]);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, buttonSize.width, buttonSize.height)];
CGContextAddPath(ctx, path.CGPath);
CGContextFillPath(ctx);
CGContextSetBlendMode(ctx, kCGBlendModeDestinationOut);
CGPoint center = CGPointMake(buttonSize.width/2-textSize.width/2, buttonSize.height/2-textSize.height/2);
[#"BUTTON" drawAtPoint:center withAttributes:textAttributes];
UIImage* viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView* imgView = [[UIImageView alloc] initWithImage:viewImage];
[self.view addSubview:imgView];
}
By the way, if you want to set the UIImage in a UIButton instead of just adding it to a view:
UIButton* boton = [[UIButton alloc] initWithFrame:CGRectMake(50, 50, viewImage.size.width, viewImage.size.height)];
[boton setBackgroundColor:[UIColor clearColor]];
[boton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
boton.titleLabel.font = font;
[boton setTitle:buttonText forState:UIControlStateNormal];
[boton setImage:viewImage forState:UIControlStateHighlighted];
[self.view addSubview:boton];
You could set
-(void)viewDidload: {
[yourButton setTitleColor:(UIColor *)color
forState:UIControlStateHighlighted];
[yourButton addTarget:self
action:#selector(changeButtonBackGroundColor:)
forControlEvents:UIControlEventTouchDown];
}
-(void)changeButtonBackGroundColor:(UIButton *)button {
[button setBackgroundColor:[UIColor yourColor]];
}
remember to change it back with events: UIControlEventTouchUpInside and UIControlEventTouchOutSide :)
I want to build a totally transparent view, the backgroundColor maybe clearColor. Inside this view I want to put a small image. And in the four sides of this transparent view, I want to see the effect of shadow. The shadow must be totally outside the view. I know that I must override the drawRect method in UIView, but don't know how to do this.
try this....
UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(50.0, 100.0, 100.0, 100.0)];
shadowView.layer.cornerRadius = 15.0;
CALayer *layer = shadowView.layer;
layer.shadowOpacity = 1.0;
layer.shadowColor = [[UIColor blackColor] CGColor];
layer.shadowOffset = CGSizeMake(0,0);
layer.shadowRadius = 15;
[self.view addSubview:shadowView];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];
[imageView setImage:[UIImage imageNamed:#"icon.png"]];
[shadowView addSubview:imageView];
What is the problem with doing something like this?
#import <QuartzCore/QuartzCore.h> // at the top of the file
UIView *transparentView = [[UIView alloc] initWithFrame:CGRectMake(50,50,200,200)];
transparentView.backgroundColor = [UIColor greenColor];
transparentView.alpha = 0.5f;
transparentView.clipsToBounds = NO;
transparentView.layer.shadowColor = [UIColor blackColor].CGColor;
transparentView.layer.shadowOpacity = 1;
transparentView.layer.shadowRadius = 1;
UIImageView *imageView = [[]UIImageView alloc] initWithFrame:CGRectMake(50, 50, 50, 50)];
imageView.image = [UIImage imageNamed:#"IMAGE NAME"];
[transparentView addSubview:imageView];
As you can see, based on your description, no drawRect: required, unless for some reason you want to draw the shadow manually, but there isn't a reason to.
I am trying to add a gradient behind a transparent image. I do this on the map leftCallOutAccessoryView however no matter what I try the gradient layer always shows above the imageView and want it to appear behind it
heres my code for MKAnnotationView which is an ivar called pinView
pinView.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
UIImageView *profileIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Profile.png"]];
pinView.leftCalloutAccessoryView = profileIconView;
CAGradientLayer *backgroundLayer = [CAGradientLayer layer];
backgroundLayer.frame = CGRectMake(0, 0, 30, 30);
backgroundLayer.cornerRadius = 2;
backgroundLayer.borderWidth = 1;
backgroundLayer.borderColor = [UIColor whiteColor].CGColor;
backgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
[profileIconView.layer insertSublayer:backgroundLayer atIndex:0];
I managed to figure it out using the below, in short I create a empty view then add the imageView as a subview to the view and now its all sweet!:
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];
UIImageView *profileIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Profile.png"]];
pinView.leftCalloutAccessoryView = view;
CAGradientLayer *backgroundLayer = [CAGradientLayer layer];
backgroundLayer.frame = view.bounds;
backgroundLayer.cornerRadius = 2;
backgroundLayer.borderWidth = 1;
backgroundLayer.borderColor = [UIColor whiteColor].CGColor;
backgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
[pinView.leftCalloutAccessoryView.layer insertSublayer:backgroundLayer atIndex:0];
[view addSubview:profileIconView];
I have an UIButton here where I'd like to have a gradient as the background below the image (symbol with transparent background), but I'm facing two different problems.
First of the CAGradientLayer seems to overlay on top of the image no matter how I try to add it, obscuring the image completely.
Secondly the gradient itself seems to be darkened a lot, like the button was disabled, which it isn't.
Here's my code:
self.backButton = [[UIButton alloc] initWithFrame:CGRectMake(15, 35, 28, 28)];
[backButton addTarget:self
action:#selector(goBack)
forControlEvents:UIControlEventTouchUpInside];
[backButton setBackgroundColor:[UIColor clearColor]];
CAGradientLayer *buttonGradient = [CAGradientLayer layer];
buttonGradient.frame = backButton.bounds;
buttonGradient.colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithRed:.0
green:.166
blue:.255
alpha:1] CGColor],
(id)[[UIColor colorWithRed:.0
green:.113
blue:.255
alpha:1] CGColor],
nil];
[buttonGradient setCornerRadius:backButton.frame.size.width / 2];
[backButton.layer insertSublayer:buttonGradient
atIndex:0];
[backButton setImage:[UIImage imageNamed:#"backarrow.png"]
forState:UIControlStateNormal];
[backButton setEnabled:NO];
[topbarView addSubview:backButton];
So I managed to get around this by doing a [button bringSubviewToFront:button.imageView] after adding the gradient. Seems that no matter what I do the new layer will add on top of the imageView, so I need to push that to the front afterwards.
Objective-C:
[button bringSubviewToFront:button.imageView]
Swift 4.1:
button.bringSubview(toFront:button.imageView!)
Alternatively, you can insert the gradient layer below the image view's layer
CAGradientLayer* gradient = [CAGradientLayer layer];
// ...
[button.layer insertSublayer:gradient below:button.imageView.layer];
SWIFT 3
Here goes an example: (Based on Neil answer)
let layer = CAGradientLayer()
layer.frame = CGRect(x: 0, y: 0, width: myButtonOutlet.layer.frame.size.width, height: myButtonOutlet..layer.frame.size.height)
layer.colors = [UIColor.white.cgColor, pixelColorReceta.cgColor]
layer.masksToBounds = true
layer.cornerRadius = myButtonOutlet.layer.cornerRadius
myButtonOutlet.layer.insertSublayer(layer, below: myButtonOutlet..imageView?.layer)
Happy coding :)
Swift 3
You can move the image above the gradient:
button.imageView?.layer.zPosition = 1
or insert the gradient under the image:
button.layer.insertSublayer(gradientLayer, below: button.imageView?.layer)