设计多选一按钮ChooseOnlyButton

效果:

源码:

ChooseOnlyButton.h 与 ChooseOnlyButton.m

  1. //
  2. // ChooseOnlyButton.h
  3. // ChooseOnlyButton
  4. //
  5. // Created by YouXianMing on 14/11/4.
  6. // Copyright (c) 2014年 YouXianMing. All rights reserved.
  7. //
  8.  
  9. #import <UIKit/UIKit.h>
  10. @class ChooseOnlyButton;
  11.  
  12. @protocol ChooseOnlyButtonDelegate <NSObject>
  13. @optional
  14. - (void)chooseButtonTitle:(NSString *)title;
  15. @end
  16.  
  17. @interface ChooseOnlyButton : UIView
  18.  
  19. /**
  20. * 代理
  21. */
  22. @property (nonatomic, assign) id<ChooseOnlyButtonDelegate> delegate;
  23.  
  24. /**
  25. * 选取的按钮的标题(只读)
  26. */
  27. @property (nonatomic, strong, readonly) NSString *selectedTitle;
  28.  
  29. /**
  30. * 标题的数组
  31. */
  32. @property (nonatomic, strong) NSArray *titles;
  33.  
  34. /**
  35. * 按钮离左侧的距离
  36. */
  37. @property (nonatomic, assign) CGFloat gapFromLeft;
  38.  
  39. /**
  40. * 两个按钮之间的水平距离
  41. */
  42. @property (nonatomic, assign) CGFloat gapFromHorizontalButton;
  43.  
  44. /**
  45. * 两个按钮之间的垂直间距
  46. */
  47. @property (nonatomic, assign) CGFloat gapFromVerticalButton;
  48.  
  49. /**
  50. * 按钮高度
  51. */
  52. @property (nonatomic, assign) CGFloat buttonHeight;
  53.  
  54. /**
  55. * 按钮标题字体
  56. */
  57. @property (nonatomic, strong) UIFont *buttonTitleFont;
  58.  
  59. /**
  60. * 没有选中状态下的按钮的背景颜色以及按钮字体的颜色
  61. */
  62. @property (nonatomic, strong) UIColor *normalButtonBackgroundColor;
  63. @property (nonatomic, strong) UIColor *normalButtonTitleColor;
  64.  
  65. /**
  66. * 选中状态下的按钮的背景颜色以及按钮字体的颜色
  67. */
  68. @property (nonatomic, strong) UIColor *selectedButtonBackgroundColor;
  69. @property (nonatomic, strong) UIColor *selectedButtonTitleColor;
  70.  
  71. /**
  72. * 重设view的尺寸并且创建出新的按钮
  73. */
  74. - (void)resetSizeAndCreateButtons;
  75.  
  76. /**
  77. * 重新计算frame
  78. *
  79. * @return frame值
  80. */
  81. - (CGRect)calculateFrame;
  82.  
  83. @end
  1. //
  2. // ChooseOnlyButton.m
  3. // ChooseOnlyButton
  4. //
  5. // Created by YouXianMing on 14/11/4.
  6. // Copyright (c) 2014年 YouXianMing. All rights reserved.
  7. //
  8.  
  9. #import "ChooseOnlyButton.h"
  10.  
  11. @implementation ChooseOnlyButton
  12.  
  13. - (instancetype)initWithFrame:(CGRect)frame
  14. {
  15. self = [super initWithFrame:frame];
  16. if (self) {
  17.  
  18. }
  19. return self;
  20. }
  21.  
  22. - (void)resetSizeAndCreateButtons {
  23.  
  24. // 没有元素则退出
  25. if (_titles.count == ) {
  26. return;
  27. }
  28.  
  29. // 没有设置左边距则默认值为5.f
  30. if (_gapFromLeft == ) {
  31. _gapFromLeft = .f;
  32. }
  33.  
  34. // 没有设置水平按钮间距则默认值为5.f
  35. if (_gapFromHorizontalButton == ) {
  36. _gapFromHorizontalButton = .f;
  37. }
  38.  
  39. // 没有设置垂直按钮间距则默认值为5.f
  40. if (_gapFromVerticalButton == ) {
  41. _gapFromVerticalButton = .f;
  42. }
  43.  
  44. // 没有设置按钮高度则按钮默认高度为20.f
  45. if (_buttonHeight == ) {
  46. _buttonHeight = .f;
  47. }
  48.  
  49. // 获取frame宽度
  50. CGFloat frameWidth = self.bounds.size.width;
  51.  
  52. // 计算出按钮宽度
  53. CGFloat buttonWidth = (frameWidth - _gapFromLeft* - _gapFromHorizontalButton)/.f;
  54.  
  55. // 动态创建出按钮
  56. for (int i = ; i < _titles.count; i++) {
  57. UIButton *button = [[UIButton alloc] initWithFrame:\
  58. CGRectMake(_gapFromLeft + (buttonWidth + _gapFromHorizontalButton)*(i%),
  59. (i/)*(_buttonHeight + _gapFromVerticalButton),
  60. buttonWidth,
  61. _buttonHeight)];
  62.  
  63. // 设置按钮圆角
  64. button.layer.cornerRadius = _buttonHeight/.f;
  65. [button addTarget:self
  66. action:@selector(buttonsEvent:)
  67. forControlEvents:UIControlEventTouchUpInside];
  68.  
  69. // 设置按钮标题 + 默认的标题颜色
  70. [button setTitle:_titles[i] forState:UIControlStateNormal];
  71. [self normalButtonStyle:button];
  72.  
  73. // 设置字体
  74. if (_buttonTitleFont) {
  75. button.titleLabel.font = _buttonTitleFont;
  76. }
  77.  
  78. [self addSubview:button];
  79. }
  80.  
  81. // 重设自身view高度
  82. CGFloat selfViewHeight = _buttonHeight*((_titles.count - )/ + ) + _gapFromVerticalButton*((_titles.count - )/);
  83. CGRect rect = self.frame;
  84. rect.size.height = selfViewHeight;
  85. self.frame = rect;
  86. }
  87.  
  88. - (CGRect)calculateFrame {
  89.  
  90. // 没有元素则退出
  91. if (_titles.count == ) {
  92. return CGRectZero;
  93. }
  94.  
  95. // 没有设置左边距则默认值为5.f
  96. if (_gapFromLeft == ) {
  97. _gapFromLeft = .f;
  98. }
  99.  
  100. // 没有设置水平按钮间距则默认值为5.f
  101. if (_gapFromHorizontalButton == ) {
  102. _gapFromHorizontalButton = .f;
  103. }
  104.  
  105. // 没有设置垂直按钮间距则默认值为5.f
  106. if (_gapFromVerticalButton == ) {
  107. _gapFromVerticalButton = .f;
  108. }
  109.  
  110. // 没有设置按钮高度则按钮默认高度为20.f
  111. if (_buttonHeight == ) {
  112. _buttonHeight = .f;
  113. }
  114.  
  115. // 根据控件的一些参数计算出高度
  116. CGFloat selfViewHeight = _buttonHeight*((_titles.count - )/ + ) + _gapFromVerticalButton*((_titles.count - )/);
  117. CGRect rect = self.frame;
  118. rect.size.height = selfViewHeight;
  119.  
  120. // 返回控件
  121. return rect;
  122. }
  123.  
  124. - (void)buttonsEvent:(UIButton *)button {
  125.  
  126. [[self subviews] enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
  127. if ([obj isKindOfClass:[UIButton class]]) {
  128. if ([button isEqual:obj]) {
  129. // 选中按钮的样式
  130. [self selectButtonStyle:obj];
  131.  
  132. UIButton *button = (UIButton *)obj;
  133.  
  134. // 获取到选取的按钮标题
  135. _selectedTitle = button.titleLabel.text;
  136.  
  137. // 代理
  138. if (_delegate && [_delegate respondsToSelector:@selector(chooseButtonTitle:)]) {
  139.  
  140. [_delegate chooseButtonTitle:button.titleLabel.text];
  141. }
  142. } else {
  143. [self normalButtonStyle:obj];
  144. }
  145. }
  146. }];
  147. }
  148.  
  149. #pragma mark - 私有方法
  150. /**
  151. * 普通按钮的样式
  152. *
  153. * @param button 要改变样式的按钮
  154. */
  155. - (void)normalButtonStyle:(UIButton *)button {
  156.  
  157. if (_normalButtonTitleColor) {
  158. [button setTitleColor:_normalButtonTitleColor
  159. forState:UIControlStateNormal];
  160. } else {
  161. [button setTitleColor:[UIColor colorWithRed:0.000 green:0.361 blue:0.671 alpha:]
  162. forState:UIControlStateNormal];
  163. }
  164.  
  165. if (_normalButtonBackgroundColor) {
  166. button.backgroundColor = _normalButtonBackgroundColor;
  167. } else {
  168. button.backgroundColor = [UIColor clearColor];
  169. }
  170.  
  171. button.layer.borderColor = [UIColor colorWithRed:0.843 green:0.843 blue:0.843 alpha:].CGColor;
  172. button.layer.borderWidth = .f;
  173. }
  174.  
  175. /**
  176. * 选中按钮时的样式
  177. *
  178. * @param button 要改变样式的按钮
  179. */
  180. - (void)selectButtonStyle:(UIButton *)button {
  181.  
  182. if (_selectedButtonTitleColor) {
  183. [button setTitleColor:_selectedButtonTitleColor
  184. forState:UIControlStateNormal];
  185. } else {
  186. [button setTitleColor:[UIColor colorWithRed:0.973 green:0.984 blue:0.988 alpha:]
  187. forState:UIControlStateNormal];
  188. }
  189.  
  190. if (_selectedButtonBackgroundColor) {
  191. button.backgroundColor = _selectedButtonBackgroundColor;
  192. } else {
  193. button.backgroundColor = [UIColor colorWithRed:0.055 green:0.365 blue:0.663 alpha:];
  194. }
  195.  
  196. button.layer.borderColor = [UIColor colorWithRed:0.055 green:0.365 blue:0.663 alpha:].CGColor;
  197. button.layer.borderWidth = .f;
  198. }
  199.  
  200. @end

