美文网首页
最普通的GuidePageVC(引导页)

最普通的GuidePageVC(引导页)

作者: 羊妞麻麻 | 来源:发表于2018-09-04 12:03 被阅读48次

需求如下:

在程序第一次启动的时候,需要加载4张图片,通过点击(第四张)或者滑动最后一张最终进入到首页的功能。第二次程序再次启动,就不用出现啦,这是最最最普通没有之一的需求啦。

效果图如下:


屏幕快照 2018-09-04 上午11.12.23.png

下面是几种实现方式:

第一种 简单粗暴

通过UIScrollView滑动实现4张图片滚动,同时实现点击效果即可。4张效果图让设计UI提供即可。就连UIPageControl功能都省掉啦。

代码块 .h

typedef void(^SCGuidePageAction)();

@interface SCGuidePageVC : SCBaseViewController

@property (nonatomic, copy) SCGuidePageAction actionBlock;

@end

代码块.m

@interface SCGuidePageVC ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *guideScrollView;
@property (nonatomic, assign) NSInteger currentPageIndex;

@end
-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    self.navigationController.navigationBar.hidden = YES;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self.view addSubview:self.guideScrollView];
    [self loadImageScollView];
}

- (void)loadImageScollView{
    self.guideScrollView.showsHorizontalScrollIndicator = NO;
    self.guideScrollView.showsVerticalScrollIndicator = NO;
    
    for (int i = 0; i < 4; i++) {
        UIImageView* wecomeImgV = [[UIImageView alloc] initWithFrame:CGRectMake(i*kSCREEN_WIDTH, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT)];
        wecomeImgV.image = [UIImage imageNamed:[NSString stringWithFormat:@"guide_p%d",i+1]];
        [self.guideScrollView addSubview:wecomeImgV];
        wecomeImgV.contentMode = UIViewContentModeScaleAspectFit;
        
        if (i == 3) {
            UIButton *btn = (UIButton *)[self.guideScrollView viewWithTag:1001];
            if (!btn) {
                btn = [UIButton buttonWithType:UIButtonTypeCustom];
                [btn setFrame:CGRectMake(i*kSCREEN_WIDTH, kSCREEN_HEIGHT / 2, kSCREEN_WIDTH, kSCREEN_HEIGHT / 2)];
                [btn addTarget:self action:@selector(hideWelcomeClick) forControlEvents:UIControlEventTouchUpInside];
                [btn setTag:1001];
                [self.guideScrollView addSubview:btn];
            }
        }
    }

    [self.guideScrollView setContentSize:CGSizeMake(kSCREEN_WIDTH*4, 0)];
}

值得注意的事情

在第一次加载引导页的是,观察到内存会增加不少.就算自定义的View被移除了,内存也不会降低,但是进一下后台内存就会恢复原始大小.
这是由于ios开发UIImage imageNamed方法的误用导致的.
具体原因可以点进去查看.
简单点说就是imageNamed方法会让图片缓存在内存中,之后进到后台才会清理.

实现scrollViewDelegate

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (void)scrollViewDidScroll:(UIScrollView*)scrollView{
    _currentPageIndex = fabs(scrollView.contentOffset.x) /scrollView.frame.size.width;
}
- (void)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(BOOL)decelerate{
    if (_currentPageIndex == 3){
        if (scrollView.contentOffset.x > 0){
            if (self.actionBlock) {
                self.actionBlock();
            }
        }
    }
}

-(void)hideWelcomeClick{
    if (self.actionBlock) {
        self.actionBlock();
    }
}

懒加载初始化

-(UIScrollView *)guideScrollView{
    if (!_guideScrollView) {
        _guideScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT)];
        [_guideScrollView setBackgroundColor:[UIColor whiteColor]];
        _guideScrollView.delegate = self;
        _guideScrollView.pagingEnabled = YES;
    }
    return _guideScrollView;
}

以上是针对GuidePageVC的代码实现。

那如何实现程序第一次启动有,之后就不用出现的效果呢?很简单,通过NSUserDefaults 来获取是否是第一次Load即可。

代码块

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    [self.window setBackgroundColor:[UIColor whiteColor]];
    [self.window makeKeyAndVisible];
    [self showLaunchView];

    return YES;
}
/**
 * 如果是第一次 则展示引导页 否则进入首页
*/
- (void)showLaunchView{
    if ([self isFirstLoad]) {
         __weak typeof(self)weakSelf = self;
        SCGuidePageVC *guidePage = [[SCGuidePageVC alloc] init];
        guidePage.actionBlock = ^{
            [weakSelf setAppRoot];
        };
        UINavigationController *rootNav = [[UINavigationController alloc] initWithRootViewController:guidePage];
        self.window.rootViewController = rootNav;
    }else{
        [self setAppRoot];
    }
}

是否是第一次加载
宏定义:define LAST_RUN_VERSION_KEY @"last_run_version_of_application"

- (BOOL) isFirstLoad{
    NSString *currentVersion = [[[NSBundle mainBundle] infoDictionary]
                                objectForKey:@"CFBundleShortVersionString"];
    
    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    
    NSString *lastRunVersion = [defaults objectForKey:LAST_RUN_VERSION_KEY];
    
    if (!lastRunVersion) {
        [defaults setObject:currentVersion forKey:LAST_RUN_VERSION_KEY];
        [defaults synchronize];
        return YES;
        // App is being run for first time
    }
    else if (![lastRunVersion isEqualToString:currentVersion]) {
        [defaults setObject:currentVersion forKey:LAST_RUN_VERSION_KEY];
        [defaults synchronize];
        return YES;
        // App has been updated since last run
    }
    return NO;
}

以上就是app加载引导页的全过程。非常简单的方法。

下一章会讲如何用UIPageControl+UIScrollview 实现。

相关文章

  • 最普通的GuidePageVC(引导页)

    需求如下: 在程序第一次启动的时候,需要加载4张图片,通过点击(第四张)或者滑动最后一张最终进入到首页的功能。第二...

  • 6.4 引导页的封装

    引导页的封装1.png 引导页的封装2.png 引导页的封装3.png

  • APP 引导页设计5-总结

    前面4篇分别介绍了引导页的分类、展现方式、优秀引导页的特点、如何设计优秀的引导页,是时候来个总结了。 引导页分类:...

  • 引导页

    // // ViewController.m // 引导页_课堂练习 // // Created by 张羽婷 o...

  • 引导页

    引导页是用户第一次使用app时,引导用户使用的页面,这个界面通常加载到进入界面的上面。我这个引导页是一个View,...

  • 引导页

    AppDelegate.m #import "AppDelegate.h" #import "ViewContro...

  • 引导页

    判断版本号 引导页界面 点击方法

  • 引导页

    引导页 引导页是在程序第一次安装的时候呈现出来的画面. 新建一个.pch.用于做程序中的声明.声明这几个变量 在 ...

  • 引导页

    sharedPreferences = getSharedPreferences("ues", MODE_PRIV...

  • 引导页

    引导页设计 一般不会超过5页。作用:让用户了解产品价值和功能,引导用户更快进入使用环境。 按照功能分类: 1.功能...

网友评论

      本文标题:最普通的GuidePageVC(引导页)

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