Git Product home page Git Product logo

crboxinputview's Introduction

CRBoxInputViewHeadImg.png CI Status Version License Platform

该组件可以在短信验证码,密码输入框,或者手机号码输入框这些场景中使用。
希望你可以喜欢!

Pod安装

CRBoxInputView 可以通过 CocoaPods. 来安装, 只需简单的在你的 Podfile 中添加如下代码:

pod 'CRBoxInputView'

示列

下载源代码后,可以从Example目录中执行 pod install,然后运行Demo。 iPhone 8 Copy 2.png

快速指南

类型 示例图片
Base Normal.png
CustomBox CustomBox.png
Line Line.png
SecretSymbol SecretSymbol.png
SecretImage SecretImage.png
SecretView SecretView.png

使用说明

Base

Normal.png

在需要使用的地方插入如下代码

CRBoxInputView *boxInputView = [[CRBoxInputView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
[boxInputView loadAndPrepareView];
[self.view addSubview:boxInputView];

CustomBox

CustomBox.png

Step1:

参考这里来创建自定义类

Step2:

修改继承自CRBoxInputCell 的自定义 CRBoxInputCell_Custom 类的 .m 文件

- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];

if (self) {
self.layer.shadowColor = [color_master colorWithAlphaComponent:0.2].CGColor;
self.layer.shadowOpacity = 1;
self.layer.shadowOffset = CGSizeMake(0, 2);
self.layer.shadowRadius = 4;
}

return self;
}

Step3:

在需要使用的地方插入如下代码

CRBoxInputCellProperty *cellProperty = [CRBoxInputCellProperty new];
cellProperty.cellBgColorNormal = color_FFECEC;
cellProperty.cellBgColorSelected = [UIColor whiteColor];
cellProperty.cellCursorColor = color_master;
cellProperty.cellCursorWidth = 2;
cellProperty.cellCursorHeight = YY_6(27);
cellProperty.cornerRadius = 4;
cellProperty.borderWidth = 0;
cellProperty.cellFont = [UIFont boldSystemFontOfSize:24];
cellProperty.cellTextColor = color_master;

CRBoxInputView_Custom *boxInputView = [[CRBoxInputView_Custom alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
boxInputView.boxFlowLayout.itemSize = CGSizeMake(50, 50);
boxInputView.customCellProperty = cellProperty;
[boxInputView loadAndPrepareView];

Line

Line.png

Step1:

参考这里来创建自定义类

Step2:

修改继承自CRBoxInputCell 的自定义 CRBoxInputCell_Custom 类的 .m 文件

- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];

if (self) {
[self addSepLineView];
}

return self;
}

- (void)addSepLineView
{
static CGFloat sepLineViewHeight = 4;

UIView *_sepLineView = [UIView new];
_sepLineView.backgroundColor = color_master;
_sepLineView.layer.cornerRadius = sepLineViewHeight / 2.0;
[self.contentView addSubview:_sepLineView];
[_sepLineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.offset(0);
make.height.mas_equalTo(sepLineViewHeight);
}];

_sepLineView.layer.shadowColor = [color_master colorWithAlphaComponent:0.2].CGColor;
_sepLineView.layer.shadowOpacity = 1;
_sepLineView.layer.shadowOffset = CGSizeMake(0, 2);
_sepLineView.layer.shadowRadius = 4;
}

Step3:

在需要使用的地方插入如下代码