使用时候的源码:

  1. //
  2. // ViewController.m
  3. // ChooseOnlyButton
  4. //
  5. // Created by YouXianMing on 14/11/4.
  6. // Copyright (c) 2014年 YouXianMing. All rights reserved.
  7. //
  8.  
  9. #import "ViewController.h"
  10. #import "ChooseOnlyButton.h"
  11.  
  12. @interface ViewController ()<ChooseOnlyButtonDelegate>
  13.  
  14. {
  15. ChooseOnlyButton *button;
  16. }
  17.  
  18. @end
  19.  
  20. @implementation ViewController
  21.  
  22. - (void)viewDidLoad {
  23. [super viewDidLoad];
  24.  
  25. UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
  26. label.textAlignment = NSTextAlignmentCenter;
  27. label.text = @"学挖掘机哪家强?";
  28. label.textColor = [UIColor grayColor];
  29. [self.view addSubview:label];
  30.  
  31. button = [[ChooseOnlyButton alloc] initWithFrame:CGRectMake(, , , )];
  32. button.buttonHeight = .f;
  33. button.gapFromLeft = .f;
  34. button.gapFromVerticalButton = .f;
  35. button.gapFromHorizontalButton = .f;
  36. button.buttonTitleFont = [UIFont systemFontOfSize:.f];
  37. button.titles = @[@"A. 蓝翔",
  38. @"B. blueShit",
  39. @"C. YouXianMing",
  40. @"D. 不知道"];
  41. button.delegate = self;
  42.  
  43. [self.view addSubview:button];
  44.  
  45. // 设置完所有参数后创建出控件
  46. [button resetSizeAndCreateButtons];
  47. }
  48.  
  49. #pragma mark - 代理
  50. - (void)chooseButtonTitle:(NSString *)title {
  51. NSLog(@"%@", title);
  52. NSLog(@"%@", button.selectedTitle);
  53. }
  54.  
  55. @end

