神刀安全网

iOS黑科技【动画特效篇-5】 两句代码DIY弹窗–XMActionSheet


iOS黑科技【动画特效篇】第五期

本期的控件也是实用性非常高的一款弹窗控件,系统虽然本身自带了一个UIAlertController,但是效果一般,每次集成需要写很长一段,影响了代码的整洁和美观,于是我们自己动手做一个。


先看看效果吧

iOS黑科技【动画特效篇-5】 两句代码DIY弹窗--XMActionSheet

XMActionSheetpic.png

iOS黑科技【动画特效篇-5】 两句代码DIY弹窗--XMActionSheet

XMActionSheet.gif

免费赠送git地址:
https://github.com/XMDashen/XMActionSheet.git


使用介绍:

懒人集成方法,核心代码只需两句,第一步创建,第二步展示,简洁美观大方

系统风格弹窗弹窗
NSArray *titleArray=@[@"支付宝",@"微信",@"花呗"];     XMActionSheet *sysSheet=[[XMActionSheet alloc] initWithTitles:titleArray WithActionBlock:^(NSInteger selectIndex) {          if (selectIndex==0) {             NSLog(@"支付宝");         }         if (selectIndex==1) {             NSLog(@"微信");         }         if (selectIndex==2) {             NSLog(@"花呗");         }     }];     [sysSheet showSheetOnWindow];
自定义风格弹窗
XMActionSheet *sheet=[[XMActionSheet alloc] initWithTitles:@[@"支付宝",@"微信",@"花呗"] LeftImagesNameArray:@[@"ic_alipay@2x",@"ic_wx@2x",@"ic_charge@2x"] sheetDescription:@"选择支付方式" WithActionBlock:^(NSInteger selectIndex) {          if (selectIndex==0) {             NSLog(@"支付宝");         }         if (selectIndex==1) {             NSLog(@"微信");         }         if (selectIndex==2) {             NSLog(@"花呗");         }     }];     [sheet showSheetOnWindow];
需要更多自定义请给这些属性赋值
/*sheet选项标题*/ @property (nonatomic,strong) NSArray *titlesArray;  /*sheet选项图标*/ @property (nonatomic,strong) NSArray<NSString *> *imagesArray;  /*是否显示右侧箭头*/ @property (nonatomic,assign) BOOL isShowArrow;  /*sheet顶部描述*/ @property (nonatomic,strong) NSString *sheetDesciption;  /*sheet风格*/ @property (nonatomic,assign) XMSheetStyle sheetStyle;  /*取消按钮颜色*/ @property (nonatomic,strong) UIColor *cancelBtnColor;  /*sheet选项标题颜色*/ @property (nonatomic,strong) NSArray<UIColor *> *titlesColorArray;

原理解析:

实现原理很简单:背景层+tableView表单层+逻辑+动画过度
代码也不复杂,处理好细节就可以了

系统简单动画过度效果就不错了

[UIView animateWithDuration:0.2 animations:^{          self.shelterView.alpha=0.5;         self.tableView.frame=CGRectMake(tableViewX, tableViewY, tableViewW, tableViewH);      } completion:^(BOOL finished) {      }];

可用贝塞尔曲线切割指定圆角

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:cellBounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(8, 8)];                  CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];                  maskLayer.frame = cellBounds;                  maskLayer.path = maskPath.CGPath;                  cell.layer.mask = maskLayer;

这一期就到这里了,亲们有什么意见和问题记得及时反馈哦,喜欢的话点个关注给个赞就可以了,千万不要打赏哦(づ ̄3 ̄)づ╭❤~
我们下期再会

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS黑科技【动画特效篇-5】 两句代码DIY弹窗–XMActionSheet

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址