How to use UIButton as Toggle Button?
Since your question did mention rmq, here's an rmq way of doing it:
In viewDidLoad
:
@hello_world_label = rmq.append(UILabel, :hello_world).get
@button = rmq.append(UIButton, :toggleable_button)
@button.on(:touch) do |sender|
sender.selected = !sender.selected?
end
Note that the toggle is achieved by querying the button's actual state. If you need to remember this for later use, you might want to save that in an instance variable.
In your stylesheet:
def toggleable_button(st)
st.frame = {t: 200, w: 100, h: 24}
st.image_normal = image.resource('toggle_me')
st.image_selected = image.resource('toggled')
end
Note the use of image_selected
. Well, this doesn't exist in rmq, but you can make that happen quite easily. If this is an rmq project, you'll have a stylers/ directory. In there, you should see ui_button_styler.rb. Here's the code to make the highlighted state a first-class citizen:
module RubyMotionQuery
module Stylers
class UIButtonStyler < UIControlStyler
def image_selected=(value)
@view.setImage(value, forState:UIControlStateSelected)
end
def image_selected
@view.imageForState UIControlStateSelected
end
end
end
end
As you can see, your controller code remains clean, the initial settings of the button are shifted to the stylesheet and you have neatly extended rmq to understand the selected state.
You can create toggle button easily, you just need to set respective images for respective states, after that, you can use the selected
property to toggle between these images.
I made a pure objective-c code to show how you can do that, but you can set the images anyway in Storyboards ou Xibs too, check out:
// First, set the images for normal state and selected state
[button setImage:normalImage forState:UIControlStateNormal];
[button setImage:selectedImage forState:UIControlStateSelected];
// Don't forget to add an action handler to toggle the selected property
[button addTarget:self action:@selector(buttonTouch:withEvent:) forControlEvents:UIControlEventTouchUpInside];
// Now, in your button action handler, you can do something like this:
- (void)buttonTouch:(UIButton *)aButton withEvent:(UIEvent *)event
{
aButton.selected = !aButton.selected;
}
I hope this can help you.
Swift 4.0 Solution (using Storyboards)
First, ensure the UIButton
Type is set to Custom
in the Attributes Inspector.
// Reference to UIButton in Storyboard
@IBOutlet weak var toggleButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// assumes you have two images in the bundle/project
// called normal.png and selected.png.
let normalImage = UIImage(named: "normal.png")
let selectedImage = UIImage(named: "selected.png")
toggleButton.setImage(normalImage, for: .normal)
toggleButton.setImage(selectedImage, for: .selected)
}
Below screenshot demonstrates reference to toggleButton
in Storyboard, and Touch Up Inside
Event, ie: a user tapping the button, which fires off didPressButton
below.
@IBAction func didPressButton(_ sender: Any) {
// if the button was selected, then deselect it.
// otherwise if it was not selected, then select it.
toggleButton.isSelected = !toggleButton.isSelected
if toggleButton.isSelected {
print("I am selected.")
} else {
print("I am not selected.")
}
}
You can do it in a very easy approach. First of all, in your viewDidLoad
set tag for your button. Let's say self.toggleButton.tag = 111
. Now in your button action function, you can toggle the button like :
- (IBAction)toggling:(id)sender{
if(self.toggleButton.tag == 111){
//this is normal state
[self.toggleButton setTitle:@"Less..." forState:UIControlStateNormal];
self.toggleButton.tag = 222;
}else{
//selected state
[self.toggleButton setTitle:@"More..." forState:UIControlStateNormal];
self.toggleButton.tag = 111;
}
}
You can change the image of the button like this [self.toggleButton setImage://some image forState:UIControlStateNormal];
.It's the easiest way I think. Hope it will help.