简单自定义选择按钮(switchDemo)

虽然系统的UISwitch效果已经很好了,附带的动画效果也是很好的,但是在实际开发中UI和程序员对头(产品经理)经常会要求按照项目的整体效果使用其他的图片或者背景来代替,这里仅在项目中做了一个简单的自定义switch.

demo图样

switchDemo.png

主要是使用自定义UIView,利用背景图片的切换,和按钮图片的x的位置开实现.

这里把demo放上,方便以后查看 : demo地址
WJSwitch.h

#import <UIKit/UIKit.h>

@protocol WJSwitchViewDelegate <NSObject>

/**
 *  开关是否开启
 *
 *  @param isopen YES 开启  NO 关闭
 *  @param tag   tag值
 */
-(void)WJSwitchViewDelegateWithSwitchStates:(BOOL)isopen withTag:(NSInteger)tag;

@end

@interface WJSwitchView : UIView

@property(nonatomic,weak) id <WJSwitchViewDelegate> delegate;//代理


-(instancetype)initWithFrame:(CGRect)frame withTag:(NSInteger)tag delegate:(id)delegate;

@end

WJSwitch.m

#import "WJSwitchView.h"

@interface WJSwitchView (){

    BOOL isOpen;//是否开启(右边为开启)

}

@property(nonatomic,strong) UIImageView  * bgView;//背景图片

@property(nonatomic,strong) UIImageView  * btnView;//按钮图片

@property(nonatomic,assign) CGFloat beginpoint;//开始的位置

@end

@implementation WJSwitchView


-(instancetype)initWithFrame:(CGRect)frame withTag:(NSInteger)tag delegate:(id)delegate{

    
    if (self = [super initWithFrame:frame]) {
        
        [self setFrame:frame];
        [self setBtnImageView];
        self.tag = tag;
        self.delegate = delegate;
    }
    return self;
}

/**
 *  设置按钮背景图片
 */
-(void)setBtnImageView{
    
    //设置背景图片
    self.bgView = [[UIImageView alloc] initWithFrame:self.bounds];
    [self.bgView setImage:[UIImage imageNamed:@"bgViewOff"]];
    [self addSubview:self.bgView];
    
    isOpen = NO;
    
    //设置按钮图片
    self.btnView = [[UIImageView alloc] initWithFrame:CGRectMake(2, 2, CGRectGetWidth(self.frame)/2, CGRectGetHeight(self.frame)-4)];
    [self.btnView setImage:[UIImage imageNamed:@"switchBtn"]];
    [self addSubview:self.btnView];
}

触摸方法

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    
    //    UITouch * touch = [touches anyObject];
    //    self.beginpoint = [touch locationInView:self].x;
    
    if (!isOpen) {
        [self switchOpen];
        isOpen = YES;
  
    }else{
        
        [self switchClose];
        isOpen = NO;
        
    }
    
    //实现协议方法 传递按钮tag和是否开启
    if (self.delegate  && [self.delegate respondsToSelector:@selector(WJSwitchViewDelegateWithSwitchStates: withTag:)]) {
        [self.delegate WJSwitchViewDelegateWithSwitchStates:isOpen withTag:self.tag];
    }
    
}

/**
 *  开启
 */
-(void)switchOpen{
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.005 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.bgView setImage:[UIImage imageNamed:@"bgViewOn"]];
    });
    CGFloat X = CGRectGetWidth(self.frame)/2;
    CGRect frame = self.btnView.frame;
     /*创建弹性动画
     damping:阻尼，范围0-1，阻尼越接近于0，弹性效果越明显
     velocity:弹性复位的速度
     */
    [UIView animateWithDuration:0.2 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{
        [self.btnView setFrame:CGRectMake(X, frame.origin.y, frame.size.width, frame.size.height)];
    } completion:nil];
}

/**
 *  关闭
 */
-(void)switchClose{
    //替换图片 这里仅做简单的图片替换
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.005 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.bgView setImage:[UIImage imageNamed:@"bgViewOff"]];
    });
    CGFloat X = 2;
    CGRect frame = self.btnView.frame;
    //修改按钮图片的位置
 [UIView animateWithDuration:0.2 delay:0 usingSpringWithDamping:0.9 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{
         [self.btnView setFrame:CGRectMake(X, frame.origin.y, frame.size.width, frame.size.height)];
    } completion:nil];
}

viewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //创建view
    WJSwitchView * firstView = [[WJSwitchView alloc] initWithFrame:self.firstSwitchView.bounds withTag:1 delegate:self];
    [self.firstSwitchView addSubview:firstView];
    
    WJSwitchView * secondView = [[WJSwitchView alloc] initWithFrame:self.firstSwitchView.bounds withTag:2 delegate:self];
    [self.secondSwitchView addSubview:secondView];
    
    WJSwitchView * thirdView = [[WJSwitchView alloc] initWithFrame:self.firstSwitchView.bounds withTag:3 delegate:self];
    [self.thirdSwitchView addSubview:thirdView];
    
}
#pragma mark - WJSwitchViewDelegate
//协议方法
-(void)WJSwitchViewDelegateWithSwitchStates:(BOOL)isopen withTag:(NSInteger)tag{

    NSLog(@"%ld",tag);
}

按钮的位置移动可以使用CAAnimation做一些简单的动画过度,或者直接使用UIView的封装方法实现一些效果来实现,关于动画的一些基本应用,在文集中有转载一篇写的特好的文章讲动画的!!建议自己可以跟着敲一次!!
PS:能用自带插件最好劝说需求用吧,毕竟系统的很强大! ~~不过我和我们需求谈判失败了...