服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS App引导页开发教程

iOS App引导页开发教程

2021-02-03 14:38u013147734 IOS

这篇文章主要为大家详细介绍了iOS App引导页开发教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

引导页功能简介

方式一:
判断程序是否首次启动,如果是将guidepageviewcontroller作为窗口的根视图控制器。guidepageviewcontroller有三个子控件:一个uiscrollview、一个uipagecontrol、一个uibutton(默认隐藏),uiscrollview有多个uiimageview子控件,当滚动到最后一页uibutton展示,点击立即体验然后将窗口的根视图控制器设置为uitabbarcontroller;

方式二:
也可以直接将根视图控制器设置为uitabbarcontroller, 然后在第一个导航控制器的视图上展示引导页视图,当点击立即体验再将引导页视图隐藏掉即可。

示例代码

?
1
2
3
4
5
6
7
8
@implementation appdelegate
 
- (bool)application:(uiapplication *)application didfinishlaunchingwithoptions:(nsdictionary *)launchoptions {
 // 首次启动应用程序时进入到引导页页面(暂时没有判断,可通过nsuserdefault实现)
 self.window.rootviewcontroller = [[guidepageviewcontroller alloc] init];
 return yes;
}
@end

引导页视图控制器guidepageviewcontroller

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
#import "guidepageviewcontroller.h"
#import "viewcontroller.h"
 
#define kscreenwidth ([uiscreen mainscreen].bounds.size.width)
#define kscreenheight ([uiscreen mainscreen].bounds.size.height)
#define kguidepagecount 4
 
@interface guidepageviewcontroller () <uiscrollviewdelegate>
@property (weak, nonatomic) uipagecontrol *pagecontrol;
@property (weak, nonatomic) uibutton *startappbutton;
@end
 
@implementation guidepageviewcontroller
 
- (void)viewdidload {
 [super viewdidload];
 
 // uiscrollview
 uiscrollview *guidepagescrollview = [[uiscrollview alloc] initwithframe:cgrectmake(0, 0, kscreenwidth, kscreenheight)];
 guidepagescrollview.contentsize = cgsizemake(kscreenwidth * kguidepagecount, 0);
 guidepagescrollview.showshorizontalscrollindicator = no;
 guidepagescrollview.pagingenabled = yes;
 guidepagescrollview.bounces = no;
 guidepagescrollview.delegate = self;
 for (int i = 0; i < kguidepagecount; i++) {
  uiimageview *guideimageview = [[uiimageview alloc] initwithframe:cgrectmake(kscreenwidth * i, 0, kscreenwidth, kscreenheight)];
  guideimageview.image = [uiimage imagenamed:[nsstring stringwithformat:@"guide-page-%d", i + 1]];
  [guidepagescrollview addsubview:guideimageview];
 }
 [self.view addsubview:guidepagescrollview];
 
 // uipagecontrol(分页)
 uipagecontrol *pagecontrol = [[uipagecontrol alloc] initwithframe:cgrectmake((kscreenwidth - 100) / 2, kscreenheight- 50, 100, 30)];
 pagecontrol.numberofpages = kguidepagecount;
 pagecontrol.currentpage = 0;
 pagecontrol.currentpageindicatortintcolor = [uicolor greencolor];
 [self.view addsubview:pagecontrol];
 self.pagecontrol = pagecontrol;
 
 // uibutton(立即体验)
 uibutton *startappbutton = [uibutton buttonwithtype:uibuttontypecustom];
 startappbutton.frame = cgrectmake((kscreenwidth - 100) / 2, 550, 100, 40);
 [startappbutton settitle:@"立即体验" forstate:uicontrolstatenormal];
 startappbutton.backgroundcolor = [uicolor graycolor];
 [startappbutton addtarget:self action:@selector(startappaction) forcontrolevents:uicontroleventtouchupinside];
 startappbutton.hidden = yes;
 [self.view addsubview:startappbutton];
 _startappbutton = startappbutton;
}
 
- (void)scrollviewdidscroll:(uiscrollview *)scrollview {
 nsinteger currentpage = scrollview.contentoffset.x / kscreenwidth;
 self.pagecontrol.currentpage = currentpage;
 if (currentpage == (kguidepagecount - 1)) {
  self.startappbutton.hidden = no;
 }
}
 
- (void)startappaction {
 // 根视图控制器一般是uitabbarcontroller,这里简单实现
 [uiapplication sharedapplication].keywindow.rootviewcontroller = [[viewcontroller alloc] init];
}
@end

上述代码中的图片名称是写死在guidepageviewcontroller中的,根视图控制器也是写死的,如果其他app想要复用该功能,就要进入该代码修改这两哥地方,为了不修改一行代码就可以使用该功能,可以将这两个参数提取出来,初始化该控制器时作为参数传递

封装示例代码

初始化时以参数的形式将图片和根视图控制器传递给引导页视图控制器

?
1
2
3
4
5
6
7
@implementation appdelegate
- (bool)application:(uiapplication *)application didfinishlaunchingwithoptions:(nsdictionary *)launchoptions {
 viewcontroller *viewcontroller = [[viewcontroller alloc] init];
 self.window.rootviewcontroller = [[guidepageviewcontroller alloc] initwithimages:@[@"guide-page-1", @"guide-page-2", @"guide-page-3", @"guide-page-4"] rootviewcontroller:viewcontroller];
 return yes;
}
@end
?
1
2
3
4
5
6
#import <uikit/uikit.h>
@interface guidepageviewcontroller : uiviewcontroller
 
