UI_25_饭灯片效果_FSPagerView

最新推荐文章于 2024-05-11 09:36:28 发布

GotoLevel

最新推荐文章于 2024-05-11 09:36:28 发布

阅读量533

点赞数

分类专栏： 2_iOS开发_2_UI篇文章标签： ui ios

本文链接：https://blog.csdn.net/m0_52635912/article/details/130735162

版权

2_iOS开发_2_UI篇专栏收录该内容

6 篇文章 0 订阅

订阅专栏

请添加图片描述

platform :ios, '13.0'
use_frameworks!

target 'DemoApp' do
    source 'https://github.com/CocoaPods/Specs.git'
    pod 'FSPagerView'
end

import UIKit
import FSPagerView
//FSPagerViewDataSource, FSPagerViewDelegate
class ViewController: UIViewController, FSPagerViewDataSource, FSPagerViewDelegate {
    
    // 数据源:
    fileprivate let imageNames = ["1","2","3","4","5","6","7"]
    fileprivate var numberOfItems = 7 // 数量;
    var pagerView: FSPagerView! // 饭灯片视图 对象; (是继承UICollectionView集合视图)

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化:
        pagerView = FSPagerView(frame: CGRect(x: 0, y: 100, width: self.view.bounds.width, height: 200))
        pagerView.dataSource = self
        pagerView.delegate = self
        self.view.addSubview(pagerView)
        
        // 循环 展示模式:
        pagerView.isInfinite = true //循环 展示模式;
        
        // 设置 饭灯片 页面的尺寸:  缩小0.8:
        self.pagerView.itemSize = self.pagerView.frame.size.applying(
            CGAffineTransform(scaleX: 0.8, y: 0.8))
        self.pagerView.interitemSpacing = 10 // 设置两个页面的间距;
        
        // 设置 Cell复用 标识符:（FSPagerView饭灯片视图是继承UICollectionView集合视图)
        pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
    }

    func numberOfItems(in pagerView: FSPagerView) -> Int {
        return numberOfItems
    }
    
    func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "cell", at: index)
        
        cell.imageView?.image = UIImage(named: self.imageNames[index])
        cell.imageView?.contentMode = .scaleAspectFill // 图片填充整个Cell;
        
        cell.imageView?.clipsToBounds = true // 边缘裁剪;
        cell.textLabel?.text = "Photo #\(index.description)"
        return cell
    }
    
    // Cell 的点击事件:
    func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int) {
        // 点击Cell时， 跳转到指定的页面:
        pagerView.deselectItem(at: index, animated: true)
        pagerView.scrollToItem(at: index, animated: true)
    }
}

请添加图片描述

import UIKit
import FSPagerView
class ViewController: UIViewController, FSPagerViewDataSource, FSPagerViewDelegate {
    fileprivate let imageNames = ["1","2","3","4","5","6","7"]
    fileprivate var numberOfItems = 7
    var pagerView: FSPagerView!
    var pageControl: FSPageControl! // 页面识别器;

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //
        pagerView = FSPagerView(frame: CGRect(x: 0, y: 100, width: self.view.bounds.width, height: 200))
        pagerView.dataSource = self
        pagerView.delegate = self
        pagerView.isInfinite = true
        pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
        self.view.addSubview(pagerView)
        
        
        // 初始化 识别器 作为页码识别器： 位于 饭灯片的底部:
        pageControl = FSPageControl(frame: CGRect(x: 0, y: 270, width: self.view.bounds.width, height: 40))
        self.pageControl.numberOfPages = self.imageNames.count
        self.pageControl.contentHorizontalAlignment = .center
        self.pageControl.contentInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
        self.view.addSubview(pageControl)
    }

    func numberOfItems(in pagerView: FSPagerView) -> Int {
        return numberOfItems
    }
    
    func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "cell", at: index)
        cell.imageView?.image = UIImage(named: self.imageNames[index])
        cell.imageView?.contentMode = .scaleAspectFill
        cell.imageView?.clipsToBounds = true
        cell.textLabel?.text = "Photo #\(index.description)"
        return cell
    }
    
    func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int) {
        pagerView.deselectItem(at: index, animated: true)
        pagerView.scrollToItem(at: index, animated: true)
    }
    
    // 当用停止拖到拖动时，修改页码识别器的当前页码:
    func pagerViewWillEndDragging(_ pagerView: FSPagerView, targetIndex: Int) {
        self.pageControl.currentPage = targetIndex
    }
    
    // 当 饭灯片停止滚动时，也刷新页码识别器的当前页码:
    func pagerViewDidEndScrollAnimation(_ pagerView: FSPagerView) {
        self.pageControl.currentPage = pagerView.currentIndex
    }
}