CRBoxInputView_Custom *boxInputView = [[CRBoxInputView_Custom alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
[boxInputView loadAndPrepareView];
[self.view addSubview:boxInputView];

SecretSymbol

SecretSymbol.png

在需要使用的地方插入如下代码

CRBoxInputCellProperty *cellProperty = [CRBoxInputCellProperty new];
cellProperty.securitySymbol = @"*";

CRBoxInputView *boxInputView = [[CRBoxInputView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
boxInputView.ifNeedSecurity = YES;
boxInputView.customCellProperty = cellProperty;
[boxInputView loadAndPrepareView];
[self.view addSubview:boxInputView];

SecretImage

SecretImage.png

Step1:

参考这里来创建自定义类

Step2:

修改继承自CRBoxInputCell 的自定义 CRBoxInputCell_Custom 类的 .m 文件

// 在这里重写你的security view
- (UIView *)createCustomSecurityView
{
UIView *customSecurityView = [UIView new];

UIImageView *_lockImgView = [UIImageView new];
_lockImgView.image = [UIImage imageNamed:@"smallLock"];
[customSecurityView addSubview:_lockImgView];
[_lockImgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.offset(0);
make.centerY.offset(0);
make.width.mas_equalTo(XX_6(23));
make.height.mas_equalTo(XX_6(27));
}];

return customSecurityView;
}

Step3:

在需要使用的地方插入如下代码

CRBoxInputView_Custom *boxInputView = [[CRBoxInputView_Custom *boxInputView = [[CRBoxInputView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
boxInputView.ifNeedSecurity = YES;
[boxInputView loadAndPrepareView];
[self.view addSubview:boxInputView];

SecretView

SecretView.png

Step1:

参考这里来创建自定义类

Step2:

修改继承自CRBoxInputCell 的自定义 CRBoxInputCell_Custom 类的 .m 文件

// 在这里重写你的security view
- (UIView *)createCustomSecurityView
{
UIView *customSecurityView = [UIImageView new];

UIView *rectangleView = [UIView new];
rectangleView.layer.cornerRadius = 4;
rectangleView.backgroundColor = color_master;
[customSecurityView addSubview:rectangleView];
[rectangleView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.offset(0);
make.centerY.offset(0);
make.width.height.mas_equalTo(XX_6(24));
}];

rectangleView.layer.shadowColor = [color_master colorWithAlphaComponent:0.2].CGColor;
rectangleView.layer.shadowOpacity = 1;
rectangleView.layer.shadowOffset = CGSizeMake(0, 2);
rectangleView.layer.shadowRadius = 4;

return customSecurityView;
}

Step3:

在需要使用的地方插入如下代码

CRBoxInputView_Custom *boxInputView = [[CRBoxInputView_Custom *boxInputView = [[CRBoxInputView alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
boxInputView.ifNeedSecurity = YES;
[boxInputView loadAndPrepareView];
[self.view addSubview:boxInputView];

Create custom class

Step1:

创建 CRBoxInputView_Custom 类,并且继承自 CRBoxInputView。 .h file

#import <CRBoxInputView/CRBoxInputView.h>

@interface CRBoxInputView_Custom : CRBoxInputView
@end

.m file

#import "CRBoxInputView_Custom.h"
#import "CRBoxInputCell_Custom.h"

@implementation CRBoxInputView_Custom

- (void)initDefaultValue
{
[super initDefaultValue];

// CollectionView 注册 Class
[[self mainCollectionView] registerClass:[CRBoxInputCell_Custom class] forCellWithReuseIdentifier:CRBoxInputCell_CustomID];
}

// 重写这个方法
- (CRBoxInputCell_Custom *)customCollectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CRBoxInputCell_Custom *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CRBoxInputCell_CustomID forIndexPath:indexPath];
return cell;
}

@end

Step2:

创建 CRBoxInputCell_Custom 类,并且继承自 CRBoxInputCell。 并且定义你自己的 cellId。 .h file

#import <CRBoxInputView/CRBoxInputView.h>

// 定义你自己的 cellId
#define CRBoxInputCell_CustomID @"CRBoxInputCell_CustomID"

@interface CRBoxInputCell_Custom : CRBoxInputCell
@end

.m file

#import "CRBoxInputCell_Custom.h"

@implementation CRBoxInputCell_Custom

- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];

if (self) {
// 在此处编写你的代码
}

return self;
}

// 你可以在这里创建你的security view
- (UIView *)createCustomSecurityView
{
UIView *customSecurityView = [UIView new];
return customSecurityView;
}

@end

属性和方法

CRBoxInputCellProperty class

// UI
self.cellBorderColorNormal = [UIColor colorWithRed:228/255.0 green:228/255.0 blue:228/255.0 alpha:1];
self.cellBorderColorSelected = [UIColor colorWithRed:255/255.0 green:70/255.0 blue:62/255.0 alpha:1];
self.cellBgColorNormal = [UIColor whiteColor];
self.cellBgColorSelected = [UIColor whiteColor];
self.cellCursorColor = [UIColor colorWithRed:255/255.0 green:70/255.0 blue:62/255.0 alpha:1];
self.cellCursorWidth = 2;
self.cellCursorHeight = 32;
self.cornerRadius = 4;
self.borderWidth = (0.5);

// label
self.cellFont = [UIFont systemFontOfSize:20];
self.cellTextColor = [UIColor blackColor];

// Security
self.ifShowSecurity = NO;
self.securitySymbol = @"";
self.originValue = @"";
self.securityType = CRBoxSecuritySymbolType;

CRBoxFlowLayout class

/** 是否需要等间距
* default: YES
*/
@property (assign, nonatomic) BOOL ifNeedEqualGap;

@property (assign, nonatomic) NSInteger itemNum;

CRBoxInputView class

/**
是否需要光标
*default: YES
*/
@property (assign, nonatomic) BOOL ifNeedCursor;

/**
验证码长度
default: 4
*/
@property (nonatomic, assign) NSInteger codeLength;

/**
是否开启密文模式
default: NO
*/
@property (assign, nonatomic) BOOL ifNeedSecurity;

/**
显示密文的延时时间
default: 0.3
*/
@property (assign, nonatomic) CGFloat securityDelay;

/**
键盘类型
default: UIKeyboardTypeNumberPad
*/
@property (assign, nonatomic) UIKeyboardType keyBoardType;

@property (copy, nonatomic) TextDidChangeblock textDidChangeblock;
@property (strong, nonatomic) CRBoxFlowLayout *boxFlowLayout;
@property (strong, nonatomic) CRBoxInputCellProperty *customCellProperty;
@property (strong, nonatomic, readonly) NSString  *textValue;

- (void)loadAndPrepareView;
- (void)clearAll;
- (UICollectionView *)mainCollectionView;

// 快速设置
- (void)quickSetSecuritySymbol:(NSString *)securitySymbol;

// 你已经在继承的子类中调用父类方法
- (void)initDefaultValue;

// 你已经在继承的子类中重写父类方法
- (UICollectionViewCell *)customCollectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

CRBoxInputCell class

// 你已经在继承的子类中重写父类方法
- (UIView *)createCustomSecurityView;

作者

BearRan, [email protected]

反馈

如果你在使用这个控件时遇到了问题,可以通过E-mail告诉我,或者为此开一个issuse。

License

CRBoxInputView is available under the MIT license. See the LICENSE file for more info.

crboxinputview's People

Contributors

bearran avatar

Stargazers

MohsinAli avatar

Watchers

MohsinAli avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.