可变大小、颜色边框、样式的UISwitch
1、CHSwitch.h
//
// 文 件 名:CHSwitch.h
//
// 版权所有:Copyright © 2018 lelight. All rights reserved.
// 创 建 者:lelight
// 创建日期:2018/12/19.
// 文档说明:
// 修 改 人:
// 修改日期:
//
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
typedef enum {
CHSwitchShapeOval,
CHSwitchShapeRectangle,
CHSwitchShapeRectangleNoCorner
} CHSwitchShape;
@interface CHSwitch : UIControl <UIGestureRecognizerDelegate>
/** 开关状态读取与设置 */
@property (nonatomic, getter = isOn) BOOL on;
/** 开关形状枚举值:默认CHSwitchShapeOval */
@property (nonatomic, assign) CHSwitchShape shape;
/** 打开时的颜色 */
@property (nonatomic, strong) UIColor *onTintColor;
/** 关闭时的颜色 */
@property (nonatomic, strong) UIColor *tintColor;
/** 圆点颜色 */
@property (nonatomic, strong) UIColor *thumbTintColor;
/** 是否需要阴影效果 */
@property (nonatomic, assign) BOOL shadow;
/** 关闭时的阴影颜色 */
@property (nonatomic, strong) UIColor *tintBorderColor;
/** 打开时的阴影颜色 */
@property (nonatomic, strong) UIColor *onTintBorderColor;
@end
NS_ASSUME_NONNULL_END
2、CHSwitch.m
//
// 文 件 名:CHSwitch.m
//
// 版权所有:Copyright © 2018 lelight. All rights reserved.
// 创 建 者:lelight
// 创建日期:2018/12/19.
// 文档说明:
// 修 改 人:
// 修改日期:
//
#import "CHSwitch.h"
#import <QuartzCore/QuartzCore.h>
static const CGFloat kAnimateDuration = 0.3f;
static const CGFloat kHorizontalAdjustment = 3.0f;
static const CGFloat kRectShapeCornerRadius = 4.0f;
static const CGFloat kThumbShadowOpacity = 0.3f;
static const CGFloat kThumbShadowRadius = 0.5f;
static const CGFloat kSwitchBorderWidth = 1.75f;
@interface CHSwitch ()
@property (nonatomic, strong) UIView *onBackgroundView;
@property (nonatomic, strong) UIView *offBackgroundView;
@property (nonatomic, strong) UIView *thumbView;
@end
@implementation CHSwitch
@synthesize onBackgroundView = _onBackgroundView;
@synthesize offBackgroundView = _offBackgroundView;
@synthesize thumbView = _thumbView;
@synthesize on = _on;
@synthesize shape = _shape;
@synthesize onTintColor = _onTintColor;
@synthesize tintColor = _tintColor;
@synthesize thumbTintColor = _thumbTintColor;
@synthesize shadow = _shadow;
@synthesize onTintBorderColor = _onTintBorderColor;
@synthesize tintBorderColor = _tintBorderColor;
#pragma mark - View
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setupUI];
}
return self;
}
- (void) awakeFromNib {
[super awakeFromNib];
[self setupUI];
}
- (void)setupUI {
self.shape = CHSwitchShapeOval;
[self setBackgroundColor:[UIColor clearColor]];
// Background view for ON
self.onBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
[self.onBackgroundView setBackgroundColor:[UIColor colorWithRed:(19.0f/255.0f) green:(121.0f/255.0f) blue:(208.0f/255.0f) alpha:1.0f]];
[self.onBackgroundView.layer setCornerRadius:self.frame.size.height/2];
[self.onBackgroundView.layer setShouldRasterize:YES];
[self.onBackgroundView.layer setRasterizationScale:[UIScreen mainScreen].scale];
[self addSubview:self.onBackgroundView];
// Background view for OFF
self.offBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
[self.offBackgroundView setBackgroundColor:[UIColor whiteColor]];
[self.offBackgroundView.layer setCornerRadius:self.frame.size.height/2];
[self.offBackgroundView.layer setShouldRasterize:YES];
[self.offBackgroundView.layer setRasterizationScale:[UIScreen mainScreen].scale];
[self addSubview:self.offBackgroundView];
// Round switch view
self.thumbView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.height-kHorizontalAdjustment, self.frame.size.height-kHorizontalAdjustment)];
[self.thumbView setBackgroundColor:[UIColor whiteColor]];
[self.thumbView setUserInteractionEnabled:YES];
[self.thumbView.layer setCornerRadius:(self.frame.size.height-kHorizontalAdjustment)/2];
[self.thumbView.layer setShadowOffset:CGSizeMake(0, 1)];
[self.thumbView.layer setShouldRasterize:YES];
[self.thumbView.layer setShadowOpacity:kThumbShadowOpacity];
[self.thumbView.layer setRasterizationScale:[UIScreen mainScreen].scale];
[self addSubview:self.thumbView];
self.shadow = YES;
// Default to OFF position
[self.thumbView setCenter:CGPointMake(self.thumbView.frame.size.width/2, self.frame.size.height/2)];
// Handle Thumb Tap Gesture
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
action:@selector(handleSwitchTap:)];
[tapGestureRecognizer setDelegate:self];
[self.thumbView addGestureRecognizer:tapGestureRecognizer];
// Handle Background Tap Gesture
UITapGestureRecognizer *tapBgGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleBgTap:)];
[tapBgGestureRecognizer setDelegate:self];
[self addGestureRecognizer:tapBgGestureRecognizer];
// Handle Thumb Pan Gesture
UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[panGestureRecognizer setDelegate:self];
[self.thumbView addGestureRecognizer:panGestureRecognizer];
[self setOn:NO];
}
#pragma mark - Accessor
- (BOOL)isOn {
return _on;
}
- (void)setOn:(BOOL)on {
if (_on != on)
_on = on;
if (_on) {
[self.onBackgroundView setAlpha:1.0];
self.offBackgroundView.transform = CGAffineTransformMakeScale(0.0, 0.0);
self.thumbView.center = CGPointMake(self.onBackgroundView.frame.size.width - (self.thumbView.frame.size.width + kHorizontalAdjustment)/2, self.thumbView.center.y);
}
else {
[self.onBackgroundView setAlpha:0.0];
self.offBackgroundView.transform = CGAffineTransformMakeScale(1.0, 1.0);
self.thumbView.center = CGPointMake((self.thumbView.frame.size.width+kHorizontalAdjustment)/2, self.thumbView.center.y);
}
}
- (void)setOnTintColor:(UIColor *)color
{
if (_onTintColor != color)
_onTintColor = color;
[self.onBackgroundView setBackgroundColor:color];
}
- (void)setOnTintBorderColor:(UIColor *)color
{
if (_onTintBorderColor != color)
_onTintBorderColor = color;
[self.onBackgroundView.layer setBorderColor:color.CGColor];
if (color)
[self.onBackgroundView.layer setBorderWidth:kSwitchBorderWidth];
else
[self.onBackgroundView.layer setBorderWidth:0.0];
}
- (void)setTintColor:(UIColor *)color
{
if (_tintColor != color)
_tintColor = color;
[self.offBackgroundView setBackgroundColor:color];
}
- (void)setTintBorderColor:(UIColor *)color
{
if (_tintBorderColor != color)
_tintBorderColor = color;
[self.offBackgroundView.layer setBorderColor:color.CGColor];
if (color)
[self.offBackgroundView.layer setBorderWidth:kSwitchBorderWidth];
else
[self.offBackgroundView.layer setBorderWidth:0.0];
}
- (void)setThumbTintColor:(UIColor *)color
{
if (_thumbTintColor != color)
_thumbTintColor = color;
[self.thumbView setBackgroundColor:color];
}
- (void)setShape:(CHSwitchShape)newShape
{
if (_shape != newShape)
_shape = newShape;
if (newShape == CHSwitchShapeOval)
{
[self.onBackgroundView.layer setCornerRadius:self.frame.size.height/2];
[self.offBackgroundView.layer setCornerRadius:self.frame.size.height/2];
[self.thumbView.layer setCornerRadius:(self.frame.size.height-kHorizontalAdjustment)/2];
}
else if (newShape == CHSwitchShapeRectangle)
{
[self.onBackgroundView.layer setCornerRadius:kRectShapeCornerRadius];
[self.offBackgroundView.layer setCornerRadius:kRectShapeCornerRadius];
[self.thumbView.layer setCornerRadius:kRectShapeCornerRadius];
}
else if (newShape == CHSwitchShapeRectangleNoCorner)
{
[self.onBackgroundView.layer setCornerRadius:0];
[self.offBackgroundView.layer setCornerRadius:0];
[self.thumbView.layer setCornerRadius:0];
}
}
- (void)setShadow:(BOOL)showShadow
{
if (_shadow != showShadow)
_shadow = showShadow;
if (showShadow)
{
[self.thumbView.layer setShadowOffset:CGSizeMake(0, 1)];
[self.thumbView.layer setShadowRadius:kThumbShadowRadius];
[self.thumbView.layer setShadowOpacity:kThumbShadowOpacity];
}
else
{
[self.thumbView.layer setShadowRadius:0.0];
[self.thumbView.layer setShadowOpacity:0.0];
}
}
#pragma mark - Animation
- (void)animateToDestination:(CGPoint)centerPoint withDuration:(CGFloat)duration switch:(BOOL)on
{
[UIView animateWithDuration:duration
delay:0.0f
options:UIViewAnimationOptionCurveEaseOut
animations:^{
self.thumbView.center = centerPoint;
if (on)
{
[self.onBackgroundView setAlpha:1.0];
}
else
{
[self.onBackgroundView setAlpha:0.0];
}
}
completion:^(BOOL finished) {
if (finished)
{
[self updateSwitch:on];
}
}];
[UIView animateWithDuration:duration
delay:0.075f
options:UIViewAnimationOptionCurveEaseOut
animations:^{
if (on)
{
self.offBackgroundView.transform = CGAffineTransformMakeScale(0.0, 0.0);
}
else
{
self.offBackgroundView.transform = CGAffineTransformMakeScale(1.0, 1.0);
}
}
completion:^(BOOL finished) {
}];
}
#pragma mark - Gesture Recognizers
- (void)handlePan:(UIPanGestureRecognizer *)recognizer
{
CGPoint translation = [recognizer translationInView:self.thumbView];
// Check the new center to see if within the boud
CGPoint newCenter = CGPointMake(recognizer.view.center.x + translation.x,
recognizer.view.center.y);
if (newCenter.x < (recognizer.view.frame.size.width+kHorizontalAdjustment)/2 || newCenter.x > self.onBackgroundView.frame.size.width-(recognizer.view.frame.size.width+kHorizontalAdjustment)/2)
{
// New center is Out of bound. Animate to left or right position
if(recognizer.state == UIGestureRecognizerStateBegan ||
recognizer.state == UIGestureRecognizerStateChanged)
{
CGPoint velocity = [recognizer velocityInView:self.thumbView];
if (velocity.x >= 0)
{
// Animate move to right
[self animateToDestination:CGPointMake(self.onBackgroundView.frame.size.width - (self.thumbView.frame.size.width+kHorizontalAdjustment)/2, recognizer.view.center.y) withDuration:kAnimateDuration switch:YES];
}
else
{
// Animate move to left
[self animateToDestination:CGPointMake((self.thumbView.frame.size.width+kHorizontalAdjustment)/2, recognizer.view.center.y) withDuration:kAnimateDuration switch:NO];
}
}
return;
}
// Only allow vertical pan
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
recognizer.view.center.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.thumbView];
CGPoint velocity = [recognizer velocityInView:self.thumbView];
if(recognizer.state == UIGestureRecognizerStateEnded)
{
if (velocity.x >= 0)
{
if (recognizer.view.center.x < self.onBackgroundView.frame.size.width - (self.thumbView.frame.size.width+kHorizontalAdjustment)/2)
{
// Animate move to right
[self animateToDestination:CGPointMake(self.onBackgroundView.frame.size.width - (self.thumbView.frame.size.width+kHorizontalAdjustment)/2, recognizer.view.center.y) withDuration:kAnimateDuration switch:YES];
}
}
else
{
// Animate move to left
[self animateToDestination:CGPointMake((self.thumbView.frame.size.width+kHorizontalAdjustment)/2, recognizer.view.center.y) withDuration:kAnimateDuration switch:NO];
}
}
}
- (void)handleSwitchTap:(UIPanGestureRecognizer *)recognizer
{
if (recognizer.state == UIGestureRecognizerStateEnded)
{
if (self.isOn)
{
// Animate move to left
[self animateToDestination:CGPointMake((self.thumbView.frame.size.width+kHorizontalAdjustment)/2, recognizer.view.center.y) withDuration:kAnimateDuration switch:NO];
}
else
{
// Animate move to right
[self animateToDestination:CGPointMake(self.onBackgroundView.frame.size.width - (self.thumbView.frame.size.width+kHorizontalAdjustment)/2, recognizer.view.center.y) withDuration:kAnimateDuration switch:YES];
}
}
}
- (void)handleBgTap:(UIPanGestureRecognizer *)recognizer
{
if (recognizer.state == UIGestureRecognizerStateEnded)
{
if (self.isOn)
{
// Animate move to left
[self animateToDestination:CGPointMake((self.thumbView.frame.size.width+kHorizontalAdjustment)/2, self.thumbView.center.y) withDuration:kAnimateDuration switch:NO];
}
else
{
// Animate move to right
[self animateToDestination:CGPointMake(self.onBackgroundView.frame.size.width - (self.thumbView.frame.size.width+kHorizontalAdjustment)/2, self.thumbView.center.y) withDuration:kAnimateDuration switch:YES];
}
}
}
#pragma mark -
- (void)updateSwitch:(BOOL)on
{
if (_on != on)
_on = on;
[self sendActionsForControlEvents:UIControlEventValueChanged];
}
@end
可变大小、颜色边框、样式的UISwitch的更多相关文章
- Android CheckBox修改大小、边框颜色,以及自定义CheckBox;
CheckBox修改大小: android:scaleX="0.8" android:scaleY="0.8" CheckBox修改边框颜色,注意不是背景色: ...
- css盒子模型之边框宽度,边框颜色与边框样式
/* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...
- css中的边框样式
在盒子模型中,盒子的边框是其重要的样式,通过边框我们可以很方便地看出盒子的长宽以及大小.边框的特性可以通过边框线,边框的宽度及颜色来呈现. 1,边框线 边框线指的是边框线条的样式,包括实线,虚线,点划 ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View(二)
上篇UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View(一) 讲到该控件的需要和设计过程. 这篇讲讲开发过程中一些重要问题解决. 1.支持 ...
- CSS3初学篇章_4(边框样式/段落样式)
边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inse ...
- 改变 Panel 跟 groupbox边框样式
更改panel和groupbox的边框颜色因为在控件的属性中没有设置边框颜色的属性只有一个设置边框样式,遂在网络中搜寻出一下方法: panel的边框颜色在paint中重新对颜色进行定义 private ...
- CSS 边框样式
CSS 边框样式 直线边框样式 <html> <body> <!-- border: 1px 边框像素为1.solid red 边框样式以及边框颜色 --> < ...
- python 输出颜色与样式的方法
上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章 ...
随机推荐
- Vue源码学习(一):调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
- [原创]Spring boot 框架构建jsp web应用
说明 Spring boot支持将web项目打包成一个可执行的jar包,内嵌tomcat服务器,独立部署 为支持jsp,则必须将项目打包为war包 pom.xml中设置打包方式 <packagi ...
- Scala语言简介和开发环境配置
Scala语言的简介和开发环境搭建 Scala是一门结合了面向对象特征和函数式编程特征的语言,它是一个创新的编程语言产品.Scala可以做脚本(就像shell脚本一样),可以做服务端编程语言,可以写数 ...
- Mac hook—DYLD_INSERT_LIBRARIES
[Mac hook—DYLD_INSERT_LIBRARIES] 1.gcc生成dylib. gcc -dynamiclib -o mysharedlib.dylib mysharedlib.c 2. ...
- java定时任务实现的几种方式(Timer、Spring Task、Quartz)
Timer JDK自带的Timer类,允许调度一个TimerTask任务. Demo: /** * Timer测试类 */ public class TimerDemo { public static ...
- leetcode:Median of Two Sorted Arrays分析和实现
这个问题的大意是提供两个有序的整数数组A与B,A与B并集的中间数.[1,3]与[2]的中间数为2,因为2能将A与B交集均分.而[1,3]与[2,4]的中间数为2.5,取2与3的平均值.故偶数数目的中间 ...
- WDCP/wdlinux安装php_zip扩展教程
linux服务器安装wdcp之后,php的路径默认是/www/wdlinux/php,有些网友按照网上的教程安装的时候总出错,原因就是php的路径不对,我们知道了php的路径之后就可以开始安装了> ...
- 面试题: java多线程 背1
如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个话其 ...
- Django框架 之 modelform组件
Django框架 之 modelform组件 浏览目录 创建mldelform 添加记录 编辑记录 Django框架中的modelform组件 通过名字我们可以看出来,这个组件的功能就是把model和 ...
- 专题1-MMU-lesson3-MMU配置与使用
1.段方式MMU 利用虚拟地址然后找到物理地址,通过物理地址访问到led,其过程如下: 一个段的大小是[19:0]总共有1M的地址空间. 从上面可知对应GPIO的段物理基地址是0x7f000000.那 ...