定制二选一按钮SwitchButton

效果:

源码:

SwitchButton.h 与 SwitchButton.m

  1. //
  2. // SwitchButton.h
  3. // KongJian
  4. //
  5. // Created by YouXianMing on 14/10/24.
  6. // Copyright (c) 2014年 YouXianMing. All rights reserved.
  7. //
  8.  
  9. #import <UIKit/UIKit.h>
  10.  
  11. @protocol SwitchButtonDelegate <NSObject>
  12. - (void)switchButtonState:(BOOL)state;
  13. @end
  14.  
  15. @interface SwitchButton : UIView
  16.  
  17. /**
  18. * 代理
  19. */
  20. @property (nonatomic, assign) id<SwitchButtonDelegate> delegate;
  21.  
  22. /**
  23. * 3个view
  24. */
  25. @property (nonatomic, strong) UIView *leftView;
  26. @property (nonatomic, strong) UIView *rightView;
  27. @property (nonatomic, strong) UIView *blockView;
  28.  
  29. /**
  30. * 动画持续时间
  31. */
  32. @property (nonatomic, assign) NSTimeInterval duration;
  33.  
  34. /**
  35. * 块是否在左边
  36. */
  37. @property (nonatomic, assign) BOOL blockAtLeft;
  38.  
  39. /**
  40. * 背景颜色
  41. */
  42. @property (nonatomic, strong) UIColor *leftBackgroundColor;
  43. @property (nonatomic, strong) UIColor *rightBackgroundColor;
  44.  
  45. /**
  46. * 便利的创建出按钮
  47. *
  48. * @param leftText 左边显示的文本
  49. * @param rightText 右边显示的文本
  50. * @param size button的尺寸
  51. *
  52. * @return button对象
  53. */
  54. + (SwitchButton *)createDefaultTypeButtonWithLeftText:(NSString *)leftText
  55. rightText:(NSString *)rightText
  56. size:(CGSize)size;
  57.  
  58. @end
  1. //
  2. // SwitchButton.m
  3. // KongJian
  4. //
  5. // Created by YouXianMing on 14/10/24.
  6. // Copyright (c) 2014年 YouXianMing. All rights reserved.
  7. //
  8.  
  9. #import "SwitchButton.h"
  10.  
  11. @interface SwitchButton ()
  12.  
  13. @property (nonatomic, strong) UIButton *button;
  14.  
  15. @property (nonatomic, strong) UIView *leftBackView;
  16. @property (nonatomic, strong) UIView *rightBackView;
  17. @property (nonatomic, strong) UIView *blockBackView;
  18.  
  19. @end
  20.  
  21. @implementation SwitchButton
  22.  
  23. - (instancetype)initWithFrame:(CGRect)frame
  24. {
  25. self = [super initWithFrame:frame];
  26. if (self) {
  27. self.layer.masksToBounds = YES;
  28.  
  29. // 按钮
  30. _button = [[UIButton alloc] initWithFrame:self.bounds];
  31. [_button addTarget:self
  32. action:@selector(buttonEvent)
  33. forControlEvents:UIControlEventTouchUpInside];
  34. [self addSubview:_button];
  35.  
  36. // 左侧view
  37. _leftBackView = [[UIView alloc] initWithFrame:CGRectMake(, ,
  38. self.bounds.size.width / .f,
  39. self.bounds.size.height)];
  40. _leftBackView.userInteractionEnabled = NO;
  41. [self addSubview:_leftBackView];
  42.  
  43. // 右侧view
  44. _rightBackView = [[UIView alloc] initWithFrame:CGRectMake(self.bounds.size.width / .f, ,
  45. self.bounds.size.width / .f, self.bounds.size.height)];
  46. _rightBackView.userInteractionEnabled = NO;
  47. [self addSubview:_rightBackView];
  48.  
  49. // 遮挡用的view
  50. _blockBackView = [[UIView alloc] initWithFrame:CGRectMake(, ,
  51. self.bounds.size.width / .f,
  52. self.bounds.size.height)];
  53. _blockBackView.userInteractionEnabled = NO;
  54. [self addSubview:_blockBackView];
  55.  
  56. }
  57. return self;
  58. }
  59.  
  60. - (void)buttonEvent {
  61. if (_blockBackView.frame.origin.x == ) {
  62. if (_delegate) {
  63. [_delegate switchButtonState:YES];
  64. }
  65.  
  66. [UIView animateWithDuration:(_duration > ? _duration : 0.2f)
  67. animations:^{
  68. _blockBackView.frame = CGRectMake(self.bounds.size.width / .f, ,
  69. self.bounds.size.width / .f, self.bounds.size.height);
  70. if (_leftBackgroundColor) {
  71. _button.backgroundColor = _leftBackgroundColor;
  72. }
  73.  
  74. } completion:^(BOOL finished) {
  75.  
  76. }];
  77. } else {
  78. [_delegate switchButtonState:NO];
  79. [UIView animateWithDuration:(_duration > ? _duration : 0.2f)
  80. animations:^{
  81. _blockBackView.frame = CGRectMake(, ,
  82. self.bounds.size.width / .f, self.bounds.size.height);
  83. if (_rightBackgroundColor) {
  84. _button.backgroundColor = _rightBackgroundColor;
  85. }
  86. } completion:^(BOOL finished) {
  87.  
  88. }];
  89. }
  90. }
  91.  
  92. @synthesize leftView = _leftView;
  93. - (void)setLeftView:(UIView *)leftView {
  94. _leftView = leftView;
  95. leftView.userInteractionEnabled = NO;
  96. [_leftBackView addSubview:leftView];
  97.  
  98. [self bringSubviewToFront:_blockBackView];
  99. }
  100.  
  101. @synthesize rightView = _rightView;
  102. - (void)setRightView:(UIView *)rightView {
  103. _rightView = rightView;
  104. rightView.userInteractionEnabled = NO;
  105. [_rightBackView addSubview:rightView];
  106.  
  107. [self bringSubviewToFront:_blockBackView];
  108. }
  109.  
  110. @synthesize blockView = _blockView;
  111. - (void)setBlockView:(UIView *)blockView {
  112. _blockView = blockView;
  113. blockView.userInteractionEnabled = NO;
  114. [_blockBackView addSubview:blockView];
  115.  
  116. [self bringSubviewToFront:_blockBackView];
  117. }
  118.  
  119. @synthesize blockAtLeft = _blockAtLeft;
  120. - (void)setBlockAtLeft:(BOOL)blockAtLeft {
  121. _blockAtLeft = blockAtLeft;
  122. if (blockAtLeft == YES) {
  123. _blockBackView.frame = CGRectMake(, ,
  124. self.bounds.size.width / .f,
  125. self.bounds.size.height);
  126. } else {
  127. _blockBackView.frame = CGRectMake(self.bounds.size.width / .f, ,
  128. self.bounds.size.width / .f, self.bounds.size.height);
  129. }
  130. }
  131.  
  132. #pragma mark - 便利构造器
  133. + (SwitchButton *)createDefaultTypeButtonWithLeftText:(NSString *)leftText
  134. rightText:(NSString *)rightText
  135. size:(CGSize)size {
  136. SwitchButton *button = [[SwitchButton alloc] initWithFrame:CGRectMake(, , size.width, size.height)];
  137. button.layer.cornerRadius = .f;
  138. button.blockAtLeft = NO;
  139. button.leftBackgroundColor = [UIColor colorWithRed:0.969 green:0.365 blue:0.137 alpha:];
  140. button.backgroundColor = [UIColor colorWithRed:0.969 green:0.365 blue:0.137 alpha:];
  141. button.rightBackgroundColor = [UIColor colorWithRed:0.278 green:0.835 blue:0.855 alpha:];
  142.  
  143. button.duration = 0.3f;
  144.  
  145. // 左侧文本
  146. UILabel *man = [[UILabel alloc] initWithFrame:CGRectMake(, , button.bounds.size.width/.f,
  147. button.bounds.size.height)];
  148. man.text = leftText;
  149. man.textColor = [UIColor whiteColor];
  150. man.font = [UIFont systemFontOfSize:.f];
  151. man.textAlignment = NSTextAlignmentCenter;
  152. button.leftView = man;
  153.  
  154. // 右侧文本
  155. UILabel *woman = [[UILabel alloc] initWithFrame:CGRectMake(, , button.bounds.size.width/.f,
  156. button.bounds.size.height)];
  157. woman.text = rightText;
  158. woman.textColor = [UIColor whiteColor];
  159. woman.font = [UIFont systemFontOfSize:.f];
  160. woman.textAlignment = NSTextAlignmentCenter;
  161. button.rightView = woman;
  162.  
  163. // 中间挡住的块
  164. UIView *blockView = [[UIView alloc] initWithFrame:CGRectMake(, , button.bounds.size.width/.f - ,
  165. button.bounds.size.height - )];
  166. blockView.layer.cornerRadius = .f;
  167. blockView.backgroundColor = [UIColor whiteColor];
  168. button.blockView = blockView;
  169.  
  170. return button;
  171. }
  172.  
  173. @end

