IOS 自定义Switch

image.png

效果如上，代码如下。尽情享用！

WSSwitch.h

#import <UIKit/UIKit.h>

typedef void(^SwitchSelectBlock)(BOOL state);

@interface WSSwitch : UIView

@property(nonatomic,strong)NSString         *leftString;    //左侧显示的字符串

@property(nonatomic,strong)NSString         *rightString;   //右侧显示的字符串

@property(nonatomic,strong)UIColor          *selectColor;   //选中的字体颜色

@property(nonatomic,strong)UIColor          *unselectColor; //未选中时候的字体颜色

@property(nonatomic,strong)UIColor          *moveViewColor;      //上面漂浮的块颜色

@property(nonatomic,strong)UIFont           *textFont;          //字体大小，统一的

@property(nonatomic,assign,readonly)BOOL    on;             //是否选中

@property(nonatomic,copy)SwitchSelectBlock      block;      //选中后的回调
@property(nonatomic,assign)BOOL                 enable;     //是否能用  默认能用
//设置选中状态
-(void)setSwitchState:(BOOL)state animation:(BOOL)animation;
@end

WSSwitch.m

#import "WSSwitch.h"


@interface WSSwitch()

@property(nonatomic,strong)UIButton     *actionBtn;     //触发按钮

@property(nonatomic,strong)UIView       *moveView;      //移动的view

@property(nonatomic,strong)UILabel      *leftDownLable; //左侧的底部label

@property(nonatomic,strong)UILabel      *leftOnLabel;   //左侧上面的label

@property(nonatomic,strong)UILabel      *rightDownLable; //右侧的底部label

@property(nonatomic,strong)UILabel      *rightOnLabel;   //右侧上面的label

@property(nonatomic,strong)UIView       *grayView;      //蒙层
@end

@implementation WSSwitch

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    
    if (self) {
        CGFloat width   = frame.size.width / 2;
        CGFloat height  = frame.size.height;
        
        _leftDownLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, width, height)];
        _leftDownLable.backgroundColor = [UIColor clearColor];
        _leftDownLable.text      = @"视频";
        _leftDownLable.textAlignment    = NSTextAlignmentCenter;
        _leftDownLable.textColor        = [UIColor whiteColor];
        [self addSubview:_leftDownLable];
        
        _rightDownLable = [[UILabel alloc]initWithFrame:CGRectMake(width, 0, width, height)];
        _rightDownLable.backgroundColor = [UIColor clearColor];
        _rightDownLable.text      = @"音频";
        _rightDownLable.textAlignment    = NSTextAlignmentCenter;
        _rightDownLable.textColor        = [UIColor whiteColor];
        [self addSubview:_rightDownLable];
        
        UIView  *subView = [[UIView alloc]initWithFrame:self.bounds];
        
        [self addSubview:subView];
        
        
        
        _leftOnLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, width, height)];
        _leftOnLabel.backgroundColor = [UIColor whiteColor];
        _leftOnLabel.text      = @"视频";
        _leftOnLabel.textAlignment    = NSTextAlignmentCenter;
        _leftOnLabel.textColor        = [UIColor colorWithRed:51/255.0f green:123/255.0 blue:250/255.0f alpha:1];
        [subView addSubview:_leftOnLabel];
        
        _rightOnLabel = [[UILabel alloc]initWithFrame:CGRectMake(width, 0, width, height)];
        _rightOnLabel.backgroundColor = [UIColor whiteColor];
        _rightOnLabel.text      = @"音频";
        _rightOnLabel.textAlignment    = NSTextAlignmentCenter;
        _rightOnLabel.textColor        = [UIColor colorWithRed:51/255.0f green:123/255.0 blue:250/255.0f alpha:1];
        [subView addSubview:_rightOnLabel];
        
        self.moveView   = [[UIView alloc]initWithFrame:CGRectMake(0, 2, width+2, height)];
        self.moveView.layer.cornerRadius    = (height)/2;
        self.moveView.clipsToBounds         = YES;
        self.moveView.backgroundColor       = [UIColor whiteColor];
        subView.maskView    = self.moveView;
        
        self.actionBtn = [[UIButton alloc]initWithFrame:self.bounds];
        self.actionBtn.backgroundColor = [UIColor clearColor];
        [self.actionBtn addTarget:self action:@selector(changeSwitchState:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.actionBtn];
        
        
        self.grayView   = [[UIView alloc]initWithFrame:self.bounds];
        self.grayView.backgroundColor = [UIColor grayColor];
        self.grayView.alpha = 0.7;
        self.grayView.hidden    = YES;
        [self addSubview:self.grayView];
        
        self.backgroundColor  = [UIColor colorWithHexString:@"#F89D76"];
        
        self.layer.cornerRadius = height/2;
        self.clipsToBounds  = YES;
        
        self.userInteractionEnabled = YES;
        
        [self setTextFont:[UIFont systemFontOfSize:15]];
        
        self.enable     = YES;
        
    }
    
    return self;
}

