系统: Mac OS 10.14.6， XCode 11，swift 5.0, iOS 13
写作时间：2019-11-04

说明

欢迎界面，英文成为OnBoarding页面用UIScrollView 和 UIPageControl控件实现。欢迎页面效果如下：

代码实现

创建工程
添加ScrollView
添加PageControl
关联UI和属性
创建一个自定义View
Choose File ->New ->File (或者快捷键 Command-N).
创建Slide的XIB
设计Slide.xib
选择xib的Class为Slide

添加UIImageView , title label, description label
关联UIImageView, title label, description label 到代码Slide.swift
实现scrollview，在类ViewController.swift

func createSlides() -> [Slide] {let imageNames = ["ic_onboarding_1", "ic_onboarding_2", "ic_onboarding_3", "ic_onboarding_4", "ic_onboarding_5"]let titles = ["A real-life bear", "A real-life bear", "A real-life bear", "A real-life bear", "A real-life bear"]let descriptions = ["Did you know that Winnie the chubby little cubby was based on a real, young bear in London", "Did you know that Winnie the chubby little cubby was based on a real, young bear in London", "Did you know that Winnie the chubby little cubby was based on a real, young bear in London", "Did you know that Winnie the chubby little cubby was based on a real, young bear in London", "Did you know that Winnie the chubby little cubby was based on a real, young bear in London"]let nibName = "Slide"var slides: [Slide] = []for i in 0...4 {let slide:Slide = Bundle.main.loadNibNamed(nibName, owner: self, options: nil)?.first as! Slideslide.imageView.image = UIImage(named: imageNames[i])slide.labelTitle.text = titles[i]slide.labelDesc.text = descriptions[i]slide.labelDesc.sizeToFit()slides.append(slide)}return slides}

添加5个slide到scrollview

func setupSlideScrollView(slides: [Slide]) {let rect = view.safeAreaLayoutGuide.layoutFramescrollView.frame = rectscrollView.contentSize = CGSize(width: rect.width * CGFloat(slides.count), height: rect.height)scrollView.isPagingEnabled = truefor i in 0 ..< slides.count {slides[i].frame = CGRect(x: rect.width * CGFloat(i), y: 0, width: rect.width, height: rect.height)scrollView.addSubview(slides[i])}}

因为笔者支持的系统版本为iOS 13，要用到safeAreaLayoutGuide, 所以UI的初始化放到方法viewDidLayoutSubviews()

 var slides:[Slide] = []override func viewDidLayoutSubviews() {slides = createSlides()setupSlideScrollView(slides: slides)pageControl.numberOfPages = slides.countpageControl.currentPage = 0view.bringSubviewToFront(pageControl)}

设置scrollview的delegate

override代理方法scrollViewDidScroll, 笔者重构了重复的代码，要想容易理解逻辑，请看注释掉的代码。