以下是需要注意的地方:

超高的可定制性

设计多选一按钮ChooseOnlyButton的更多相关文章

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

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

  2. 设计多选按钮ListChooseView

    设计多选按钮ListChooseView 答应某位女屌丝而写的控件,效果还不错,开源给大家^_^! 效果图: 源码: // // ListChooseView.h // ScrollChooseBut ...

  3. js动态获取子复选项并设计全选及提交

    在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台 本章将讲述如何通过js控制实现该操作: 1:设计父类别为radio,为每一个radio都加 ...

  4. 定制二选一按钮SwitchButton

    定制二选一按钮SwitchButton 效果: 源码: SwitchButton.h 与 SwitchButton.m // // SwitchButton.h // KongJian // // C ...

  5. .NET开源工作流RoadFlow-表单设计-复选按钮组

    复选按钮组的设置与单选按钮组的设置相同,只是表现形式为:<input type="checkbox"/>

  6. cocos2dx 3.x (单选,多选,复选checkBox按钮的实现) RadioButton

    // //  LandLordsMakeNewRoom.hpp //  MalaGame39 // //  Created by work on 2016/12/19. // //   #ifndef ...

  7. xmlplus 组件设计系列之二 - 按钮

    除了图标以外,按钮也许是最简单的组件了,现在来看看如何定义按钮组件. 使用原生按钮组件 在 xmlplus 中,HTML 元素也以组件的方式存在.所以,你可以直接通过使用 button 标签或者 in ...

  8. 聊聊Zookeeper应用场景、架构设计、选主机制

    Zookeeper作为一个分布式协调系统提供了一项基本服务:分布式锁服务,分布式锁是分布式协调技术实现的核心内容.像配置管理.任务分发.组服务.分布式消息队列.分布式通知/协调等,这些应用实际上都是基 ...

  9. UI设计, 弹出对话框 设计(区分强调按钮和普通按钮,给用户一个 正向建议的强调按钮)

    在UI设计时,经常会需要 设计 弹出对话框,以下是个样式设计: 0.标准对话框 说明 Title space : 标题区 contents space : 内容区 function space: 功能 ...

