How to use a UIButton as a toggle switch

问题:

I am using a UIButton of custom type and what I want is use it like a toggle switch with the change of image. Like when it is clicked if previously it was not in selected mode it should go in selected mode or otherwise vice-a-versa. Also it will have a different image and when it is selected it will have a different image when it is not.

I am not able to do it programatically, is there any good easy way to do this.

回答1:

I believe this post has a better solution : iPhone UIButton with UISwitch functionality

UIButton has toggling built in. There is a selected property that you can set and change the skins based on the state.

回答2:

In your header file add:

IBOutlet UIButton *toggleButton; BOOL toggleIsOn;  @property (nonatomic, retain) IBOutlet UIButton *toggleButton; 

In the implementation:

- (IBACtion)toggle:(id)sender {   if(toggleIsOn){     //do anything else you want to do.   }   else {     //do anything you want to do.   }   toggleIsOn = !toggleIsOn;   [self.toggleButton setImage:[UIImage imageNamed:toggleIsOn ? @"on.png" :@"off.png"] forState:UIControlStateNormal]; } 

then link your button with the IBActions and the IBOutlet and initialize toggleIsOn to NO.

回答3:

In the interface:

@interface TransportViewController : UIViewController {      UIButton *button; } @property(nonatomic, retain) UIButton *button; 

In the implementation:

- (void)loadView {  [super loadView];      ...      [self setButton:[UIButton buttonWithType:UIButtonTypeCustom]];     [button addTarget:self action:@selector(onClick:) forControlEvents:UIControlEventTouchUpInside];     [button setImage:[UIImage imageNamed:@"image1"] forState:UIControlStateNormal];     [button setImage:[UIImage imageNamed:@"image2"] forState:UIControlStateSelected]; }  - (void) onClick:(UIButton *)sender {      [sender setSelected:!sender.selected]; } 

回答4:

UIButton does supports a "toggle" functionality by default. To use this you need to set a different image or even text color in Interface Builder for the State Configuration = Selected, and use the selected property of UIButton to toggle its state.

Code:

- (IBAction)yourButtonTouch:(UIButton *)sender {      sender.selected = !sender.selected;     if (sender.selected) {         //...         // Action to be performed when button is selected or          // the first touch         // ...       } } 

回答5:

- (IBAction)buttonTapped:(UIButton *)sender {      //first time sender.selected is No     if (sender.selected) {         //code here         sender.selected=NO;     }     else{     //code here         sender.selected=YES;     } } 

回答6:

The only problem here is that you have to use 2 images to achieve toggling. Also you can't use highlighted property because of UIButton (UIControl) automatically sets this property under the hood, to be exact in touchBegan:, touchMoved:, etc. methods. The best way I offer is to simple use subclassing:

@interface ToggleButton : UIButton  @end  @implementation ToggleButton  - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{     [super touchesBegan:touches withEvent:event];     self.highlighted = self.selected = !self.selected; }  - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{     [super touchesMoved:touches withEvent:event];     self.highlighted = self.selected; }  - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{     [super touchesEnded:touches withEvent:event];     self.highlighted = self.selected; }  - (void)setSelected:(BOOL)selected{     [super setSelected:selected];     self.highlighted = selected; }  @end 

This is quite enough to make your toggle working

回答7:

For Swift 3

@IBAction func playPause(sender : UIButton){     sender.isSelected = !sender.isSelected    if sender.isSelected {       player.pause()    }else{       player.play()   } } 

回答8:

Change button image isn't a difficult task. And you can use some BOOL value to detect if your switch-button is in "ON" state. and in your onBtnClk method you can just change state of your BOOL value and set image for current state.

回答9:

I made this class, changing the class to PGToggleButton in the Interface builder will do it. It uses the images for Default and Highlighted state, and has a public property to get/set the actual state.

PGToggleButton.h

@interface PGToggleButton : UIButton  @property (nonatomic, getter=isOn) BOOL on; -(void)toggle;  @end 

PGToggleButton.m

#import "PGToggleButton.h"   @interface PGToggleButton () @property (nonatomic, strong) UIImage *offStateImage; @property (nonatomic, strong) UIImage *onStateImage; -(void)touchedUpInside:(UIButton*) sender; @end   @implementation PGToggleButton @synthesize on = _on; @synthesize offStateImage = _offStateImage; @synthesize onStateImage = _onStateImage;  -(void)awakeFromNib {     [super awakeFromNib];      self.offStateImage = [self imageForState:UIControlStateNormal];     self.onStateImage = [self imageForState:UIControlStateHighlighted];      [self addTarget:self              action:@selector(touchedUpInside:)           forControlEvents:UIControlEventTouchUpInside]; }  -(void)touchedUpInside:(UIButton*) sender { [self toggle]; }  -(void)toggle { self.on = toggle(_on); }  -(void)setOn:(BOOL) on {     _on = on;      if (on)         [self setImage:self.onStateImage forState:(UIControlStateNormal)];     else         [self setImage:self.offStateImage forState:(UIControlStateNormal)]; }  @end 

文章来源: How to use a UIButton as a toggle switch