In my project, we are customizing the UITextField for getting the icon image in the right side of the textField(like the bookmark icon in browser).
The functionality is,
1) the textField shouldn't be editable
2) Initially the right icon in black color.
3) IF user starts click, the icon image to be changed to Orange color.
4) If user releases, the icon image turned into its original state (black color)
First 2 points were implemented.
For 3rd point overridden the UIControl::beginTrackingWithTouch method and changed the icon color to Orange.
Requesting your help for implementing the last point. I am unable to get the release event in order to change the black color image.
Tried using touchesEnded but this is called only when release done when user comes out from the control.
anyone help me how to identify when the user click ends.
Thanks and Regards.
IIRC, the user click and hold the bookmark icon ? if yes maybe you can use UIButton for that:
UIImage *normalImage = [UIImage imageNamed:#"normal_image.png"];
UIImage *touchedImage = [UIImage imageNamed:#"touched_image.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 50, 50); // put your frame here
[button setImage:normalImage forState:UIControlStateNormal]; // Normal state image
[button setImage:touchedImage forState:UIControlStateHighlighted]; // Touched state image
Override below methods:
(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
(void)cancelTrackingWithEvent:(UIEvent *)event;
Related
I have created a custom UIButton for an iOS 4.3+ application. I wanted to make the background image stretch, so I and used the following methods to set its background image:
[myButton setBackgroundImage:[[UIImage imageNamed:myImagePath] stretchableImageWithLeftCapWidth:leftStretchValue topCapHeight:topStretchValue] forState:UIControlStateNormal]
[myButton setBackgroundImage:[[UIImage imageNamed:myHighlightedImagePath] stretchableImageWithLeftCapWidth:eftStretchValue topCapHeight:topStretchValue] forState:UIControlStateHighlighted]
[myButton setBackgroundImage:[[UIImage imageNamed:mySelectedImagePath]
stretchableImageWithLeftCapWidth:eftStretchValue topCapHeight:topStretchValue] forState:UIControlStateSelected]
I have added an event handler to the custom button
[myButton addTarget:self action:#selector(buttonHighlighted:) forControlEvents:UIControlEventTouchDown];
[myButton addTarget:self action:#selector(buttonSelected:) forControlEvents:UIControlEventTouchUpInside];
In the above mentioned methods, I have set the selected and the highlighted state of the button accordingly. I have changed the frame of the UIButton to adjust the dimensions of an irregular image (mySelectedImage and myHighlightedImage, neither of which is a rectangle), so that it gets aligned properly along with myImage.
- (void) buttonSelected {
myButton.selected = !myButton.selected; //setting the selected property to NO in the viewDidLoad
//code to change the frame of the UIButton to accomodate the irregular image
}
- (void) buttonHighlighted {
myButton.highlighted = YES;
}
The problem I am facing is that when I select myButton, a gray color overlay is displayed on myImage for a very short time before the images myHighlightedImage and mySelectedImage are displayed as its background. I have set the background color of myButton as clearColor, thinking that might be the reason, but it is not getting solved.
What could be the possible issue... ?
button.adjustsImageWhenHighlighted = NO;
I think that is what you are looking for..
Is it possible to have a custom UIButton that has an image covering only half of it?
I imagine it would be something like this:
UIButton *someButton = [UIButton buttonWithType:UIButtonTypeCustom];
[someButton setBackgroundImage:[UIImage imageNamed:#"buttonPicture"]];
/* Then there must be some property I can set that prevents the button from stretching the image?? */
.
.
.
I want to have a 50x100px button which only has a 50x50px image on the top half, and to be transparent on the bottom half.
I know how to create a custom button and everything. Im just woondering what the property is that controls the stretching of the backgroundImage.
Thanks!
Use
[someButton setImage:[UIImage imageNamed:#"buttonPicture"] forState: UIControlStateNormal];
someButton.imageEdgeInsets = UIEdgeInsetsMake(-50, 0, 0, 0);
I think you could:
create your button image as a 50x100px image (same size as the button);
make this image be half transparent (PNG with alpha),
instead of trying to assign the button a smaller image covering only half of it and prevent stretching.
I am having trouble with the behavior of one of my UIButtons. I am trying to essentially make it a toggle button, but I am running into the problem below.
I have the code:
UIButton *likeButton = [[UIButton alloc] initWithFrame:CGRectMake(horizontalOffset+buttonWidth, verticalOffset, buttonWidth, buttonHeight)];
[likeButton setImage:[UIImage imageNamed:#"like-off.png"] forState:UIControlStateNormal];
[likeButton setImage:[UIImage imageNamed:#"like-on.png"] forState:UIControlStateHighlighted];
[likeButton setImage:[UIImage imageNamed:#"like-on.png"] forState:UIControlStateSelected];
[likeButton addTarget:self action:#selector(likeButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
which fires the method:
-(void)likeButtonPressed:(id)sender {
UIButton *button = (UIButton *)sender;
[button setSelected:!button.selected];
}
The behavior I am seeing is that when I tap the button down (and highlight it), it works as expected, and the 'like-on.png' image is used for the highlighted state, and it remains on in the 'selected' state.
However, when I tap the button again, to toggle it off, I see a gray highlighted state when I press my finger. When I release my finger, I see the 'like-off' image is shown as expected.
I would like to avoid seeing the gray highlighted state when I press my finger down on the button when I go to toggle it off. Instead I would like to make sure that the highlighted state on toggle-off uses the 'like-on.png' image as specified in the code.
What's going on here? Any ideas where my code could be incorrect?
Many thanks,
Brett
You're missing the image for the selected and highlighted state:
[likeButton setImage:[UIImage imageNamed:#"like-on.png"] forState:UIControlStateSelected | UIControlStateHighlighted];
If you don't set it, the image of the normal state is used. From the -[UIButton setImage:forState:] documentation:
In general, if a property is not specified for a state, the default is to use the UIControlStateNormal value.
If you don't want your images to be modified when they are highlighted, set:
likeButton.adjustsImageWhenHighlighted = NO;
I think the selected property of UIButton is meant for something different (think of the desktop UI).
It would be more consistent to change the for all states according to a BOOL that tracks if it is "on" or "off".
Thus,
-(void)likeButtonPressed:(id)sender {
UIButton *button = (UIButton *) sender;
liking = !liking;
if (liking) {
// configure the four states with "like-on" and other images
}
else {
// configure the four states with "like-off"
}
}
Otherwise you would use the state of a UI element to represent your program logic, which is basically flawed. The only instance where this is sort of acceptable (but not really) is a UISwitch.
I'm adding a UIButton as a subView in a popup and I can't get it to show up semi-transparently. The background for the main view of the popup does show up semi-transparently, but this UIButton stays fully opaque. Can someone tell my why the code below is not working? Thanks.
UIButton* checkButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
checkButton.frame = CGRectMake(187, 288, 30, 30);
[checkButton setTitle:#"?" forState:UIControlStateNormal];
checkButton.opaque = NO;
[checkButton setBackgroundColor:[UIColor colorWithWhite:1.0 alpha:0.3]];
[checkButton setTitleColor: [UIColor colorWithRed: 51 / 255.0 green:0 blue: 153 / 255.0 alpha:0.5] forState: UIControlStateNormal];
[checkButton addTarget:self action:#selector(check) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:checkButton];
The background for a RoundedRect button is the rectangle in which it is located, and not the button itself. Try changing the background color to red or something equally visible and you will see that the background is only visible between the rounded corners of the button and the rectangular frame in which the button is set. Sadly, you cannot change the color of the button, which is what most people think they are doing when they change the backgroundColor property.
To change the button color, you will need to use UIButtonTypeCustom.
try setting your UIColor to
myButton.layer.backgroundColor = [UIColor x..]
you'll need a
#import <QuartzCore/QuartzCore.h>
im pretty sure the colour in the rounded rect button is in the layer, not in the regular background, this is why people struggle to change its colour..
alternately, put the alpha on the views colour back to 1 and hit the views alpha property, that'll certainly do the lot in one move.
PengOne is right – setting the background color doesn't change the color of the rounded rect. It only affects the corners around the rect.
But you can also just set the button's alpha property to something less than one. Try 0.7 to make the view semi-transparent.
Try using UIButtonTypeCustom instead UIButtonTypeRoundedRect as the button type.
UIButtonTypeRoundedRect is weird. Setting background /alpha etc on it only changes the background of the rectangle into which the button is rendered.
You could change the button type to UIButtonTypeCustom and then use QuartzCore to set cornerRadius to make it appear rounded.
I have a UIToolbar that I've customized with my own background image. Consequently, the built-in UIBarButtonItem appearance doesn't work for me, so I'm using images that are already prepared to show in the bar. I create a custom button item with this method:
+ (UIBarButtonItem *)customWithImage:(UIImage *)image enabled:(BOOL)enabled target:(id)target action:(SEL)selector {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
//I've tried different values for the frame here, but no luck
button.frame = CGRectMake(0, 0, 44, 44);
button.enabled = enabled;
button.showsTouchWhenHighlighted = YES;
[button addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside];
[button setImage:image forState:UIControlStateNormal];
UIBarButtonItem *it = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
//Tried changing this, to no avail
it.width = 32.f;
return it;
I have one button on the left and one on the right and I'm trying to make it so that if you tap on the far left or far right of the UIToolbar, the corresponding button is tapped. However, with these custom buttons, the hit targets do not extend all the way to the edges of the UIToolbar, but are inset from the sides:
http://skitch.com/andpoul/d1p8g/hit-targets
Any help greatly appreciated!
UIBarButtonItem.width might be ignored if you're using a custom view (it probably just uses the width of the view).
A lame hack is to make the toolbar wider (so it sticks outside the screen) and add transparent edges to the background image to compensate. This brings the buttons closer to the edge of the screen.
An alternative is just to use a UIImageView with UIButton subviews.
I think the only way you will have to go is to make buttons wider (change image by adding some from left for one and right for another) and adjust size...