项目需求
最近需要修改登录注册模块，本来还以为只有登录注册，没想到还把各个界面的提示语也改了，MBProgressHUD只好被我暂时冷藏了😹😹。
WX20171115-144109.png
大眼一看好像在哪见过，没错就是淘宝的。难怪我那一做海淘app的朋友说：“基本所有的电商类app改来改去不是想淘宝，就是像京东”。
功能分析
先把功能拆分一下其实主要可以分为三个部分：
- 根据文字自动适应提示框宽度。
- 提示框下落回弹效果。
- 提示框背景渐变色。
第一部分很好实现可以根据sizeThatFits方法获取，具体方法我会在下面贴出代码。
第二部分如果动画用的很溜的话，可以自己写，如果不是很熟的话可以POP动画，回弹效果也很不错。
第三部渐变色的处理可以用系统提供的CAGradientLayer就可以完成。具体可看代码。
功能实现
//.h部分
+ (instancetype)showTopTipContent:(NSString *)content;
//.m部分
#import "MGTopTipView.h"
#import "UIView+Extension.h"
#import <pop/POP.h>
#define MGSCREENWIDTH [UIScreen mainScreen].bounds.size.width
@interface MGTopTipView ()
@property (nonatomic, strong) UILabel *contentLbl;//提示语内容
@property (nonatomic, strong) MGTopTipView *topTipHUD;
@property (nonatomic, assign)CGSize viewSize;//提示语所占的大小
@end
NSString *_contents;//传过来的提示语
@implementation MGTopTipView
static NSMutableDictionary *_tempDict;//储存单个对象，防止重复创建
+ (void)initialize
{
_tempDict = [NSMutableDictionary dictionary];
}
+ (instancetype)showTopTipContent:(NSString *)content {
view = [UIApplication sharedApplication].keyWindow;
_contents = content;//将提示字段赋值给_contents
MGTopTipView *topTipHUD = _tempDict[@"TipView"];
if (topTipHUD == nil)
{
MGTopTipView *topTipHUD = [MGTopTipView showHUDAddedTo:view ];
_tempDict[@"TipView"] = topTipHUD;
return topTipHUD;
}
return topTipHUD;
}
//动画处理
+ (instancetype)showHUDAddedTo:(UIView *)view
{
MGTopTipView *topTipHUD = [[self alloc] init];
[view addSubview:topTipHUD];
//0.7秒触发
[UIView animateWithDuration:0.7f animations:^{
POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
anSpring.fromValue = @(self.centerY);
anSpring.toValue = @(self.center.y+160);
anSpring.beginTime = CACurrentMediaTime() + 0.5f;
anSpring.springBounciness = 10.0f;
[self pop_addAnimation:anSpring forKey:@"position"];
} completion:^(BOOL finished) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[UIView animateWithDuration:0.7f animations:^{
//动画回收
POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
anSpring.fromValue = @(self.centerY);
anSpring.toValue = @(self.center.y - 160);
anSpring.beginTime = CACurrentMediaTime() + 1.0f;
anSpring.springBounciness = 10.0f;
[self pop_addAnimation:anSpring forKey:@"position"];
} completion:^(BOOL finished) {
[self removeFromSuperview];
[_tempDict removeAllObjects];
}];
});
}];
return topTipHUD;
}
//类的init方法
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self setupSubviews];
}
return self;
}
- (void)setupSubviews
{
//计算出提示框宽度
_viewSize = [self.contentLbl sizeThatFits:CGSizeMake(self.contentLbl.frame.size.width, MAXFLOAT)];
CGFloat width = MGSCREENWIDTH - 100;
//防止提示框超出屏幕
if (_viewSize.width > width) {
_viewSize.width = width;
}
self.size = CGSizeMake(_viewSize.width+ 20, 30);
self.origin = CGPointMake((MGSCREENWIDTH - _viewSize.width - 20) / 2, - 64 - _viewSize.height - 5);
//提示框圆角
self.layer.cornerRadius = 12;
self.contentLbl.frame = CGRectMake(10, 7, self.bounds.size.width - 7, 17);
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.bounds = self.frame;
//渐变色处理
gradientLayer.colors = @[(id)[UIColor colorWithHexColorString:@"#FE7425"].CGColor, (id)[UIColor colorWithHexColorString:@"#FFAC4C"].CGColor];
gradientLayer.cornerRadius = 15;
gradientLayer.locations = @[@0.5, @1];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1.0, 0);
//提示框四周阴影
gradientLayer.shadowColor = [UIColor colorWithHexColorString:@"#FE7425"].CGColor;
gradientLayer.shadowOffset = CGSizeMake(0, 0);
gradientLayer.shadowOpacity = 0.2;
gradientLayer.frame = self.bounds;
[self.layer addSublayer:gradientLayer];
[self addSubview:self.contentLbl];
}
//提示框label属性设置
- (UILabel *)contentLbl
{
if (!_contentLbl) {
_contentLbl = [[UILabel alloc] init];
_contentLbl.font = [UIFont systemFontOfSize:12];
_contentLbl.textAlignment = NSTextAlignmentLeft;
_contentLbl.numberOfLines = 1;
_contentLbl.text = _contents;
_contentLbl.textColor = [UIColor whiteColor];
}
return _contentLbl;
}
2017-11-15 16_14_26.gif
是不是很像？当然我写的只是将提示语放到了keyWindow上面，可以扩展加入指定View，定时显示，定时消失，修改颜色等等。落幕动画提示语，里面的落幕动画原理与这里是一样的，这次就不写代码了。
参考文档
(http://www.jianshu.com/p/3e0e25fd9b85)
(http://blog.csdn.net/u010745324/article/details/53431761)
还有一个落幕提示语找不到作者了😂😂