请添加图片描述

import UIKit
import FSPagerView
class ViewController: UIViewController, FSPagerViewDataSource, FSPagerViewDelegate {
    
    // 定义一个贝赛尔路径:
    fileprivate var starPath: UIBezierPath {
        // 获取页面识别器两个圆点之间的距离,
        let distance = self.pageControl.itemSpacing
        
        // 初始化一个贝赛尔路径:
        let starPath = UIBezierPath()
        
        //使贝赛尔路径依次通过4个坐标: (绘制一个正方形) 作为页码识别器的形状:
        starPath.move(to: CGPoint(x: distance, y: 0))
        starPath.addLine(to: CGPoint(x: distance, y: distance))
        starPath.addLine(to: CGPoint(x: 0, y: distance))
        starPath.addLine(to: CGPoint(x: 0, y: 0))
        starPath.close() // 关闭路径;
        return starPath
    }
    
    fileprivate let imageNames = ["1","2","3","4","5","6","7"]
    fileprivate var numberOfItems = 7
    var pagerView: FSPagerView!
    var pageControl: FSPageControl!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //
        pagerView = FSPagerView(frame: CGRect(x: 0, y: 100, width: self.view.bounds.width, height: 200))
        pagerView.dataSource = self
        pagerView.delegate = self
        pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
        self.view.addSubview(pagerView)
        
        // Create a page control
        pageControl = FSPageControl(frame: CGRect(x: 0, y: 277, width: self.view.bounds.width, height: 20))
        self.pageControl.numberOfPages = self.imageNames.count
        self.pageControl.contentHorizontalAlignment = .center
        self.pageControl.hidesForSinglePage = true
        self.view.addSubview(pageControl)
        
        /// 设置页码的样式:
        //yeTye1()
        //yeTye2()
        yeTye3()
    }

    func yeTye1(){
        // 设置 正常和选择状态下的页码识别器的 描边颜色:
        self.pageControl.setStrokeColor(.clear, for: .normal)
        self.pageControl.setStrokeColor(.orange, for: .selected)
        
        // 设置 正常和选择状态下的页码识别器的 填充颜色:
        self.pageControl.setFillColor(.gray, for: .normal)
        self.pageControl.setFillColor(.orange, for: .selected)
    }
    
    // 用贝赛尔路径 绘制自定义形状的页码识别器:
    func yeTye2(){
        self.pageControl.setStrokeColor(.orange, for: .normal)
        self.pageControl.setStrokeColor(.orange, for: .selected)
        self.pageControl.setFillColor(.orange, for: .selected)
        
        // 将路径作为页码识别器的形状:
        self.pageControl.setPath(self.starPath, for: .normal)
        self.pageControl.setPath(self.starPath, for: .selected)
    }
    
    // 用图片作为页码 识别器的形状:
    func yeTye3(){
        // 用图片作为页码 识别器的形状:
        self.pageControl.setImage(UIImage(named:"heart"), for: .normal)
        self.pageControl.setImage(UIImage(named:"love"), for: .selected)
        
        // 设置页码识别器的间距:
        self.pageControl.interitemSpacing = 20
        self.pageControl.itemSpacing = 10
    }
    
    func numberOfItems(in pagerView: FSPagerView) -> Int {
        return numberOfItems
    }
    
    func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "cell", at: index)
        cell.imageView?.image = UIImage(named: self.imageNames[index])
        cell.imageView?.contentMode = .scaleAspectFill
        cell.imageView?.clipsToBounds = true
        cell.textLabel?.text = index.description+index.description
        return cell
    }
    
    func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int) {
        pagerView.deselectItem(at: index, animated: true)
        pagerView.scrollToItem(at: index, animated: true)
    }
    
    func pagerViewWillEndDragging(_ pagerView: FSPagerView, targetIndex: Int) {
        self.pageControl.currentPage = targetIndex
    }
    
    func pagerViewDidEndScrollAnimation(_ pagerView: FSPagerView) {
        self.pageControl.currentPage = pagerView.currentIndex
    }
}