- (instancetype)initwithimages:(nsarray *)images rootviewcontroller:(uiviewcontroller *)rootviewcontroller;
 
@end

在初始化方法中将引导页图片和根视图控制器保存起来,使用self.images.count获取引导页数量,引导页图片直接从images数组中获取

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
#import "guidepageviewcontroller.h"
#import "viewcontroller.h"
 
#define kscreenwidth ([uiscreen mainscreen].bounds.size.width)
#define kscreenheight ([uiscreen mainscreen].bounds.size.height)
 
@interface guidepageviewcontroller () <uiscrollviewdelegate>
@property (weak, nonatomic) uipagecontrol *pagecontrol;
@property (weak, nonatomic) uibutton *startappbutton;
 
@property (strong, nonatomic) nsarray *images;
@property (strong, nonatomic) uiviewcontroller *rootviewcontroller;
@end
 
@implementation guidepageviewcontroller
 
- (instancetype)initwithimages:(nsarray *)images rootviewcontroller:(uiviewcontroller *)rootviewcontroller {
 if (self = [super init]) {
  _images = images;
  _rootviewcontroller = rootviewcontroller;
 }
 
 return self;
}
 
- (void)viewdidload {
 [super viewdidload];
 
 // uiscrollview
 uiscrollview *guidepagescrollview = [[uiscrollview alloc] initwithframe:cgrectmake(0, 0, kscreenwidth, kscreenheight)];
 guidepagescrollview.contentsize = cgsizemake(kscreenwidth * self.images.count, 0);
 guidepagescrollview.showshorizontalscrollindicator = no;
 guidepagescrollview.pagingenabled = yes;
 guidepagescrollview.bounces = no;
 guidepagescrollview.delegate = self;
 for (int i = 0; i < self.images.count; i++) {
  uiimageview *guideimageview = [[uiimageview alloc] initwithframe:cgrectmake(kscreenwidth * i, 0, kscreenwidth, kscreenheight)];
  guideimageview.image = [uiimage imagenamed:self.images[i]];
  [guidepagescrollview addsubview:guideimageview];
 }
 [self.view addsubview:guidepagescrollview];
 
 // uipagecontrol
 uipagecontrol *pagecontrol = [[uipagecontrol alloc] initwithframe:cgrectmake((kscreenwidth - 100) / 2, kscreenheight- 50, 100, 30)];
 pagecontrol.numberofpages = self.images.count;
 pagecontrol.currentpage = 0;
 pagecontrol.currentpageindicatortintcolor = [uicolor greencolor];
 [self.view addsubview:pagecontrol];
 self.pagecontrol = pagecontrol;
 
 uibutton *startappbutton = [uibutton buttonwithtype:uibuttontypecustom];
 startappbutton.frame = cgrectmake((kscreenwidth - 100) / 2, 550, 100, 40);
 [startappbutton settitle:@"立即体验" forstate:uicontrolstatenormal];
 startappbutton.backgroundcolor = [uicolor graycolor];
 [startappbutton addtarget:self action:@selector(startappaction) forcontrolevents:uicontroleventtouchupinside];
 startappbutton.hidden = yes;
 [self.view addsubview:startappbutton];
 _startappbutton = startappbutton;
}
 
- (void)scrollviewdidscroll:(uiscrollview *)scrollview {
 nsinteger currentpage = scrollview.contentoffset.x / kscreenwidth;
 self.pagecontrol.currentpage = currentpage;
 if (currentpage == (self.images.count - 1)) {
  self.startappbutton.hidden = no;
 }
}
 
 
- (void)startappaction {
 [uiapplication sharedapplication].keywindow.rootviewcontroller = self.rootviewcontroller;
}
@end

终极解决方案

直接使用github上的开源功能即可github引导页

1、创建出所有引导页eaintropage
2、创建引导页视图eaintroview 并设置代理
3、显示引导页视图

创建出所有引导页eaintropage

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// basic: 标题和描述
eaintropage *page1 = [eaintropage page];
page1.title = @"hello world";
page1.desc = sampledescription1;
 
// custom
eaintropage *page2 = [eaintropage page];
page2.title = @"this is page 2";
page2.titlefont = [uifont fontwithname:@"georgia-bolditalic" size:20];
page2.titlepositiony = 220;
page2.desc = sampledescription2;
page2.descfont = [uifont fontwithname:@"georgia-italic" size:18];
page2.descpositiony = 200;
page2.titleiconview = [[uiimageview alloc] initwithimage:[uiimage imagenamed:@"title2"]];
page2.titleiconpositiony = 100;
 
// custom view from nib
eaintropage *page3 = [eaintropage pagewithcustomviewfromnibnamed:@"intropage"];
page3.bgimage = [uiimage imagenamed:@"bg2"];

创建引导页视图eaintroview 并设置代理
eaintroview *intro = [[eaintroview alloc] initwithframe:self.view.bounds andpages:@[page1,page2,page3,page4]];
intro.delegate=self;

显示引导页视图
[intro showinview:self.view animateduration:0.0];

iOS App引导页开发教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

延伸 · 阅读

精彩推荐
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17