使用时候源码:

  1. //
  2. // ViewController.m
  3. // KongJian
  4. //
  5. // Created by YouXianMing on 14/10/24.
  6. // Copyright (c) 2014年 YouXianMing. All rights reserved.
  7. //
  8.  
  9. #import "ViewController.h"
  10. #import "SwitchButton.h"
  11.  
  12. @interface ViewController ()<SwitchButtonDelegate>
  13.  
  14. @end
  15.  
  16. @implementation ViewController
  17.  
  18. - (void)viewDidLoad {
  19. [super viewDidLoad];
  20.  
  21. SwitchButton *button = [SwitchButton createDefaultTypeButtonWithLeftText:@"Y"
  22. rightText:@"X"
  23. size:CGSizeMake(, )];
  24. button.delegate = self;
  25. button.center = self.view.center;
  26. [self.view addSubview:button];
  27. }
  28.  
  29. - (void)switchButtonState:(BOOL)state {
  30. NSLog(@"%d", state);
  31. }
  32.  
  33. @end

核心的地方:

便利构造器(你可以自己去写):

定制二选一按钮SwitchButton的更多相关文章

  1. 设计多选一按钮ChooseOnlyButton

    设计多选一按钮ChooseOnlyButton 效果: 源码: ChooseOnlyButton.h 与 ChooseOnlyButton.m // // ChooseOnlyButton.h // ...

  2. sencha touch Model validations 自定义验证 二选一输入验证、重复验证、时间验证、比较验证、条件验证(2015-1-14)

    项目初始化时执行以下代码 //重写模型,方便进行自定义验证 Ext.define("Ext.zh.data.Model", { override: "Ext.data.M ...

  3. 设计可以多选的按钮ChooseManyButton

    设计可以多选的按钮ChooseManyButton 效果: 源码: ChooseManyButton.h 与 ChooseManyButton.m // // ChooseManyButton.h / ...

  4. 定制选择范围的按钮RangeButton

    定制选择范围的按钮RangeButton 效果: 源码: RangeButton.h 与 RangeButton.m // // RangeButton.h // PulsingView // // ...

  5. Android笔记-5-EditText密码和Checkbox二选一

    EditText密码:明文和密文 密文: public class MainActivity extends Activity { private EditText password = null; ...

  6. jquery validate 二选一,错误提示在一处

    转载自:http://blog.51yip.com/jsjquery/1483.html 有一同事对jquery validate这个插件不熟,实现多处报错信息在一处,并且还有二选一的情况,二个输入框 ...

  7. 三大视频网站Url的处理保存(视频和图片二选一操作)

    前台Js // 视频处理 var textVideoLink=$("input[name='textVideoLink']").val(); // 去除所有有的引号和空格 var ...

  8. JS流程控制语句 二选一 (if...else语句) 语法: if(条件) { 条件成立时执行的代码} else {条件不成立时执行的代码}

    二选一 (if...else语句) if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码. 语法: if(条件) { 条件成立时执行的代码} else {条件不成立时 ...

  9. html弹出二选一窗口,然后根据点击执行对应的js方法

    html弹出二选一窗口,然后根据点击执行对应的js方法 layer.confirm("我是弹出来的字", {btn:['确认','取消']}, function(){ ...方法1 ...

随机推荐

  1. C++中内联函数

    目录 什么是内联函数 如何使函数内联 为什么要使用内联函数 inline函数的优缺点分析 什么时候该使用内联函数 正文 在C语言中,我们使用宏定义函数这种借助编译器的优化技术来减少程序的执行时间,那么 ...

  2. prometheus安装、使用

    本文主要参考https://songjiayang.gitbooks.io/prometheus/introduction/what.html 二进制包安装 我们可以到 Prometheus 二进制下 ...

  3. 修改MVC默认的pageBaseType以添加功能

    试想下在MVC的前端页面JS或者html中需要使用多语言,而后端的多语言是维护在资源文件中的,前端如果使用的话需要使用AJAX频繁的获取,一个页面中可能会存在大量的需要语言转换的地方,频繁使用AJAX ...

  4. PowerDesigner设置默认值名称规则

    一.需求背景: 使用PowerDesigner创建表时,若设置某列默认值时,自动生成规则的默认值名称.比如说:DF_表名_列名 二.设置步骤: 1.选择Database—>Edit Curren ...

  5. office中把标题之后的空格去掉

    调整列表缩进--编号之后不特别标注可以把标题之后的空格去掉

  6. Java开发中常用的设计模式(三)---建造者模式

    一. 模式结构 建造者模式主要包含四个角色: Product:产品角色. Builder:抽象建造者.它声明为创建一个Product对象的各个部件指定的抽象接口. ConcreteBuilder:具体 ...

  7. Code Signal_练习题_Array Replace

    Given an array of integers, replace all the occurrences of elemToReplace with substitutionElem. Exam ...

  8. python学习之老男孩python全栈第九期_数据库day004 -- 作业

    https://www.cnblogs.com/YD2018/p/9451809.html 11. 查询学过“001”并且也学过编号“002”课程的同学的学号.姓名 select student.si ...

  9. Fastify 系列教程二 (中间件、钩子函数和装饰器)

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...

  10. nginx的MainLine version、Stable version、Legacy versions

    Nginx的版本说明Mainline version:在线版本,正处于开发状态Stable version :稳定版本(一般下载使用)Legacy version :遗留版本,遗留的老的版本 Linu ...