How to use UIButton as Toggle Button?

Question

I am trying to create a toggle button for each cell in my table. When pressed, it will change the image and when pressed again it will change the image again -- Toggle.

In the UIButton class I don't see a selected state.

I'm looking for a way to create a toggle button with UIButton so that I can change the state on each click.

This is how I'm doing it in rubymotion right now using rmq

@fav_button.on(:touch) do |sender|
  puts "pressed fav button for id: " + data[:id] + " and name: " + data[:name]
  #how do I change the state here?
end

Ralf

Answer 1

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.

Plectognath

Hi thanks for the answer. When you do button.selected = !selected where is the !selected coming from? if I do button.selected = !button.selected then I get an error – Ralf

Good observation Anthony, I forgot to put the button scope for selected property. Also I changed the name of first parameter to not get conflict with button instance. Now is making more sense. Thanks! – Tinkle

still a minor repair is needed in the sample. you named the button "aButton" - not "button". can you please fix so to make the sample usable? – Monia

Answer 2

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.")
    }
}

Wormeaten

You can also set the selectedImage and normalImage in the Attributes Inspector. For that you only have to switch the "State Config" from "Default" to "Selected" and then set the wanted Image Assets. That way you only need the didPressButton and no other code in the viewDidLoad. – Clarissa

Answer 3

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.

Wengert

Answer 4

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.

Clump

Answer 5

My easiest logic to toggle button image. :)

(IBAction)toggleButton:(id)sender {
       if (self.toggleButton.selected==YES) {
           [self.toggleButton setSelected:NO];
        }else{
       [self.toggleButton setSelected:YES];
       [self.toggleButton setImage:[UIImage imageNamed:@"favStar.png"]    forState:UIControlStateSelected];
       }

Folse