func scrollViewDidScroll(_ scrollView: UIScrollView) {let pageIndex = round(scrollView.contentOffset.x/view.frame.width)pageControl.currentPage = Int(pageIndex)let maximumHorizontalOffset: CGFloat = scrollView.contentSize.width - scrollView.frame.widthlet currentHorizontalOffset: CGFloat = scrollView.contentOffset.x// verticallet maximumVerticalOffset: CGFloat = scrollView.contentSize.height - scrollView.frame.heightlet currentVerticalOffset: CGFloat = scrollView.contentOffset.ylet percentageHorizontalOffset: CGFloat = currentHorizontalOffset / maximumHorizontalOffsetlet percentageVertiacalOffset: CGFloat = (maximumVerticalOffset == 0) ? 1 : currentVerticalOffset/maximumVerticalOffset// below code changes the background color of view on paging the scrollview
//        self.scrollView(scrollView, didScrollToPercentageOffset: percentageHorizontalOffset)// below code scales the imageView on paging the scrollViewlet percentOffset: CGPoint = CGPoint(x: percentageHorizontalOffset, y: percentageVertiacalOffset)let unit: CGFloat = 0.25for i in 0...3 {let gap = unit * CGFloat(i)if percentOffset.x > (0 + gap)  && percentOffset.x <= (0.25 + gap) {slides[i].imageView.transform = CGAffineTransform(scaleX: ((0.25 + gap)-percentOffset.x)/0.25, y: ((0.25 + gap)-percentOffset.x)/0.25)slides[i+1].imageView.transform = CGAffineTransform(scaleX: percentOffset.x/(0.25 + gap), y: percentOffset.x/(0.25 + gap))break}}//        if(percentOffset.x > 0 && percentOffset.x <= 0.25) {//
//            slides[0].imageView.transform = CGAffineTransform(scaleX: (0.25-percentOffset.x)/0.25, y: (0.25-percentOffset.x)/0.25)
//            slides[1].imageView.transform = CGAffineTransform(scaleX: percentOffset.x/0.25, y: percentOffset.x/0.25)
//
//        } else if(percentOffset.x > 0.25 && percentOffset.x <= 0.50) {//            slides[1].imageView.transform = CGAffineTransform(scaleX: (0.50-percentOffset.x)/0.25, y: (0.50-percentOffset.x)/0.25)
//            slides[2].imageView.transform = CGAffineTransform(scaleX: percentOffset.x/0.50, y: percentOffset.x/0.50)
//
//        } else if(percentOffset.x > 0.50 && percentOffset.x <= 0.75) {//            slides[2].imageView.transform = CGAffineTransform(scaleX: (0.75-percentOffset.x)/0.25, y: (0.75-percentOffset.x)/0.25)
//            slides[3].imageView.transform = CGAffineTransform(scaleX: percentOffset.x/0.75, y: percentOffset.x/0.75)
//
//        } else if(percentOffset.x > 0.75 && percentOffset.x <= 1) {//            slides[3].imageView.transform = CGAffineTransform(scaleX: (1-percentOffset.x)/0.25, y: (1-percentOffset.x)/0.25)
//            slides[4].imageView.transform = CGAffineTransform(scaleX: percentOffset.x, y: percentOffset.x)
//        }}

代码运行

代码下载

https://github.com/zgpeace/OnboardingSBDemo.git

参考

snapkit实现请参考：https://blog.csdn.net/zgpeace/article/details/102910404

https://medium.com/@anitaa_1990/create-a-horizontal-paging-uiscrollview-with-uipagecontrol-swift-4-xcode-9-a3dddc845e92

引导页onboarding页面XIB实现相关推荐

引导页+抽屉+页面切换+频道+Tablayout+上下拉刷新多条目AsynTask
引导页的页面首先是布局文件 <android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_ ...
黑色自适应简约个人主页引导页HTML源码
介绍: 个人引导页,页面非常简洁美观,而且还是自适应哦. 网盘下载地址: http://kekewl.cc/rvQd5gvu0pq0 图片: pc端移动端:
uniapp启动图和引导页的处理逻辑
pages.js pages节点的第一项为应用入口页(即首页,这里作为启动页来使用), 可以在home.vue放如一张gif动图,动图时间位2秒,设置定时器在2.5秒后跳转. 如图所示,添加两个vue ...
java中引导页面的,Android实现欢迎引导页面
现在的大多数应用都会有一个欢迎引导页面, 需求分析: 程序安装后第一次启动: 启动页-->功能引导页-->应用主页以后启动: 启动页-->应用主页实现原理: 用SharedPre ...
IOS引导页拨动4张图片最后一张停三秒进入主页，页面推送
// // ViewController.m // // // Created by 张艳锋 on 15/8/26. // Copyright (c) 2015年张艳锋. All rights ...
【UI设计】【Photoshop系统设计大作业】【5个页面(引导页\首页*2\个人中心页\登录页)、5000字+实验报告、视频教程】
目录 1.实验题目 2.实验报告展示图 3.素材展示 4.PSD文件---效果展示 5.操作视频 6.PSD文件获取方式 1.实验题目 2.实验报告展示图 2020年5月21日~ ...
Android之app引导页(背景图片切换加各个页面动画效果)
转载:http://blog.csdn.net/lowprofile_coding/article/details/48037095 先看效果图: 1.显示三个页面的Activity 用view p ...
jQuery插件实现的页面功能介绍引导页效果
查看演示下载源码 Helloweba.com之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pag ...
jquery html5引导页,jQuery插件实现的页面功能介绍引导页效果
Helloweba.com之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrou ...

引导页onboarding页面XIB实现

说明

代码实现

代码下载

参考

引导页onboarding页面XIB实现相关推荐

最新文章

热门文章