I have a UIButton and I am trying to set a resizable image as background. The image is 25X25 points in size. I use the following code to set the image.
UIImage *backgroundImage = [[UIImage imageNamed:#"barbutton_normal"] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 2, 3, 2)];
[self setBackgroundImage:backgroundImage forState:UIControlStateNormal];
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[self setTitleEdgeInsets:UIEdgeInsetsMake(10,10, 10, 10)];
self.layer.cornerRadius = 6.0;
self.layer.masksToBounds = YES;
But the button appears like this:
What am I doing wrong? Also how can I make the top and bottom portion of the button a little bigger so that it does not look crammed up with the text.
Related
I have a UIButton initialised with a template vector image, like so:
UIImage *buttonImage = [UIImage imageNamed:#"image_0"];
self.button = [UIButton buttonWithType:UIButtonTypeCustom];
self.button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
[self.button setImage:buttonImage forState:UIControlStateNormal];
self.button.tintColor = [UIColor whiteColor]; // Icon color
The template icon is coloured white by setting the buttons tint. This works like a charm! :)
When a specific action occurs, I would like the button image to animate; repeatedly cycle through three images with the following method:
- (void)startAnimating {
if (![self.button.imageView isAnimating]) {
UIImage *buttonImage1 = [UIImage imageNamed:#"image_1"];
UIImage *buttonImage2 = [UIImage imageNamed:#"image_2"];
UIImage *buttonImage3 = [UIImage imageNamed:#"image_3"];
self.button.imageView.animationImages = #[buttonImage1,buttonImage2,buttonImage3];
//self.button.imageView.tintColor = [UIColor whiteColor];
self.button.imageView.animationDuration = 1;
[self.button.imageView startAnimating];
}
}
The problem is that the animating images are all black (like the template vector images), and not white as expected.
Even with the commented line added the images remain black. Any ideas as to what I could try to do in order to keep all images white at all times?
Thank you in advance,
Anders
I've subclassed UISlider and increased the width by doing this:
-(CGRect)trackRectForBounds:(CGRect)bounds {
bounds.size.height = 50;
return bounds;
}
And changed the thumb image:
- (void)drawRect:(CGRect)rect {
// Drawing code
[self setThumbImage:[UIImage imageNamed:#"icon_circle"] forState:UIControlStateNormal];
}
But this is happening:
The minimum track image starts from the center. I want to make it start from the thumb end. So initially, till the thumb it should be blue and when I drag it till the end the whole slider should be blue but at the end of the slider, the slider is not curved. It has got sharped edges. What should I do to get this right?
Couldn't find much help so I made my own custom one instead. It's also available on GitHub. https://github.com/bhavukjain1/SlideToActionSlideriOS
Are you setting the following properties?
UIImage *minImage = [[UIImage imageNamed:#"slider_minimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *maxImage = [[UIImage imageNamed:#"slider_maximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 5)];
UIImage *thumbImage = [UIImage imageNamed:#"sliderhandle.png"];
[[UISlider appearance] setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[[UISlider appearance] setMinimumTrackImage:minImage forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateNormal];
}
if so, take a look at this tutorial of how to create a custom slider, it comes with a sample project, may be it's easier for you to find your error by comparing your implementation against a working one.
To solve the rectangular corners issue, in drawRect
self.layer.cornerRadius = 25;
self.clipsToBounds = YES;
To show the correct image while dragging, you need to set this as well:
[self setThumbImage:[UIImage imageNamed:#"icon_circle"] forState:UIControlStateHighlighted];
As seen on the picture I have 2 buttons with 0.5 alpha and 1 alpha. I want to change the alpha of the title in the first picture to 1. Is this possible?
So far I tried these which did not work:
button.titleLabel.alpha = 1;
[button setTitleColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:1] forState:UIControlStateNormal];
UIButton *button = (UIButton *)view;
if(self.currentArray[index][2] != NULL) //before it was if (button == nil)
{
NSString *name = [[NSString alloc] initWithString:self.currentArray[index][2]];
UIImage *image = [UIImage imageNamed:self.currentArray[index][5]];
button = [UIButton buttonWithType:UIButtonTypeCustom];
int extraLeftInset = 0;
if ([self.currentArray[index][6] isEqualToString:#"true"]) {
//show it
}else if([self.currentArray[index][7] isEqualToString:#"true"]){
}else{
UIImage *locked = [UIImage imageNamed:#"fruitify_locked.png"];
button.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15);
[button setImage:locked forState:UIControlStateNormal];
extraLeftInset = - 256; //size of locked
button.backgroundColor = [UIColor clearColor];
button.alpha = 0.5;
}
button.frame = CGRectMake(0.0, 0.0, 56, 56);
button.tag = index;
[button setBackgroundImage:image forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
UIEdgeInsets buttonInset = UIEdgeInsetsMake(30, -2 + extraLeftInset, -20, -2);
[button setTitleEdgeInsets:buttonInset];
[button setTitle:name forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize: 8];
button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
[button addTarget:self action:#selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
}
One way to do this would be to adjust the alpha value of your image. That can be done by passing your image to this method,
-(UIImage *)image:(UIImage *) image withAdjustedAlpha:(CGFloat) newAlpha{
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0);
[image drawAtPoint:CGPointZero blendMode:kCGBlendModeCopy alpha:newAlpha];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
The alpha setting affects a view and all it's subviews. If you set the alpha on a button, every part of the button will have that alpha value.
You have a couple of possible options.
You could create a custom subclass of UIButton that managed a UILabel that was a sibling view of the button in the view hierarchy. That would get messy in several ways however. The normal button title methods wouldn't work, and you would have to introduce your own control logic to remove the button label from the superview if the button was removed
You might also try manipulating the alpha property of the button's image view. (The buttons' imageView property is read-only, but you CAN still make changes to the attributes of the image view in that property. You would need to test to make sure that the button doesn't mess up the image view's alpha property when it swaps images for the different button states (highlighted, selected, etc.) You would probably also need to set the opaque property on the button to NO, and perhaps on the image view as well. (You'll need to experiment.)
BTW, I like you trick of offsetting the button title using setTitleEdgeInsets. I hadn't seen that before.
The most common fix to this issue is "Set as background image, not normal image"
In my case I put background images on all my buttons, if it is a locked object, I add the image of a lock on top of the background image. The image looks as expected, but in that case it does not show the title of the image.
UIButton *button = (UIButton *)view;
if(self.currentArray[index][2] != NULL) //before it was if (button == nil)
{
NSString *name = [[NSString alloc] initWithString:self.currentArray[index][2]];
UIImage *image = [UIImage imageNamed:self.currentArray[index][5]];
button = [UIButton buttonWithType:UIButtonTypeCustom];
if ([self.currentArray[index][6] isEqualToString:#"true"]) {
//show it
}else{
//-------------------------
//--THE PROBLEM HAPPENS IF THIS PIECE OF CODE IS EXECUTED, SPECIFICALLY setImage
//-------------------------
button.alpha = 0.5;
UIImage *locked = [UIImage imageNamed:#"locked.png"];
button.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15);
[button setImage:locked forState:UIControlStateNormal];
}
button.frame = CGRectMake(0.0, 0.0, 56, 56);
button.tag = index;
[button setBackgroundImage:image forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
UIEdgeInsets buttonInset = UIEdgeInsetsMake(30, -30, -25, -30);
[button setTitleEdgeInsets:buttonInset];
[button setTitle:name forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize: 8];
[button addTarget:self action:#selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
}
Here is the images without lock and with lock:
The answer is here.
Quoting: "It appears that when you put an image in the button. the text is shoved off to the right. Use the edge settings to bring it back over the image."
What you have to do is play around with the title inset in order to bring the title label back to the right position.
I would suggest having something like an extraLeftInset variable that defaults to 0 and that is set to the right value in the else branch.
The answer above suggest to use this formula [Edge inset for Title] Left = -(imageWidth * 2), so the value should be -512 since you say that the image normally is 256. It would be nicer to evaluate it at runtime inspecting the size of the image though.
Hope this helps :)
CGSize imageSize = button.imageView.image.size;
button.titleEdgeInsets = UIEdgeInsetsMake(
0.0, - imageSize.width, 0.0, 0.0);
left side negative padding for titleLabel. Padding value must be equal to the image width
[slider setMaximumTrackTintColor: color]
has unexpected results in iOS 7.1 (the slider bar changes its position appearing at top instead of vertical center or disappears completely), while working fine with prior versions.
[slider setMinimumTrackTintColor: color]
does render the expected result.
This question might be related: UISlider setMaximumTrackTintColor,
but no answer so far.
Update:
I get this: instead of:
Update #2:
Using setMaximumTrackImage might work, but the solution I'm looking for is a way to set any random color and not a preexisting image.
Update #3:
This issue is still present in iOS 7.1.1.
Found this workaroud:
Create a 1x1px UIImage from a UIColor on the fly:
CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
[color setFill];
UIRectFill(rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
and then
[slider setMaximumTrackImage:image forState:UIControlStateNormal];
Looks like an expensive solution but it gets the job done.
Try this out:
UIImage *sliderLeftTrackImage = [[UIImage imageNamed:#"LeftImage.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
UIImage *sliderRightTrackImage = [[UIImage imageNamed:#"RightImage.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[sliderName setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal];
[sliderName setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal];
If you want to change thumb image the following code will work:
[sliderName setThumbImage:[UIImage imageNamed:#"ThumbImgName.png"] forState:UIControlStateNormal];
[sliderName setThumbImage:[UIImage imageNamed:#"ThumbImgName.png"] forState:UIControlStateHighlighted];
In same way, you can also use color instead of images.
I've created 2px images with the colour of slider track.
And then I set they as tracking images (here's with thumb image for iPad and iPhone)
UIImage *thumbImage = [UIImage imageNamed:#"slider"];
UIImage *trackImage;
if (isiPad) {
[[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateHighlighted];
trackImage = [UIImage imageNamed:#"menu-bar-ipad"];
}
else {
[[UISlider appearance] setThumbImage:[self imageWithImage:thumbImage scaledToSize:CGSizeMake(27, 27)] forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:[self imageWithImage:thumbImage scaledToSize:CGSizeMake(27, 27)] forState:UIControlStateHighlighted];
trackImage = [UIImage imageNamed:#"menu-bar"];
}
[[UISlider appearance] setMinimumTrackImage:trackImage forState:UIControlStateNormal];
[[UISlider appearance] setMaximumTrackImage:trackImage forState:UIControlStateNormal];
And that's all. Same solution as msmq I guess. And you can see both ways how to make a large image - two images way and scaling way.
Update
Reported this bug and it's already well known. Hopefully they will fix it soon...
Maybe a little bit late, but - here is the answer
You should read description of setter:
The color used to tint the standard maximum track images. Setting this
property removes any custom maximum track images associated with the
slider.
Also this applicable only for maximum color, because minimum setter just change titntColor:
The color used to tint the standard minimum track images.
This mean that slider use some image for maximum track and if u just set tint color nothing will be changes (nothing can't be tinted).
Solution (thanks to #user623396):
UIImage *currentSliderMaximumImage = self.slider.currentMaximumTrackImage;
CGRect rect = CGRectMake(0, 0, currentSliderMaximumImage.size.width, currentSliderMaximumImage.size.height);
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
[[[DynamicUIService service] currentApplicationColor] setFill];
UIRectFill(rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.slider setMaximumTrackImage:image forState:UIControlStateNormal];
As result u will get