一、開發前言
平時使用微信時候發現微信的selectview不是系統自帶的，而且比系統的漂亮的多的了（具體去看微信圖像選擇項），所以決定開發出一個模仿微信的selectview而且更加小清新（起碼自己的目標是這樣）。
二、構思與分析
猜測微信的selectView 是 一個添加在UIWindows的一個UIView, 它的SubView 是TableView
三、代碼分析
代碼說明
View結構說明
* Title（標題提示）
* 內容顯示（欄目選擇）
* 取消按鍵
SelectView 調用周期
* Show (add 到 window )
* 根據 內容生成 View
* Close (remove superView)
類說明
* RDPSelectView 主要顯示View
* RDPTableViewCell TableView Cell
* RDPSelectModel 封裝Cell顯示的一些內容
四、代碼實現
RDPSelectView 代碼實現
定義部分
- 聲明
//類調用方法
+ (void)rdp_showSelectViewWithTitle:(NSString *)title
cancelButttonTitle:(NSString *)cancelButtonTitle
actionContent:(NSArray<RDPSelectModel *>*)actionContent
selectBlock:(RDPSelectViewBlock)selectBlock;
- (instancetype)initWithTitle:(NSString *)title
cancelButtonTitle:(NSString *)cancelButtonTitle
actonContent:(NSArray<RDPSelectModel *>*)actionContent
selectBlock:(RDPSelectViewBlock)selectBlock;
*實現
if (self = [super initWithFrame:RDP_SCREEN_BOUDS]){
_title = title;
_cancelTitle = cancelButtonTitle;
_actionContents = actionContent;
_selectBlock = selectBlock;
_contentHeight = (actionContent.count >= MAX_CELL_COUNT ? MAX_CELL_COUNT : actionContent.count) * TABLE_CELL_HEIGHT;
_viewHeight += _contentHeight;
_viewHeight += _title ? TITLE_HEIGHT : 0;
_viewHeight += CANCEL_BUTTON_HEIGHT;
_viewHeight +=SPACE_HEIGHT;
[self setSubView];
}
return self;
view配置部分
//設置背景
[self addSubview:({
UIView *coverView = [[UIView alloc] initWithFrame:self.bounds];
coverView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
coverView.alpha = 0;
UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(close)];
[coverView addGestureRecognizer:tapGR];
_coverView = coverView;
})];
//設置內容view(內容部分)
[self addSubview:({
UIView *contentView = [[UIView alloc] init];
contentView.frame = CGRectMake(0, self.frame.size.height, self.frame.size.width, _viewHeight);
contentView.backgroundColor = CONTENT_COLOR;
_contentView = contentView;
})];
//設置標題
if (_title){
[_contentView addSubview:({
UILabel *titleLab = [[UILabel alloc] init];
titleLab.frame = CGRectMake(0, 0, self.frame.size.width, TITLE_HEIGHT);
titleLab = titleLab;
titleLab.font = [UIFont systemFontOfSize:FONT_DEFAULT_SIZE];
titleLab.text = _title;
titleLab.backgroundColor = [UIColor whiteColor];
titleLab.textColor = [UIColor grayColor];
[titleLab setTextAlignment:NSTextAlignmentCenter];
_titleLabel = titleLab;
})];
}
//設置view subivew
[_contentView addSubview:({
UITableView *contentTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_titleLabel.frame), self.frame.size.width, _contentHeight) style:UITableViewStyleGrouped];
contentTableView.showsVerticalScrollIndicator = NO;
contentTableView.showsHorizontalScrollIndicator = NO;
contentTableView.dataSource = self;
contentTableView.delegate = self;
contentTableView.scrollEnabled = _actionContents.count > MAX_CELL_COUNT;
contentTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
contentTableView.bounces = NO;
_contentTableView = contentTableView;
})];
//取消按鍵
[_contentView addSubview:({
UIButton *cancelBtn = [[UIButton alloc] init];
cancelBtn.frame = CGRectMake(0, _contentView.frame.size.height - CANCEL_BUTTON_HEIGHT, self.frame.size.width, CANCEL_BUTTON_HEIGHT);
[cancelBtn.titleLabel setFont:[UIFont systemFontOfSize:FONT_DEFAULT_SIZE]];
[cancelBtn setTitle:_cancelTitle ? _cancelTitle : @"取消" forState:UIControlStateNormal];
[cancelBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[cancelBtn setBackgroundColor:[UIColor whiteColor]];
[cancelBtn addTarget:self action:@selector(close) forControlEvents:UIControlEventTouchUpInside];
_cancelBtn = cancelBtn;
})];
Show Close 部分
- (void)show{
[[[UIApplication sharedApplication].windows firstObject] addSubview:self];
[[UIApplication sharedApplication].keyWindow addSubview:self];
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.9f initialSpringVelocity:0.7f
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
_coverView.alpha = 1.0;
_contentView.transform = CGAffineTransformMakeTranslation(0, -_contentView.frame.size.height);
} completion:nil];
}
- (void)close{
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.9f initialSpringVelocity:0.7f
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
self.coverView.alpha = 0;
self.contentView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
[self removeFromSuperview];
}];
}
RDPSelectModel
聲明部分
/** titile */
@property (nonatomic,copy,readonly) NSString *title;
/** title 標題顏色 */
@property (nonatomic,strong,readonly) UIColor *titleColor;
/**
定義view model
@param title 標題
@param titleColor 顏色
@return 對象
*/
- (instancetype)initWithTitle:(NSString *)title
titleColor:(UIColor *)titleColor;
/**
定義view model
@param title 標題
@param titleColor 顏色
@return 對象
*/
+ (instancetype)rdpSelectModelWithTitle:(NSString *)title
titleColor:(UIColor *)titleColor;
實現部分
- (instancetype)initWithTitle:(NSString *)title titleColor:(UIColor *)titleColor{
if (self = [super init]){
_title = title;
_titleColor = titleColor ? titleColor : DEFAULT_TITLE_COLOR;
}
return self;
}
+ (instancetype)rdpSelectModelWithTitle:(NSString *)title titleColor:(UIColor *)titleColor{
return [[RDPSelectModel alloc] initWithTitle:title titleColor:titleColor];
}
實現效果
demo1 2.png
結尾
附上Git 鏈接
RDSelectView