请添加图片描述

import UIKit
import FSPagerView
class ViewController: UIViewController, FSPagerViewDataSource, FSPagerViewDelegate {
    fileprivate let imageNames = ["1","2","3","4","5","6","7"]
    fileprivate var numberOfItems = 7
    var pagerView: FSPagerView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        pagerView = FSPagerView(frame: CGRect(x: 0, y: 100, width: self.view.bounds.width, height: 200))
        pagerView.dataSource = self
        pagerView.delegate = self
        pagerView.register(FSPagerViewCell.self, forCellWithReuseIdentifier: "cell")
        self.view.addSubview(pagerView)
        
        ///-- 转场  效果动画: (共有 9 种效果)
        yeTye1()
        //yeTye2()
        //yeTye3()
    }

    func yeTye1(){
        /// 1. 交叉 (透明度) 渐显:
        //pagerView.transformer = FSPagerViewTransformer(type: .crossFading)
        
        /// 2. 缩小 （有立体感， 效果较好）
        //pagerView.transformer = FSPagerViewTransformer(type: .zoomOut)
        
        
        /// 3. 三维界面的形式 （3D）
        pagerView.transformer = FSPagerViewTransformer(type: .coverFlow)
        // 设置 饭灯片 页面的尺寸:
        self.pagerView.itemSize = CGSize(width: 320, height: 200)
        // 设置饭灯片页面拥有自动调整的间距:
        self.pagerView.decelerationDistance = FSPagerView.automaticDistance
    }
    
    func yeTye2(){
        ///4.  立方体 旋转的效果:
        pagerView.transformer = FSPagerViewTransformer(type: .cubic)
        // 将饭灯片的页面缩放到 0.9倍:
        let transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
        self.pagerView.itemSize = self.pagerView.frame.size.applying(transform)
        //设置 饭灯片的减速距离为1， 该值表示减速期间通过的项目数：
        self.pagerView.decelerationDistance = 1
    }
    
    func yeTye3(){
        /// 5.    摩天轮: 扇形 旋转:
        pagerView.transformer = FSPagerViewTransformer(type: .ferrisWheel)
        // 设置饭灯片页面的尺寸:
        self.pagerView.itemSize = CGSize(width: 260, height: 180)
        // 设置饭灯片的减速距离为自动, 可以根据饭灯片的滚动速度自动计算实际的减速距离:
        self.pagerView.decelerationDistance = FSPagerView.automaticDistance
    }
    
    func numberOfItems(in pagerView: FSPagerView) -> Int {
        return numberOfItems
    }
    
    func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        let cell = pagerView.dequeueReusableCell(withReuseIdentifier: "cell", at: index)
        cell.imageView?.image = UIImage(named: self.imageNames[index])
        cell.imageView?.contentMode = .scaleAspectFill
        cell.imageView?.clipsToBounds = true
        return cell
    }
    
    func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int) {
        pagerView.deselectItem(at: index, animated: true)
        pagerView.scrollToItem(at: index, animated: true)
    }
}