因為項目需求,自定義彈出視圖的基礎上加一些用戶體驗更佳的動畫和友情文字以及圖片提示等,就有了寫了這篇博客,一為方便自己以后在其他項目中復用二為更多開發(fā)者拷貝使用,若有書寫代碼不足之處歡迎批評指正。
先看下我的Demo示例運行效果圖如下:
彈窗動態(tài)效果圖.gif
實現文件只有兩個類:(QDActionSheetView 和 QDActionSheetCell)
1. QDActionSheetView.h頭文件代碼如下:
#import <UIKit/UIKit.h>
@interface QDActionSheetView : UIView
//設置遮罩蒙板響應事件是否關閉
@property (nonatomic, assign) BOOL closeUserInteractionEnabled;
+ (instancetype)alertWithFrame:(CGRect)frame titles:(NSArray *)titles tapBlock:(void (^)(NSInteger index))tapBlock;
- (void)alert;
@end
2. QDActionSheetView.m實現文件代碼如下:
#import "QDActionSheetView.h"
#import "QDActionSheetCell.h"
@interface QDActionSheetView ()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic, weak) UIView *bgView;
@property (nonatomic, weak) UITableView *tableView;
@property (nonatomic, copy) NSArray *titles;
@property (nonatomic, copy) void(^tapBlock)(NSInteger index);
@end
@implementation QDActionSheetView
+ (instancetype)alertWithFrame:(CGRect)frame titles:(NSArray *)titles tapBlock:(void (^)(NSInteger))tapBlock{
QDActionSheetView *sheetView = [[self alloc] initWithFrame:frame];
sheetView.tapBlock = tapBlock;
sheetView.titles = titles;
return sheetView;
}
- (void)alert{
[QDKeyWindow addSubview:self];
}
- (instancetype)initWithFrame:(CGRect)frame{
if (self == [super initWithFrame:frame]) {
[self setUpUI];
}
return self;
}
- (void)setUpUI{
//半透明遮蓋視圖(滿屏)
UIView *bgView = [[UIView alloc] initWithFrame:UIApplication.sharedApplication.keyWindow.bounds];
bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
bgView.alpha = 0;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(bgViewTapped)];
[bgView addGestureRecognizer:tap];
[self addSubview:bgView];
self.bgView = bgView;
//創(chuàng)建tableView
UITableView *tableView = [[UITableView alloc] initWithFrame:self.bounds style:UITableViewStylePlain] ;
tableView.delegate = self;
tableView.dataSource = self;
tableView.scrollEnabled = NO;
tableView.backgroundColor = QDColorTableViewBG;
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
tableView.showsVerticalScrollIndicator = NO;
tableView.showsHorizontalScrollIndicator = NO;
[tableView roundViewWithRadius:5.0f];//切圓角
[self addSubview:tableView];
self.tableView = tableView;
if (UIDevice.currentDevice.systemVersion.doubleValue < 9.0) {
[UIView animateWithDuration:0.2 animations:^{
self.bgView.alpha = 1;
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.7] ;
scaleAnimation.toValue = [NSNumber numberWithFloat:1.0] ;
scaleAnimation.duration = 0.1;
scaleAnimation.autoreverses = NO;
[self.tableView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
}];
}else{
CASpringAnimation *scaleAnimation = [CASpringAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.damping = 5;
scaleAnimation.stiffness = 100;
scaleAnimation.mass = 0.35;
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.7] ;
scaleAnimation.toValue = [NSNumber numberWithFloat:1.0] ;
scaleAnimation.duration = scaleAnimation.settlingDuration;
scaleAnimation.autoreverses = NO;
[self.tableView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
[UIView animateWithDuration:0.2 animations:^{
self.bgView.alpha = 1;
}];
}
}
- (void)layoutSubviews{
[super layoutSubviews];
self.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self).mas_offset(30);
make.right.mas_equalTo(self.mas_right).mas_offset(-30);
make.height.mas_equalTo(230);
make.centerY.mas_equalTo(self);
}];
}
- (void)setTitles:(NSArray *)titles{
_titles = titles;
if (!titles.count) {
_titles = @[
@{@"title":@"尊敬的主人,用得怎么樣?快去為我評個分吧",@"style":@(1)},
@{@"title":@"給個好評",@"style":@(0)},
@{@"title":@"下次再說",@"style":@(0)},
@{@"title":@"我要吐槽",@"style":@(0)}];
}
}
#pragma mark -點擊事件-
- (void)bgViewTapped{
if (!self.closeUserInteractionEnabled) return [self cancleButtonTapped];
}
- (void)cancleButtonTapped{
[UIView animateWithDuration:0.15 animations:^{
self.bgView.alpha = 0;
[self.tableView.layer removeAllAnimations];
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0] ;
scaleAnimation.toValue = [NSNumber numberWithFloat:0.5] ;
scaleAnimation.duration = 0.15;
scaleAnimation.autoreverses = NO;
[self.tableView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
}];
[self performSelector:@selector(removeSelf) withObject:nil afterDelay:0.12];
}
- (void)removeSelf{
[self removeFromSuperview];
}
#pragma mark -UITableViewDelegate/UITableViewDataSource-
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.titles.count;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.row == 0) {
return 80;
}
return 50;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
QDActionSheetCell *cell = [QDActionSheetCell cellWithTableView:tableView];
cell.dict = self.titles[indexPath.row];
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
if (self.tapBlock) {
self.tapBlock(indexPath.row);
}
//除了標題欄,點擊其他位置移除視圖
if (indexPath.row) {
[self cancleButtonTapped];
}
}
@end
3. QDActionSheetCell.h頭文件代碼如下:
#import <UIKit/UIKit.h>
@interface QDActionSheetCell : UITableViewCell
@property (nonatomic, copy) NSDictionary *dict;
+ (instancetype)cellWithTableView:(UITableView *)tableView;
@end
4. QDActionSheetCell.m實現文件代碼如下:
#import "QDActionSheetCell.h"
@interface QDActionSheetCell ()
@property (nonatomic, weak) UILabel *titleL;
@property (nonatomic, weak) UIView *bottomLineV;
@end
@implementation QDActionSheetCell
+ (instancetype)cellWithTableView:(UITableView *)tableView{
id cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass(self)];
if (!cell) {
cell = [[self alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:NSStringFromClass(self)];
}
return cell;
}
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
//添加所有子控件的方法
[self setUpSubviews];
}
return self;
}
//初始化UI
-(void)setUpSubviews{
UILabel *titleL = [[UILabel alloc] init];
titleL.textAlignment = NSTextAlignmentCenter;
titleL.numberOfLines = 2;
titleL.backgroundColor = [UIColor whiteColor];
[self.contentView addSubview:titleL];
self.titleL = titleL;
UIView *bottomLineV = [[UIView alloc] init];
bottomLineV.backgroundColor = QDColorCellLine;
[self.contentView addSubview:bottomLineV];
self.bottomLineV = bottomLineV;
}
- (void)setDict:(NSDictionary *)dict{
_dict = dict;
self.titleL.text = dict[@"title"];
NSNumber *styleNumber = dict[@"style"];
if (styleNumber.boolValue) {
self.titleL.font = QDFont17;
self.titleL.textColor = [UIColor blackColor];
}else{
self.titleL.font = QDFont16;
self.titleL.textColor = QDColorSystemBlue;
}
}
//子控件布局
- (void)layoutSubviews{
[super layoutSubviews];
[self.titleL mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(self.contentView);
make.left.mas_equalTo(self.contentView).mas_offset(20);
make.right.mas_equalTo(self.contentView.mas_right).mas_offset(-20);
}];
[self.bottomLineV mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(0.8);
make.left.mas_equalTo(self.contentView);
make.right.mas_equalTo(self.contentView.mas_right);
make.bottom.mas_equalTo(self.contentView.mas_bottom);
}];
}
@end
5.調用方式:
QDActionSheetView *sheet = [QDActionSheetView alertWithFrame:self.view.window.bounds titles:nil tapBlock:^(NSInteger index) {
DLog(@"index:%ld",index);
}];
[sheet alert];
注意:有的項目中有需求背景遮罩蒙板不讓用戶點擊,只需要創(chuàng)建
QDActionSheetView
對象之后,設置屬性closeUserInteractionEnabled = YES
即可實現。
如果您希望在你的項目中直接使用,那就直接拷貝就行
如果覺得還不夠具體,后期考慮將代碼上傳github與分享源碼,希望深層交流的童鞋加我qq:1107160410,我們一起探討,感謝您看到這里,如方便的話點個贊,我會更加努力。
- 歡迎點擊下篇博客鏈接
http://www.lxweimin.com/p/99984720f555查看更加相關內容,可能會幫到您。