IOS自定义UISwitch

标签：ios   自定义   custom   uiswitch   

原创Blog，转载请注明出处

blog.csdn.net/hello_hwc?viewmode=contents

下午的时候闲着无聊，简单想了想，用三个UILabel来实现这个简单的自定义UISwitch

效果图，

当然，有些粗糙，后续有时间了我会把界面优化下。直接拿去用估计界面粗糙了点，网上也有很多源代码。在写了这么多Blog后发现，其实学会思考非常重要，这里希望抛砖引玉，让想要学习的同学知道如何去自定义一个控件。

第一步，分析下自定义控件的组成要素

在我这里就是四个部分

1.左半部分视图－UILabel

2.右半部分视图－UILabel

3.滑动的视图－UILabel

4.对滑动的视图添加手势－UITapGestureRecognizer

第二步，设计接口

在我这里接口比较简单，就是这个控件的状态，用Bool来表示

所以头文件为

#import <UIKit/UIKit.h>

@interface HwcCustomUISwitch : UIView
@property (nonatomic)BOOL isOn;
@end

第三步，设计实现

1.对三个Label在Getter中采用惰性初始化，对滑动的View添加手势识别

2.对isOn的Setter函数中进行UI同步，保证每次Model改变了，View改变（MVC模式）

.m文件为

//
//  HwcCustomUISwitch.m
//  CustomActivityIndicator
//
//  Created by huangwenchen on 15/1/5.
//  Copyright (c) 2015年 BlogForCSDN. All rights reserved.
//

#import "HwcCustomUISwitch.h"

@interface HwcCustomUISwitch()
@property (strong,nonatomic) UILabel * leftLabel;
@property (strong,nonatomic) UILabel * rightLabel;
@property (strong,nonatomic) UILabel * tagLabel;
@end

@implementation HwcCustomUISwitch
-(UILabel*)tagLabel{
    if (!_tagLabel) {
        CGRect frame = self.isOn?CGRectMake(0, 0,self.frame.size.width/2, self.frame.size.height):CGRectMake(self.frame.size.width/2,0, self.frame.size.width/2,self.frame.size.height);
        _tagLabel = [[UILabel alloc] initWithFrame:frame];
    }
    return  _tagLabel;
}
-(UILabel*)leftLabel{
    if (!_leftLabel) {
        CGRect frame = CGRectMake(0, 0, self.frame.size.width/2, self.frame.size.height);
        _leftLabel = [[UILabel alloc] initWithFrame:frame];
        _leftLabel.text = @"ON";
        _leftLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _leftLabel;
}
-(UILabel*)rightLabel{
    if (!_rightLabel) {
        CGRect frame = CGRectMake(self.frame.size.width/2,0, self.frame.size.width/2, self.frame.size.height);
        _rightLabel = [[UILabel alloc] initWithFrame:frame];
        _rightLabel.text = @"OFF";
        _rightLabel.textAlignment = NSTextAlignmentCenter;

    }
    return _rightLabel;
}
-(void)setIsOn:(BOOL)isOn{
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    _isOn = isOn;
    if (isOn) {
        [UIView animateWithDuration:1.0
                              delay:0.01
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             self.tagLabel.center = CGPointMake(width/4,height/2);
                         } completion:^(BOOL finished) {
                             
                         }];
    }else{
        [UIView animateWithDuration:1.0
                              delay:0.01
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             self.tagLabel.center = CGPointMake(3*width/4,height/2);
                         } completion:^(BOOL finished) {
                             
                         }];
    }
}
-(void)setUp{
    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];
    [self.tagLabel addGestureRecognizer:tap];
    self.tagLabel.userInteractionEnabled = YES;
    self.userInteractionEnabled = YES;
    self.rightLabel.backgroundColor = [UIColor brownColor];
    [self addSubview:self.rightLabel];
    self.leftLabel.backgroundColor = [UIColor yellowColor];
    [self addSubview:self.leftLabel];
    self.tagLabel.backgroundColor = [UIColor greenColor];
    [self addSubview:self.tagLabel];
    self.layer.cornerRadius = self.frame.size.height/10;
    self.clipsToBounds = YES;
}
-(void)tap{
    self.isOn = !self.isOn;
}
-(id)initWithCoder:(NSCoder *)aDecoder{
    if (self = [super initWithCoder:aDecoder]) {
        [self setUp];
    }
    return self;
}
-(id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        [self setUp];
    }
    return self;
}
@end

    HwcCustomUISwitch * hwcSwitch = [[HwcCustomUISwitch alloc] initWithFrame:CGRectMake(100, 100, 100, 40)];
    [self.view addSubview:hwcSwitch];

IOS自定义UISwitch

标签：ios   自定义   custom   uiswitch   

原文地址：http://blog.csdn.net/hello_hwc/article/details/42431437