雖然系統的UISwitch效果已經很好了,附帶的動畫效果也是很好的,但是在實際開發中UI和程式設計師對頭(產品經理)經常會要求按照專案的整體效果使用其他的圖片或者背景來代替,這裡僅在專案中做了一個簡單的自定義switch.

demo圖樣

主要是使用自定義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:能用自帶外掛最好勸說需求用吧,畢竟系統的很強大! ~~不過我和我們需求談判失敗了…