BEMCheckBox——高雅的iOS复选框

作者: 独木舟的木 | 来源:发表于2017-04-11 11:49 被阅读3222次

GitHub地址：BEMCheckBox
star：1800+

                                ⭐️⭐️⭐️ 
          以下内容来源于官方源码、 README 文档、测试 Demo或个人使用总结 ！

BEMCheckBox 和普通的UI控件用起来相差无几，本文我是对官方 Read.me 的翻译。

BEMCheckBox 是一个开源库，可以轻松地为iOS创建漂亮，高度可定制的，有动画效果的复选框。

[TOC]

项目细节

学习更多关于 BEMCheckBox 项目，许可协议，支持等等。

要求

需要 iOS 7或更高版本，APP 样例是在 iOS 9 上创建的。
需要自动引用计数（ARC）。
针对 ARM64 架构进行了优化。

许可协议

查看许可协议，你可以自由地进行更改，并将其用于个人或商业项目。署名不是必要的，但我们高度赞赏（这样的行为）。些许“谢谢！” （或有效的东西）总是受欢迎的。如果你在应用程序中使用了 BEMCheckBox ，请让我们知道！

支持

如果你需要任何帮助或关于这个项目有任何讨论的话题请在 Gitter 上加入我们。

App 样例

该项目附带的iOS APP样例演示了正确设置和使用 BEMCheckBox 的方法之一。它还提供了在应用程序中自定义复选框的可能性。

React Native 支持

BEMCheckBox 现在可以被使用于 React Native ：React-Native-BEMCheckBox

开始使用

只需要几步就可以在你的项目中安装和创建 BEMCheckBox。

安装

CocoaPods

安装 BEMCheckBox 最容易的方式是使用 CocoaPods。为此，只需将以下行添加到您的 Podfile :

pod 'BEMCheckBox'

⚠️如果使用 CocoaPods 将 BEMCheckBox 作为静态库导入项目，那么在 Interface Builder 中创建 BEMCheckBox 时会遇到这样的问题：
IB Designables: Failed to update auto layout status: Failed to load designables from path (null)
原因可能是这种方式不支持可视化设计。
解决方法：

以动态库的方式添加 BEMCheckBox, 使用 CocoaPods 时在 Podfile 文件中取消注释 use_frameworks!,但是这样一来很多其他的第三方框架同时又会产生莫名其妙的问题。
使用 Carthage。
最简单的解决方法是手动把源文件拖进工程中。
Carthage

Carthage 是一个分散的依赖管理器，用于构建你的依赖关系并为你提供二进制框架。

在你的 Cartfile 中添加 BEMCheckBox 以构建框架后运行 carthage update。将内置的BEMCheckBox.framework 拖到 Xcode 项目中。
手动导入

最后，你可以手动添加 BEMCheckBox。只需将 Classes 文件夹拖放到 Xcode 项目中即可。当这样做时，确保并检查 “Copy items into destination group's folder” 框被选中。

创建

在你的项目中创建 BEMCheckBox 再简单不过了。它模仿 UISwitch开关。事实上，你可以在项目中用 BEMCheckBox 替换 UISwitch 的实例！

以下是完成所有操作的步骤：

导入 "BEMCheckBox.h" 到视图控制器的头文件中：
```
import "BEMCheckBox.h"
```
BEMCheckBox 可以通过编程方式（通过代码）或 Interface Builder（Storyboard文件）进行初始化。你可以使用对项目最有意义的方法。

编程方式初始化

只需要添加以下几行代码到你的 implementation 文件中（通常是在你视图控制器的 viewDidLoad 方法中）。

