iOS ScrollView分页 引导图 轮播图 用户教程 更新内容介绍

很多地方都能用到多页的一种用于产品介绍的图,用户可以通过滑动查看内容或者直接跳过。


iOS ScrollView分页 引导图 轮播图 用户教程 更新内容介绍_第1张图片
实现效果

核心:

1.ScrollView 里添加多个不同的View,多个View各自布局,设置isPagingEnabled = true。
2.背景球是共用的,所以背景球是放在ScrollView里。
3.防止遮盖,多个View的背景要设为透明。
4.下方三个圆点是UIPageControl
5.View中的按钮要能够返回

设置View

布局设置

可以通过代码或者xib

行距设置

            Label.numberOfLines = 0
            //通过富文本来设置行间距
            let paraph = NSMutableParagraphStyle()
            //行间距
            paraph.lineSpacing = 23
            //样式属性集合
            let attributes = [NSAttributedString.Key.paragraphStyle: paraph]
            Label.attributedText = NSAttributedString(string: str!, attributes: attributes)

动画设置

其中anchorPoint是拿来设置旋转圆心的,默认是图片的中心

            let anim = CABasicAnimation(keyPath: "transform.rotation")
            // 设置动画属性  无限转圈
            anim.toValue = 2 * Double.pi
            anim.repeatCount = MAXFLOAT
            anim.duration = 10
            anim.isRemovedOnCompletion = false
            // 将动画添加到图层上
            //Circle.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
            Circle.layer.add(anim, forKey: nil)

设置PageControl

通过滑动偏移变换页码

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        //通过scrollView内容的偏移计算当前显示的是第几页
        let page = Int(scrollView.contentOffset.x / scrollView.frame.size.width)
        //设置pageController的当前页
        pageControl?.currentPage = page
    }

View中按钮响应

View中是不能像vc那样直接self.dissmiss的,可以通过获取控制器然后返回

        let nav = UIApplication.shared.keyWindow?.rootViewController as! UIViewController
        nav.dismiss(animated: true, completion: nil)

你可能感兴趣的:(iOS ScrollView分页 引导图 轮播图 用户教程 更新内容介绍)