随机推荐

  1. tomcat启动(三)Catalina分析-load方法分析

    load()方法按从上到下顺序分析(主要分析本人所没学过的知识点,其它略过...). Digester类作用 使用sax技术对xml进行解析 未开始解析时Digester.push(this)这个用来 ...

  2. System.Windows.Forms.Timer的简单用法

    Timer就是用来计时操作,如:你想在多少秒之后执行某个动作 Timer showTextBoxTimer = new Timer(); //新建一个Timer对象 showTextBoxTimer. ...

  3. android开发学习笔记系列(2)-android应用界面编程

    前言 本篇博客将会简要介绍andriod开发过程中的一些界面元素和编程的实现,我将大家走进安卓的XML世界,当然可能会涉及到java代码,当然本文主要是介绍XML文件的界面布局. 那么我们的XML存在 ...

  4. LVS负载均衡DR模式部署

    目录: 1. 拓扑图 2. 搭建环境 3. LVS服务器部署 4. 测试 1. 拓扑图     LVS-DR模式采的IP地址全部为外网IP.    本例中IP的设置全部采用临时设置IP的方式,重启后会 ...

  5. c# 键值对照表

    虚拟键值表 虚拟键 十六进制值 十进制值 相应键盘或鼠标键 VK_LBUTTON 1 1 鼠标左键 VK_RBUTTON 2 2 鼠标右键 VK_CANCEL 3 3 Ctrl-Break键 VK_M ...

  6. awk去重以某列重复的行

    [root@localhost cc]# cat 2.txt adc 3 5 a d aa 3 adfa d ba 3 adf 去重第一列重复的行: [root@localhost cc]# cat ...

  7. 基于.NET Core2的图片上传

    其实,.NET Core2的图片上传挺好做的,只是,有些坑要注意.......话不多说,上代码 public async Task<IActionResult> Upload([FromS ...

  8. java 对CSV 文件的读取与生成

    CSV文件是以逗号分隔值的文件格式,一般用WORDPAD或记事本(NOTE),EXCEL打开.CSV(逗号分隔值)是一种用来存储数据的纯文本文件,通常都是用于存放电子表格或数据的一种文件格式,对于CS ...

  9. 《码出高效 Java开发手册》第四章 走进JVM(未整理)

    码云地址: https://gitee.com/forxiaoming/JavaBaseCode/tree/master/EasyCoding

  10. js-权威指南学习笔记3

    第四章 表达式和运算符 1.最简单的表达式是原始表达式,是表达式的最小单位——它们不再包含其他表达式.JS中原始表达式包含常量或直接量.关键字和变量. 2.一个对象的属性名不是固定值时,必须使用方括号 ...