我们下载安装一款APP,会发现,首次登录都会进入一个用户引导界面,当我们再次登录时就不会出现(除非你卸载重新安装),这样的设计几乎覆盖了所有的APP,所以本讲就为大家介绍一下,如何简单设计一个用户引导界面.
设计思路介绍:
1.不难发现用户引导界面有一个特点,只有用户下载后第一次进入时才会出现,那么,像这样的界面我个人喜欢将他设置为一个单独的控制器本讲中为ViewController,也是本讲的核心界面.
2.通过交互效果我们发现其其效果为整页滚动的视图,在iOS开发中能够实现整页滚动效果的方式有很多,可以用UITabelView,UICollectionView,今天我们要用的就是他们的父类视图UIScrollView.
3.用户引导页面滚动过程中会有一个提示当前页面的标记,标记的方式各有千秋,要看产品需求,本讲用的是UIPageControl.
4.滚动到最后一页会与其他页面有所不同,该页需要操作事件进入主界面,所有需要添加一个按钮,或添加一个手势,本讲使用动画效果显示一个按钮来实现此操作.
基本思路就是这样下面👇我们看一下具体操作.
首先我们创建一个ViewController,即引导页控制器
import UIKit
class ViewController: UIViewController,UIScrollViewDelegate {
var scrollview = UIScrollView()
var pageControl = UIPageControl()
var btn = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
//创建页面当前显示标记
pageControl.center = CGPoint(x: self.view.frame.width/2, y: self.view.frame.height-30)
//当前页面指针颜色
pageControl.currentPageIndicatorTintColor = UIColor.red
//页面指针的颜色
pageControl.pageIndicatorTintColor = UIColor.white
pageControl.numberOfPages = 4
pageControl.addTarget(self, action: #selector(scrollViewDidEndDecelerating), for: UIControlEvents.valueChanged)
//创建整页滚动视图
scrollview.frame = self.view.bounds
scrollview.contentSize = CGSize(width: 4*self.view.frame.width, height: 0)
scrollview.isPagingEnabled = true
scrollview.bounces = false
scrollview.showsHorizontalScrollIndicator = false
scrollview.delegate = self
self.view.addSubview(scrollview)
for i in 0...3{
let image = UIImage(named:"引导图-\(i+1)")
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height))
imageView.image = image
var frame = imageView.frame
frame.origin.x = CGFloat(i)*frame.size.width
imageView.frame = frame
scrollview.addSubview(imageView)
self.view.addSubview(pageControl)
}
}
//滑动scrollview结束时切换pageControl
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let index = Int(scrollview.contentOffset.x/self.view.frame.width)
pageControl.currentPage = index
if index == 3 {
self.btn.frame = CGRect(x: 3*self.view.frame.width, y: self.view.frame.height, width: self.view.frame.width, height: 50)
self.btn.setTitle("MangoJ引导", for: .normal)
self.btn.titleLabel?.font = UIFont.systemFont(ofSize: 20)
self.btn.setTitleColor(UIColor.gray, for: .highlighted)
self.btn.backgroundColor = UIColor.gray
self.btn.addTarget(self, action: #selector(btnClick), for: UIControlEvents.touchUpInside)
self.btn.alpha = 0
//添加动画跳转按钮
UIView.animate(withDuration: 1.5, delay: 0.5, options: UIViewAnimationOptions.curveEaseInOut, animations: {
self.btn.frame = CGRect(x: 3*self.view.frame.width, y: self.view.frame.height-100, width: self.view.frame.width, height: 50)
self.btn.alpha = 1
scrollView.addSubview(self.btn)
}, completion: nil)
}
}
//点击弹出按钮进入主界面事件
func btnClick() {
let rootVC = RootViewController()
self.present(rootVC, animated: true, completion: nil);
}
}
然后,我们在AppDelegate里,设置用户引导界面的显示,需要判断是否为第一次加载APP,如果是则显示用户引导界面,如果不是第一次加载APP,则显示主界面.
import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
//判断是否为第一次加载APP
if !UserDefaults.standard.bool(forKey: "firstLaunch") {
self.window?.rootViewController = ViewController()
self.window?.makeKeyAndVisible()
UserDefaults.standard.set(true, forKey: "firstLaunch")
}
else{
let rootVC = RootViewController()
self.window?.rootViewController = rootVC
self.window?.makeKeyAndVisible()
UserDefaults.standard.set(true, forKey: "firstLaunch")
}
return true
}
}
本讲主界面为只为显示效果不做过多设计,如下
import UIKit
class RootViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.green
let 主界面 = UILabel(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 30))
主界面.center = self.view.center
主界面.text = "MangoJ主界面"
主界面.textAlignment = .center
self.view.addSubview(主界面)
// Do any additional setup after loading the view.
}
}
APP引导页及判断是否第一登录APP大功告成,相信本讲,对读者朋友会有所帮助,如果觉得文章还可以,点击下方👇喜欢鼓励一下,没关注的朋友可以点击一下关注,专题系列讲解持续更新中!
专题目录:Swift开发之功能模块
