iOS 第一次启动,动态引导页面的思路及代码
最近越来越多的APP,已经抛弃掉第一次进入的3-4页的导入页面(我自己就从来没有看过导入页面),而是另外采取了在功能页面悬浮一个动态效果来展示相应的功能点,或使用教程。 这样处理以后简单直观,比原来的导入页面效果应该好很多,至少知道主要功能点该点击哪里,而不是胡乱去试探,或者使用很长时间后还不知道APP的主要功能点。
打算引入目前的项目中,下面是实现的思路:
- 每个需要介绍的页面,设置一个值记录该页面是否已经显示过,
- 如果没有显示过就显示,并把该值设置保存为NO,
- 如果已经显示过了就不显示,
- 第一次安装先创建,并设置各个页面为显示
- 后续更新版本后,更新存储的值为需要显示。
- 简单的方式用UIImageView来实现,如果一个页面有几屏需要呈现,就弄几个图片,展现一个,点击后移除一个,再添加一个。
- 如果需要实现动画,则用UIView来处理,动态移入,动态移除。
UIView动态展示及移除的代码(是否第一次启动,网络上很多自己搜搜就好了):
这个是从目前项目中截取出来的.m 文件,动态展示2个页面,第一个页面介绍“答题”,第二个页面介绍“培训反馈”,
#import "ELDynamicController.h"
#import "ELAppDelegate.h"
@interface ELDynamicController ()
@property (strong,nonatomic)UIView *bgView;
@property (strong, nonatomic) UIButton *answerButton;
@property (strong, nonatomic) UIButton *examButton;
@property (strong, nonatomic) UILabel *answerLable;
@property (strong, nonatomic) UILabel *examLabel;
@end
@implementation ELDynamicController
- (void)viewDidLoad {
[super viewDidLoad];
//黑色背景
UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 568)];
bgView.backgroundColor = [UIColor blackColor];
bgView.alpha = 0.5;
self.bgView = bgView;
// 覆盖整个页面
[[ELAppDelegate shareAppDelegate].window addSubview:bgView];
//第一个页面
// 图标按钮-答题
UIButton *answerButton = [[UIButton alloc]init];
[answerButton setBackgroundImage:[UIImage imageNamed:@"dati.png"] forState:UIControlStateNormal];
[answerButton setBackgroundColor:[UIColor whiteColor]];
answerButton.frame = CGRectMake(30, 100, 50, 50);
answerButton.tag = 1;
[answerButton addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];
self.answerButton = answerButton;
[bgView addSubview:self.answerButton];
// 提示的文字
self.answerLable = [self labelWithText:@"点击进入考试页面,进行答题" font:[UIFont systemFontOfSize:18.0f] color:[UIColor redColor] origin:CGPointMake(30, 160)];
[bgView addSubview:self.answerLable];
//第二个页面的 反馈
UIButton *examButton = [[UIButton alloc]init];
[examButton setBackgroundImage:[UIImage imageNamed:@"feedback"] forState:UIControlStateNormal];
examButton.frame = CGRectMake(100, 100, 50, 50);
[examButton setBackgroundColor:[UIColor whiteColor]];
examButton.tag = 2;
[examButton addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];
examButton.hidden = YES;
self.examButton = examButton;
[bgView addSubview:self.examButton];
// 反馈文字
self.examLabel = [self labelWithText:@"点击进入反馈页面,进行培训反馈" font:[UIFont systemFontOfSize:18.0f] color:[UIColor whiteColor] origin:CGPointMake(0, 160)];
self.examLabel.hidden = YES;
[bgView addSubview:self.examLabel];
// 从外面进来,动画移动效果
self.answerButton.transform = CGAffineTransformMakeTranslation(-200, 0);
self.answerLable.transform = CGAffineTransformMakeTranslation(400, 0);
[UIView animateWithDuration:0.7
animations:^{
self.answerButton.transform = CGAffineTransformMakeTranslation(0, 0);
self.answerLable.transform = CGAffineTransformMakeTranslation(0, 0);
}];
}
# pragma mark 生成Label
/*
* 生成Label
*/
- (UILabel *)labelWithText:(NSString *)text font:(UIFont *)font color:(UIColor *)color origin:(CGPoint)origin
{
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(origin.x, origin.y, 1000, 20)];
label.text = text;
label.font = font;
label.textColor = color;
[label sizeToFit];
return label;
}
# pragma mark 按钮点击
/*
* 按钮点击
*/
-(void)click:(UIButton *)button
{
// 答题按钮点击
if (button.tag == 1) {
// 第二个页面的东西取消隐藏
self.examButton.transform = CGAffineTransformMakeTranslation(300, 300);
self.examLabel.transform = CGAffineTransformMakeTranslation(100, 600);
self.examLabel.hidden = NO;
self.examButton.hidden = NO;
[UIView animateWithDuration:0.7 animations:^{
// 移动出去第一屏
self.answerLable.transform = CGAffineTransformMakeTranslation(-300, -300);
self.answerButton.transform = CGAffineTransformMakeTranslation(-300, 700);
// 移入第二屏
self.examButton.transform = CGAffineTransformMakeTranslation(0, 0);
self.examLabel.transform = CGAffineTransformMakeTranslation(0, 0);
} completion:^(BOOL finished) {
// 移出以后隐藏
self.answerButton.hidden = YES;
self.answerLable.hidden = YES;
}];
// 反馈按钮点击
}else{
[UIView animateWithDuration:0.7 animations:^{
self.examButton.transform = CGAffineTransformMakeTranslation(300, 0);
self.examLabel.transform = CGAffineTransformMakeTranslation(-300, 0);
} completion:^(BOOL finished) {
// 隐藏
self.examLabel.hidden = YES;
self.examButton.hidden = YES;
//移除整个背景
[self.bgView removeFromSuperview];
}];
}
}