#pragma mark - 设置文字
-(void)setLeftString:(NSString *)leftString
{
    self.leftOnLabel.text = leftString;
    self.leftDownLable.text = leftString;
    
    _leftString             = leftString;
}

-(void)setRightString:(NSString *)rightString
{
    self.rightOnLabel.text = rightString;
    self.rightDownLable.text = rightString;
    
    _rightString             = rightString;
}

-(void)setSelectColor:(UIColor *)selectColor
{
    self.rightOnLabel.textColor = selectColor;
    self.leftOnLabel.textColor  = selectColor;
    
    _selectColor = selectColor;
}

-(void)setUnselectColor:(UIColor *)unselectColor
{

    self.rightDownLable.textColor   = unselectColor;
    self.leftDownLable.textColor    = unselectColor;
    
    _unselectColor                  = unselectColor;
}

-(void)setTextFont:(UIFont *)textFont
{
    self.rightOnLabel.font      = textFont;
    self.rightDownLable.font    = textFont;
    
    self.leftDownLable.font     = textFont;
    self.leftOnLabel.font       = textFont;
    
    _textFont                   = textFont;
}

-(void)setMoveViewColor:(UIColor *)moveViewColor
{
    self.rightOnLabel.backgroundColor   = moveViewColor;
    self.leftOnLabel.backgroundColor    = moveViewColor;
    
    _moveViewColor                      = moveViewColor;
}

-(void)setSwitchState:(BOOL)state animation:(BOOL)animation
{
    _on = state;
    
    self.actionBtn.selected = _on;
    
    [self startAnimationMoveView:_on animation:animation];
}

-(void)setEnable:(BOOL)enable
{
    _enable = enable;
    
    self.grayView.hidden    = enable;
}

#pragma mark - 按钮方法
-(void)changeSwitchState:(UIButton *)btn
{
    self.actionBtn.userInteractionEnabled   = NO;
    
    _on = !btn.selected;
    
    btn.selected = _on;
    
    [self startAnimationMoveView:_on animation:YES];
    
    if (self.block) {
        self.block(_on);
    }
    
    [self performSelector:@selector(changeActionBtnUseEnable) withObject:nil afterDelay:0.5f];
}

-(void)changeActionBtnUseEnable
{
    self.actionBtn.userInteractionEnabled = YES;
}

-(void)startAnimationMoveView:(BOOL)state animation:(BOOL)animation
{
    CGFloat width    = self.moveView.frame.size.width;
    CGFloat height   = self.frame.size.height;
    
    CGPoint dest = !state?CGPointMake(width/2, height/2):CGPointMake(width*3/2-2, height/2);
    
    if (animation) {
        [UIView animateWithDuration:.4 animations:^{
            self.moveView.center = dest;
        }];
    }
    else
    {
        self.moveView.center = dest;
    }
    
}


@end

使用方式

WSSwitch *genderSwitch = [[WSSwitch alloc] initWithFrame:CGRectMake(0, 0, 92, 27)];
    [genderSwitch setSwitchState:YES animation:NO];
    [genderSwitch setLeftString:@"男足"];
    [genderSwitch setRightString:@"女足"];
    [genderSwitch setSelectColor:[UIColor colorWithHexString:@"FF5108"]];
    [genderSwitch setUnselectColor  :[UIColor whiteColor]];
    [genderSwitch setTextFont:[UIFont fontWithName:@"Helvetica-Bold" size:15]];
    genderSwitch.block = ^(BOOL state) {
        //yes 女足  no 男足
        YYLog(@"%@",state?@"YES":@"NO");
    };
    [self.view addSubview:genderSwitch];