BEMCheckBox *myCheckBox = [[BEMCheckBox alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
[self.view addSubview:myCheckBox];

Interface Builder 方式初始化

拖一个 UIView 到你的UIViewController中。
将新的添加的UIView的类名改为BEMCheckBox。
选择BEMCheckBox然后打开属性检视器（Attributes Inspector）界面。大多数可定制的属性都能在这里被轻易地设置。APP示例应用演示了这个功能。

文档

BEMCheckBox 可用的所有方法和属性如下所示。

启用/禁用复选框

属性：on

就像UISwitch一样，BEMCheckBox 提供了 BOOL 属性 on 来允许你检索和设置（无动画）一个值来确定BEMCheckBox 对象 on 或 off。默认为 NO。

使用示例：

self.myCheckBox.on = YES;

setOn:animated:

就像UISwitch一样，BEMCheckBox 提供了实例方法 setOn:animated:来设置复选框的状态为打卡或者关闭（可选切换动画）。

使用示例：

[self.myCheckBox setOn:YES animated:YES];

重新加载

实例方法 reload允许你重绘整个复选框并且保持当前的 on 值。

使用示例：

[self.myCheckBox reload]

组/单选按钮功能

BEMCheckBoxes 可以轻松地被组合在一起形成单选按钮功能。这会自动管理组中的每个复选框的状态，以便一次只选择一个，并且可以选择性地要求组中的按钮始终有一个被选择。

self.group = [BEMCheckBoxGroup groupWithCheckBoxes:@[self.checkBox1, self.checkBox2, self.checkBox3]];
self.group.selectedCheckBox = self.checkBox2; // 可选择设置哪个复选框被预选
self.group.mustHaveSelection = YES;           // 定义组中是否必须有一个被选择

要查看当前组按钮中哪一个复选框被选中，只要这样做：

BEMCheckBox *selection = self.group.selectedCheckBox;

要管理更新组按钮的选中状态，设置如下：

self.group.selectedCheckBox = self.checkBox1;

Delegate 代理

BEMCheckBox 使用一个委托来接收复选框事件。委托对象必须遵守 BEMCheckBoxDelegate 协议，该协议由两种可选方法组成：

didTapCheckBox:

每当复选框被点击时调用。此方法将在属性更新（on）之后，动画完成之前（如果有的话）被触发。
animationDidStopForCheckBox:

每次复选框完成动画时被调用以更新属性（on），并且动画完成后触发此方法。如果没有动画启动，则不会被触发。

定制

BEMCheckBox 可通过属性专门定制。

下图提供了一个很好的概述：

外观属性

lineWidth - CGFloat

复选标记和框的线宽。默认为2.0。

hideBox - BOOL

BOOL 值来控制是否隐藏该复选框的盒子外壳。将此属性设置为 YES 会将复选框变为如下的复选标记样式。默认为 No。

cornerRadius - 矩形复选框时可以设置圆角属性。

/** The corner radius which is applied to the box when the boxType is BEMBoxTypeSquare. Default to 3.0.
 */
@property (nonatomic) IBInspectable CGFloat cornerRadius;

tintColor - UIColor

复选框处于关闭时，框的颜色。

onCheckColor - UIColor

复选框处于打开时，复选标记的颜色。

onFillColor - UIColor

复选框处于打开时，框内的填充色。

onTintColor - UIColor

复选框处于打开时，框周围线的颜色。

动画

animationDuration - CGFloat

动画持续时间（以秒为单位）。默认为0.5。

onAnimationType - BEMAnimationType

当选中复选框时使用的动画类型。默认为BEMAnimationTypeStroke。参见BEMAnimationType查看更多可用的类型。

offAnimationType - BEMAnimationType

当复选框被取消选择时使用的动画类型。默认为BEMAnimationTypeStroke。参见BEMAnimationType查看更多可用的类型。

minimumTouchSize - 最小触摸大小

/** If the checkbox width or height is smaller than this value, the touch area will be increased. Allows for visually small checkboxes to still be easily tapped. Default: (44, 44)
 */
@property (assign, nonatomic) IBInspectable CGSize minimumTouchSize;

BEMAnimationType - onAnimationType 和 offAnimationType 动画可用的值。

BEMAnimationTypeStroke - 默认类型
BEMAnimationTypeFill
BEMAnimationTypeBounce
BEMAnimationTypeFlat
BEMAnimationTypeOneStroke
BEMAnimationTypeFade

使用

示例一：

- (BEMCheckBox *)checkBox {
    if (!_checkBox) {
        _checkBox = [[BEMCheckBox alloc] initWithFrame:CGRectZero];
        // 矩形复选框
        _checkBox.boxType = BEMBoxTypeSquare;
        // 动画样式
        _checkBox.onAnimationType  = BEMAnimationTypeStroke;
        _checkBox.offAnimationType = BEMAnimationTypeStroke;
        _checkBox.animationDuration = 0.3;
        // 颜色样式
        _checkBox.tintColor    = [UIColor lightGrayColor];
        _checkBox.onTintColor  = HexColor(@"#108EE9");
        _checkBox.onFillColor  = [UIColor clearColor];
        _checkBox.onCheckColor = HexColor(@"#108EE9");
        // 默认选中
        _checkBox.on = YES;
    }
    return _checkBox;
}

示例一(2)

// Frameworks
#import <BEMCheckBox/BEMCheckBox.h>

@property (nonatomic, strong) BEMCheckBox *checkBox; // 记住密码按钮
@property (nonatomic, strong) UILabel *checkBoxLabel;

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.view addSubview:self.checkBox];
    [self.view addSubview:self.checkBoxLabel];

    [self.checkBox mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.background.mas_bottom).with.offset(padding);
        make.left.equalTo(self.view).with.offset(padding);
        make.size.mas_equalTo(CGSizeMake(21, 21));
    }];
    [self.checkBoxLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.checkBox.mas_centerY);
        make.left.equalTo(self.checkBox.mas_right).with.offset(8);
    }];

}

// 记住密码按钮
- (BEMCheckBox *)checkBox {
    if (!_checkBox) {
        _checkBox = [[BEMCheckBox alloc] initWithFrame:CGRectZero];
        _checkBox.boxType = BEMBoxTypeSquare;
        _checkBox.onAnimationType  = BEMAnimationTypeStroke;
        _checkBox.offAnimationType = BEMAnimationTypeStroke;
        _checkBox.animationDuration = 0.3;
        _checkBox.tintColor    = [UIColor lightGrayColor];
        _checkBox.onTintColor  = HexColor(@"#108EE9");
        _checkBox.onFillColor  = [UIColor clearColor];
        _checkBox.onCheckColor = HexColor(@"#108EE9");
        _checkBox.on = self.user.rememberPasswordState;
    }
    return _checkBox;
}

