NSButton with clickable image and text - objective-c

I've created an NSButton (see code below). The button displays the way I want (borderless, with image above text). If I click the text portion of the button the button will press down and call it's action. If I click the image portion of the button then absolutely nothing happens. How can I make the image portion of the NSButton clickable? I'm sure I can subclass the NSButtonCell to make this work, but I don't understand why that would be necessary.
NSButton *button = [[NSButton alloc] initWithFrame:NSZeroRect];
[button setBezelStyle:NSRegularSquareBezelStyle];
[button setBordered:YES];
[button setImagePosition:NSImageAbove];
[button setButtonType:NSMomentaryChangeButton];
[button setImage:[NSImage imageNamed:#"myImage"]];
[button setTitle:#"Button Title"];
[button setTarget:self];
[button setAction:#selector(buttonAction:)];

The image on the button itself. No need to make it clickable. Your click event will be caught by buttonAction.
You only need to show the animation that image got clicked. For that, you need another inverse image. And track the mouse down event, when you click down show the other image, when you release mouse (mouse up) show the default image.
This will give the feel of click on the image.

Maybe some other view overlaps your button's image? In code above, of course if you provide appropriate button frame, all works fine (for both, bordered and borderless button). Try it in clean project.

Related

How to implement a overlay button which is floating over the content view

in some iPhone apps i saw a button which was floating over the content view, eg. in the app EyeEm. When the user is scrolling the content, the button remains where it is and is still an interaction element.
Ho do I implement this?
My approach would be:
Create a view with content
Put a button on it
But how to make the button floating?
edit:
The floating seems to be the default behavior. Interestingly addSubview and insertSubview have the same behavior when placing the button... both are floating over the content.
- (void)addOverlayButton {
UIButton *oButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[oButton addTarget:self
action:#selector(aMethod:)
forControlEvents:UIControlEventTouchDown];
[oButton setTitle:#"Show View" forState:UIControlStateNormal];
oButton.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[self.view addSubview:oButton];
//[self.view insertSubview:oButton aboveSubview:_scrollView]; // same result as addSubview.
// Both solutions let the button float over the content.
}
Add a subview to your window's content view with insertSubview:aboveSubview: method with your button and scrollview as arguments, but be careful: if two sibling views both have transparency, the resulting drawing behaviour is undefined.
if you using storyboard just add button over it, like
if you want to do with code insertSubview:buttonView aboveSubview:scrollView
no matters its table or scroll view

Custom UIButton background image not appearing until tapped

In app my, if you tap on a certain area a UIPopoverController appears with UIButtons that perform certain tasks when clicked. The UIButtons (called CableDisconnectButton) are a subclassed UIButton so I could add two additional properties to them. I also add UILabels to go over the buttons
However, the background images of the buttons are invisible or don't appear until I tap on the screen somewhere. The UIlabels show up fine, but not the buttons. It can be a tap on the UIPopoverController or anywhere else on the screen. Once I've tapped that first time, the buttons will be there until the app is closed. So, this only happens right after launch and up until I first open that UIPopover. I tap plenty of times before opening the popover.
The functionality of the buttons and everything else works fine, but the background images are hidden on that first launch and I have no idea why.
Here's how I create the buttons and UILabel:
//create custom button
CableDisconnectButton *removeConnectionButton = [CableDisconnectButton buttonWithType:UIButtonTypeCustom];
removeConnectionButton.frame = CGRectMake(x, y, 190, 80);
removeConnectionButton.backgroundColor = [UIColor clearColor];
[removeConnectionButton setBackgroundImage:[UIImage imageNamed:#"images/cable_disconnect_button.png"] forState:UIControlStateNormal];
[removeConnectionButton setBackgroundImage:[UIImage imageNamed:#"images/cable_disconnect_button_over.png"] forState:UIControlStateHighlighted];
//set input and output jacks to button properties
removeConnectionButton.inputJack = inputJack;
removeConnectionButton.outputJack = self.outputJackView;
//add action to button
[removeConnectionButton addTarget:self action:#selector(removeConnectionButtonTarget:) forControlEvents:UIControlEventTouchUpInside];
//create label for output
UILabel *outputConnectionLabel = [[UILabel alloc] initWithFrame:CGRectMake(x+18, y+5, 180, 22)];
outputConnectionLabel.backgroundColor = [UIColor clearColor];
outputConnectionLabel.textColor = [UIColor whiteColor];
outputConnectionLabel.text = self.outputJackView.jackDisplayName;
outputConnectionLabel.font = [UIFont systemFontOfSize:16];
//add subviews
[self addSubview:removeConnectionButton];
[self addSubview:outputConnectionLabel];
I've tried to add a regular, non-custom UIButton and it appears without the tap. I suspect it may have something to do with the subclassed UIButton, but I'm not sure why. The extra properties added to the UIButton are strings that are crucial to the functionality of the and can't be omitted.
After beating my head off the desk for days, I ran into the "Clean Build Folder" option. I've cleaned the project plenty of times, but wasn't aware of "Clean Build Folder". To execute this, simple hold the Option key, click Product from the menu and select Clean Build Folder.
So, if your app isn't behaving the way it should and it makes no sense AT ALL, try this.

How do I change a UIButton state programatically?

the .selected and .highlighted properties don't cut it, because for some reason the button looks even more greyed out (darker shade of the non-highlighted image) when highlighted and selected are set to YES.
I need to make my button go off, just as if the user made it go off.
How do I do that?
I now think I understand what you mean. I put a image in my UIButton and tried to change the state of the button on touch down.
- (IBAction)touchDown:(id)sender {
[(UIButton *)sender setHighlighted:FALSE];
[(UIButton *)sender setSelected:FALSE];
}
I noticed that the image does not become darker until you move your finger. If you connect an action to "touch drag inside" and check .highlighted you should see that it has turned TRUE again. You could set it back to FALSE:
- (IBAction)touchMove:(id)sender
{
[(UIButton *)sender setSelected:FALSE];
}
However
If you're only looking for a way to stop the image from turning grey when the user presses it, do this:
button.adjustsImageWhenHighlighted = FALSE;
Setting an image for UIControlStateHighlighted would also remove the greying.
UIImage *image = [UIImage imageNamed:#"img"];
[button setImage:image forState:UIControlStateNormal];
[button setImage:image forState:UIControlStateHighlighted];
If by "go off" you mean you want to disable the button, you can use:
[myButton setEnabled:NO];

How to change background image on a button , iOS?

I created a button on my view controller which has a predefined background image. I created an action and an outlet for this button. I want when the user taps the button to change the background image of this button. How can i do that?
I tried to put into the action method of the button something like this:
snapshotCheckbox.image = [UIImage imageNamed:#"snapshot.png"];
but i guess this method is for UImageViews. How can i do the same thing for a button?
Thank you very much for reading my post :D
you can set the image for a given state of the button in the viewDidLoad:
[myButton setBackgroundImage:[UIImage imageNamed:#"myBackgroundImage.png"] forState:UIControlStateHighlighted];
A button has two properties image and backgroundImage..
For setting image use
button.currentImage = image (or)
[button setImage:image ForState:UIControlStateNormal];
For setting backgroundImage use
button.currentBackgroundImage = image (or)
[button setBackgroundImage:image ForState:UIControlStateNormal];
First set the tybe of the button to
button = [UIButton buttonWithType :UIButtonTypeCustom];
then use
[button setImage:[UIImage imageNamed:#"imagename.type"] ForState:UIControlStateNormal];
One solution to do this would be to display the image in a UIImageView and put a transparent UIButton on top of the UIImageView. In Interface Builder you can change a UIButton to "custom".
This would allow you to change the image displayed in the UIImageView easily when handling the action triggered when the UIButton is pushed.
Hope this helps.
You have the setBackgroundImage:forState: method on the button object. See Setting an image for a UIButton in code for more information (seconds answer).
Also, UIButtons automatically change the image when pressed if you set an image for the UIControlStateHighlighted state (though only as long as the user keeps pressing on the button).
Setbutton
if u need image while clicking
[snapshotCheckbox setImage:[UIImage imageNamed:#"snapshot.png"] forState:UIControlStateHighlighted];
or if u want image after Selecting it
[snapshotCheckbox setImage:[UIImage imageNamed:#"snapshot.png"] forState:UIControlStateSelected];
and on that onclick function mention
as
snapshotCheckbox.Selected=YES;
To set an image on a button, just press the button you want an image to in Main.storyboard, then, in the utilities bar to the right, press the attributes inspector and set the background to the image you want! Make sure you have the picture you want in the supporting files to the left.

How to set the button image for UIControlStateSelected

Hi I want to change the background of my button after I press the button i.e. the button should not change back to the previous image.
However, I am not able to do so. My code as follows. Can anyone advise how I can change the image to "custom_button_highlight" after I click on the button?
UIImage *buttonImageNormal = [UIImage imageNamed:#"custom_button"];
UIImage *stretchableButtonImageNormal = [buttonImageNormal
stretchableImageWithLeftCapWidth:12 topCapHeight:0];
UIImage *buttonImagePressed = [UIImage imageNamed:#"custom_button_highlight"];
UIImage *stretchableButtonImagePressed = [buttonImagePressed
stretchableImageWithLeftCapWidth:12 topCapHeight:0];
button.titleLabel.font = [UIFont boldSystemFontOfSize:14];
[button setBackgroundImage:stretchableButtonImageNormal
forState:UIControlStateNormal];
[button setBackgroundImage:stretchableButtonImagePressed
forState:UIControlStateHighlighted];
[button setBackgroundImage:stretchableButtonImagePressed
forState:UIControlStateSelected];
METHOD1
I see that you are using code to generate UIButton. It's easier to use Interface builder. Try this - In Interface builder (Xcode4), create the button & open the right sidebar. After that select the button, & the type of button as custom. After that in state config, there are various states, for each state you can set an image in image. Hope this helps...
METHOD2
If you want to use code to generate UIButton (it beats me why) then you seem to be doing the right thing. Are you sure the images are there in your bundle? You did not include the image extension (like .jpg etc.)
You mentioned, that you don't want the image to change back...
then instead of setting it for the states highlighted or selected, you have to set it for the state UIControlStateNormal.
But since you need it after it's been pressed, you have to catch the event that your button has been pressed and set the background image in there.
Hope it helped ;)
[_buttonConfirm setImage:[UIImage imageNamed:#"s.png"] forState:UIControlStateSelected ];
... does what you want programatically, not the background image. But I think you should follow Srikar's answer and use interface builder if you can.