优美整洁的引导页大神框架Onboard

<code>Onboard</code>是现在github最火的引导页框架，star已经近5k，我觉得这框架挺有意思。

导语

<code>Onboard:</code>一个只用几行代码就可轻松创建 它是一个美丽的和迷人的iOS框架。

![pic1]

pic2

使用

1、可以用CocoaPods 下载 <code>pod 'Onboard'</code> 2、可以直接下载pro，然后拖进项目使用

每个onboarding实例包含两个主要组件 - 背景页和内容页。背景包括静态背景图像/视频，页面控制和跳过按钮。内容页面由四个部分组成，一个图像/图标，标题，正文和操作按钮。

通过创建<code>OnboardingContentViewController</code>的实例创建单个页面，为操作按钮提供标题，正文，图像，文本，以及在用户按下按钮时您想要执行的操作。如果你不想要一个按钮，你可以让按钮文本<code>buttonText</code>和处理程序为<code>nil</code>。

Objective-C

<pre>OnboardingContentViewController *firstPage = [OnboardingContentViewController contentWithTitle:@"Page Title" body:@"Page body goes here." image:[UIImage imageNamed:@"icon"] buttonText:@"Text For Button" action:^{ // do something here when users press the button, like ask for location services permissions, register for push notifications, connect to social media, or finish the onboarding process }];</pre>

Swift

<pre>let firstPage = OnboardingContentViewController(title: "Page Title", body: "Page body goes here.", image: UIImage(named: "icon"), buttonText: "Text For Button") { () -> Void in // do something here when users press the button, like ask for location services permissions, register for push notifications, connect to social media, or finish the onboarding process }</pre>

然后通过为项目中的本地视频文件提供背景图像或URL创建<code>OnboardingViewController</code>，以及已经创建的视图控制器数组（content view controllers）来创建。然后，您可以模态显示视图(present)

Objective-C

<pre>// Image OnboardingViewController *onboardingVC = [OnboardingViewController onboardWithBackgroundImage:[UIImage imageNamed:@"background"] contents:@[firstPage, secondPage, thirdPage]];

// Video NSBundle *bundle = [NSBundle mainBundle]; NSString *moviePath = [bundle pathForResource:@"yourVid" ofType:@"mp4"]; NSURL *movieURL = [NSURL fileURLWithPath:moviePath];

OnboardingViewController *onboardingVC = [OnboardingViewController onboardWithBackgroundVideoURL:movieURL contents:@[firstPage, secondPage, thirdPage]];</pre>

Swift

<pre>// Image let onboardingVC = OnboardingViewController(backgroundImage: UIImage(named: "background"), contents: [firstPage, secondPage, thirdPage])

// Video let bundle = NSBundle.mainBundle() let moviePath = bundle.pathForResource("yourVid", ofType: "mp4") let movieURL = NSURL(fileURLWithPath: moviePath!)

let onboardingVC = OnboardingViewController(backgroundVideoURL: movieUrl, contents: [firstPage, secondPage, thirdPage])</pre>

自定义

<code>iconImageView，titleLabel，bodyLabel</code>，和<code>actionButton</code>属性的字体，尺寸可自定义,而 pages引导页中各个组件之间的间距也是可以自定义

自定义

模糊(Blurring)，掩蔽(Masking)和淡入淡出(Fading)

默认情况下，您用于背景的图像将在其上应用蒙版，使其变暗一点。这是添加一点点对比度，所以文本可以更容易看到。如果您的图片已经编辑或看起来很好，可以很容易地禁用此功能： <pre>onboardingVC.shouldMaskBackground = NO; // defaults to YES</pre> 也可以加模糊效果到图片上 <pre>onboardingVC.shouldBlurBackground = YES; // defaults to NO</pre> 在页面之间转换时，对图标，文本和按钮应用淡入淡出效果。当您滚动时，内容淡出，下一页的内容在向内滚动时淡入。 <pre>onboardingVC.shouldFadeTransitions = YES ; //默认为NO</pre> 注意：确保在设置这些属性之前不会导致onboard 视图控制器的视图被加载，因为这些值仅在viewDidLoad调用视图控制器时生效，因此在设置此值之前进行类似<code>onboardingVC.view.backgroundColor = [UIColor whiteColor];</code>的设置操作将导致设置这些不生效。

您可以通过几种不同的组合调整这些设置，以获得所需的效果：

dark.png

darkblur.png

lightblur.png

normal.png

自动导航

如果你想，当他们按<code>action button</code>就自动移动到下一个页面中，可在任何<code>OnboardingContentViewController</code>非引导页的最后一个视图控制器简单设置<code>movesToNextViewController</code>属性为<code>YES</code>。另外，你可以禁用通过设置swipe，swipingEnabled属性设置为NO。如果您愿意，这允许您更好地控制引导页过程。最后，如果你的设计适合没有页面控件，或者它只有一个页面，你可以设置<code>hidePageControl</code>属性为YES和页面控制点(page control dots)不出现。 <pre>contentVC.movesToNextViewController = YES ; onboardingVC.swipingEnabled = NO ; onboardingVC.hidePageControl = YES ;</pre>

Skipping

如果您想跳过(skip)引导页,就要使skipping button可以点击和点击后block产生效果 <pre>onboardingVC.allowSkipping = YES; onboardingVC.skipHandler = ^{ // Dismiss, fade out, etc... };</pre>

Blocks

在某些情况下，您可能希望在引导页面( content pages)即将出现时以及出现时执行某些操作。在这种情况下，您可以在任何内容页面上设置<code>viewWillAppearBlock</code>和<code>viewDidAppearBlock</code>属性来处理任何您想要的内容。 <pre>contentVC.viewWillAppearBlock = ^{ // do something when the view will appear here… } contentVC.viewDidAppearBlock = ^{ // do something when the view appears here… }</pre>

注意：暂时只支持竖屏