美文网首页
新浪微博的消息提醒控件开发思路

新浪微博的消息提醒控件开发思路

作者: 石玉龙 | 来源:发表于2017-03-13 14:18 被阅读19次

1. iOS7之后所有的控制器的view都是370*480(点坐标系)的,导航栏高度是64点。

2. 导航栏盖在tableview控制器上,消息提醒控件从导航栏后从上慢慢往下移动,全部出现之后停留1秒,然后继续慢慢往上移动完全消失为止(1个提醒控件的高度值)。

3. 消息控件是半透明的,所以组成内容是背景显示图片和label构成,文字是不透明的。

4. 图片变成颜色的方法,适合平铺的场合,方法是 colorWithPatternImage: 

5. 开发使用轻量级的控件较好。

6. 添加tableview上是错误的,会跟着走,放在window上也是不对,添加到导航控制器上是对的。[self.navigationController.view addSubview:label];

7. [self.navigationController.view insertSubview:label belowSubview:self.navigationController.navigationBar]; // 盖在导航栏下边

8. 动画,y值 += h高度。

9. UIViewAnimationOptionCurveLinear (线性)匀速动画,EaseIn 慢慢进入,EaseOut 慢慢退出, EaseInOut 开头和结尾动画比较慢,其他时间快。

10. label.transform = CGAffineTransformMakeTranslation(0, label.height); //往下走一个高度, 往上走就清空就可以:label.transform = CGAffineTransformIdentity; //回来原来的样子,很简单的一句代码。

开发代码:

/**

*  显示最新微博的数量

*

*  @param count 最新微博的数量

*/

- (void)showNewStatusCount:(int)count

{

// 1.创建label

UILabel *label = [[UILabel alloc] init];

label.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"timeline_new_status_background"]];

label.width = [UIScreen mainScreen].bounds.size.width;

label.height = 35;

// 2.设置其他属性

if (count == 0) {

label.text = @"没有新的微博数据,稍后再试";

} else {

label.text = [NSString stringWithFormat:@"共有%d条新的微博数据", count];

}

label.textColor = [UIColor whiteColor];

label.textAlignment = NSTextAlignmentCenter;

label.font = [UIFont systemFontOfSize:16];

// 3.添加

label.y = 64 - label.height;

// 将label添加到导航控制器的view中,并且是盖在导航栏下边

[self.navigationController.view insertSubview:label belowSubview:self.navigationController.navigationBar];

// 4.动画

// 先利用1s的时间,让label往下移动一段距离

CGFloat duration = 1.0; // 动画的时间

[UIView animateWithDuration:duration animations:^{

//        label.y += label.height;

label.transform = CGAffineTransformMakeTranslation(0, label.height);

} completion:^(BOOL finished) {

// 延迟1s后,再利用1s的时间,让label往上移动一段距离(回到一开始的状态)

CGFloat delay = 1.0; // 延迟1s

// UIViewAnimationOptionCurveLinear:匀速

[UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveLinear animations:^{

//            label.y -= label.height;

label.transform = CGAffineTransformIdentity;

} completion:^(BOOL finished) {

[label removeFromSuperview];

}];

}];

// 如果某个动画执行完毕后,又要回到动画执行前的状态,建议使用transform来做动画

}

相关文章

网友评论

      本文标题:新浪微博的消息提醒控件开发思路

      本文链接:https://www.haomeiwen.com/subject/nqvmgttx.html