- (UILabel *)checkBoxLabel {
    if (!_checkBoxLabel) {
        _checkBoxLabel = [[UILabel alloc] initWithFrame:CGRectZero];
        NSDictionary *attributes = @{
                                     NSFontAttributeName:FONT(17),
                                     NSForegroundColorAttributeName:[UIColor lightGrayColor]
                                     };
        NSAttributedString *text = [[NSAttributedString alloc] initWithString:@"保持登录状态"
                                                                   attributes:attributes];
        [_checkBoxLabel setAttributedText:text];
        [_checkBoxLabel setBackgroundColor:[UIColor clearColor]];
    }
    return _checkBoxLabel;

示例二：

// 使用 Interface Builder 设置复选框时，可能还需要如下设置
self.checkBox21.onAnimationType  = BEMAnimationTypeFade;
self.checkBox21.offAnimationType = BEMAnimationTypeFade;
self.checkBox22.onAnimationType  = BEMAnimationTypeFade;
self.checkBox22.offAnimationType = BEMAnimationTypeFade;

NSArray *checkBoxArray2 = @[self.checkBox21,self.checkBox22];
self.checkBoxGroup2 = [BEMCheckBoxGroup groupWithCheckBoxes:checkBoxArray2];
self.checkBoxGroup2.selectedCheckBox = self.checkBox21;
self.checkBoxGroup2.mustHaveSelection = YES;

示例三：

一组单选框按钮完整示例：

// Frameworks
#import <BEMCheckBox/BEMCheckBox.h>

@interface HQLInsurancePaymentViewController () <UITextFieldDelegate, BEMCheckBoxDelegate>
  
@property (nonatomic, strong) BEMCheckBoxGroup *checkBoxGroup;
@property (nonatomic, strong) BEMCheckBox *checkBox1;
@property (nonatomic, strong) BEMCheckBox *checkBox2;

@end
  
@implementation HQLInsurancePaymentViewController

#pragma mark - Lifecycle

- (void)viewDidLoad {
    [super viewDidLoad];
    [self addSubviews];
    [self setupBEMCheckBoxGroup];
}

#pragma mark - Custom Accessors

- (BEMCheckBox *)checkBox1 {
    if (!_checkBox1) {
        _checkBox1 = [[BEMCheckBox alloc] initWithFrame:CGRectZero];
        _checkBox1.onAnimationType = BEMAnimationTypeBounce;
        _checkBox1.offAnimationType = BEMAnimationTypeBounce;
        _checkBox1.animationDuration = 0.3;
        _checkBox1.delegate = self;
    }
    return _checkBox1;
}

- (BEMCheckBox *)checkBox2 {
    if (!_checkBox2) {
        _checkBox2 = [[BEMCheckBox alloc] initWithFrame:CGRectZero];
        _checkBox2.onAnimationType = BEMAnimationTypeBounce;
        _checkBox2.offAnimationType = BEMAnimationTypeBounce;
        _checkBox1.animationDuration = 0.3;
        _checkBox2.delegate = self;
    }
    return _checkBox2;
}

#pragma mark - Private

- (void)addSubviews {
    self.view.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.checkBox1];
    [self.view addSubview:self.checkBox2];
  
    UILabel *title = [[UILabel alloc] init];
    title.text = @"1.请选择支付方式";
    title.textColor = HexColor(@"#3E91FF");
    title.font = [UIFont systemFontOfSize:17 weight:UIFontWeightMedium];
    [self.view addSubview:title];
  
    [self.checkBox1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(title.mas_bottom).with.offset(padding);
        make.left.equalTo(title.mas_left).with.offset(16);
        make.size.mas_equalTo(CGSizeMake(21, 21));
    }];
    [self.checkBox2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.checkBox1.mas_bottom).with.offset(15);
        make.left.equalTo(self.checkBox1);
        make.size.mas_equalTo(CGSizeMake(21, 21));
    }];
}

- (void)setupBEMCheckBoxGroup {
    NSArray *checkBoxArray = @[self.checkBox1,self.checkBox2];
    self.checkBoxGroup = [BEMCheckBoxGroup groupWithCheckBoxes:checkBoxArray];
    self.checkBoxGroup.selectedCheckBox = self.checkBox1;
    self.checkBoxGroup.mustHaveSelection = YES;
}

#pragma mark - BEMCheckBoxDelegate

- (void)didTapCheckBox:(BEMCheckBox *)checkBox {
    [self.view endEditing:YES];
}

示例三

BEMCheckBox——高雅的iOS复选框

项目细节

要求

许可协议

支持

App 样例

React Native 支持

开始使用

安装

创建

文档

启用/禁用复选框

重新加载

组/单选按钮功能

Delegate 代理

定制

使用

示例一：

示例一(2)

示例二：

示例三：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

库

iOS开发资料收集区