• UICollectionView横向分页的问题情况直接看图 已经设置collectionView的isPagingEnabled为true了,可是出现了这种情况,原因就是collectionView的contentSize不够。; frame = (0 0; 375 197); clipsToBounds ...

    UICollectionView横向分页的问题

    情况

    直接看图
    这里写图片描述
    这里写图片描述
    已经设置collectionView的isPagingEnabled为true了,可是出现了这种情况,原因就是collectionView的contentSize不够。

    <UICollectionView: 0x7fc565076000; 
    frame = (0 0; 375 197); 
    clipsToBounds = YES; 
    gestureRecognizers = <NSArray: 0x6180000557e0>; 
    layer = <CALayer: 0x61000022a5a0>; 
    contentOffset: {187.5, 0}; 
    contentSize: {562.5, 192.25}
    > 

    解决方案

    有两种方式可以解决,数据只有11个,要分两页需要16个,那我们可以直接添加数据到16个,然后在dataSource中返回cell时进行判断及处理即可。不过对于现在来说太小题大做了,我选第二种方式~

    直接修改contentSize

    我自定义了一个继承于UICollectionViewFlowLayout的Layout(LXFChatMoreCollectionLayout),让UICollectionView在创建的时候使用了它

    在 LXFChatMoreCollectionLayout.swift 中我们需要重写父类的collectionViewContentSize,
    将contentSize取出来修改为我们自己创建的newSize就可以了
    代码如下

    override var collectionViewContentSize: CGSize {
        let size: CGSize = super.collectionViewContentSize
        let collectionViewWidth: CGFloat = self.collectionView!.frame.size.width
        let nbOfScreen: Int = Int(ceil(size.width / collectionViewWidth))
        let newSize: CGSize = CGSize(width: collectionViewWidth * CGFloat(nbOfScreen), height: size.height)
        return newSize
    }

    注:ceil函数的作用是求不小于给定实数的最小整数。ceil(2)=ceil(1.2)=cei(1.5)=2.00

    效果

    这里写图片描述

    至于如何让item水平布局,请参考《iOS - Swift UICollectionView横向分页滚动,cell左右排版》

    展开全文
  • swift 分页视图

    2019-09-27 22:51:37
    var data:NSArray! var scrollView: UIScrollView! var pageCtrl: UIPageControl! override func viewDidLoad() { super.viewDidLoad() // 实例...

    var data:NSArray!

        

        var scrollView: UIScrollView!

        

        var pageCtrl: UIPageControl!

        

        override func viewDidLoad() {

            super.viewDidLoad()

            

            // 实例化tableView

            let tableView:UITableView = UITableView(frame: self.view.bounds, style: UITableViewStyle.Plain)

            tableView.delegate = self

            tableView.dataSource = self

            tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")

            self.view.addSubview(tableView)

            

            // 系统字体

            data = UIFont.familyNames()

            

            // 实例化scrollView

            let widthm = tableView.frame.size.width

            let view: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: 200))

            scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: widthm, height: 200))

            scrollView.contentSize = CGSize(width: widthm * 5, height: 200)

            scrollView.showsHorizontalScrollIndicator = false

            scrollView.showsVerticalScrollIndicator = false

            scrollView.pagingEnabled = true

            scrollView.delegate = self

            for index in 1...5 {

                let imgName = "image\(index).jpg"

                let imgView: UIImageView = UIImageView(image: UIImage(named: imgName))

                imgView.frame = CGRect(x: widthm * CGFloat(index - 1), y: 0, width: widthm, height: 200)

                scrollView.addSubview(imgView)

            }

            view.autoresizesSubviews = false

            view.addSubview(scrollView)

            

            // 实例化分页控制器

            pageCtrl = UIPageControl(frame: CGRect(x: 0, y: 200 - 20, width: widthm, height: 20))

            pageCtrl.addTarget(self, action: Selector("pageCtrlAction:"), forControlEvents: UIControlEvents.ValueChanged)

            pageCtrl.numberOfPages = 5

            pageCtrl.currentPage = 0

            view.addSubview(pageCtrl)

            

            tableView.tableHeaderView = view

            

        }

        

        //MARK: UITableViewDataSource

        func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

            return data.count

        }

        

        func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

            let tableViewCell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell

            

            tableViewCell.textLabel?.text = self.data[indexPath.row] as? String

            

            return tableViewCell

        }

        

        //MARK: UIScrollViewDelegate

        func scrollViewDidEndDecelerating(scrollView: UIScrollView) {

            if scrollView == self.scrollView {

                pageCtrl.currentPage = Int(scrollView.contentOffset.x/scrollView.frame.size.width)

            }

        }

     

        //MARK: pageCtrl Action

        func pageCtrlAction(pageCtrl: UIPageControl) {

    //        scrollView.contentOffset.x = scrollView.frame.width * CGFloat(pageCtrl.currentPage)

            scrollView.setContentOffset(CGPoint(x: scrollView.frame.width * CGFloat(pageCtrl.currentPage), y: 0), animated: true)

        }

     

    转载于:https://www.cnblogs.com/ZGSmile/p/5726452.html

    展开全文
  • TabPageViewController:iOS分页视图控制器和滚动选项卡视图
  • 分页控制器 1.分页控制器 导入第三方PagingMenuController 第三方链接:https://github.com/kitasuke/PagingMenuController 导入使用第三方方法链接:http://www.hangge.com/blog/cache/detail_1656.html 使用...

    分页控制器

    1.分页控制器

    导入第三方PagingMenuController
    第三方链接:https://github.com/kitasuke/PagingMenuController
    导入使用第三方方法链接:http://www.hangge.com/blog/cache/detail_1656.html

    使用PagingMenuController

    ViewController.m
    ViewController1,ViewController2,ViewController3,ViewController4,ViewController5是分页
    需要分几页创建几个控制器 这里需要五个所以创建了五个控制器

    
    import UIKit
    import PagingMenuController
    
    class ViewController: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
    		//标题视图
            let tView = UIImageView.init(frame: CGRect(x: (SCR_W - 100) / 2, y: 0, width: 100, height: 50))
            tView.image = UIImage.init(named: "1")
            self.navigationItem.titleView = tView
            //导航栏右按钮
            self.navigationItem.rightBarButtonItem = UIBarButtonItem.init(title: "?", style: .plain, target: self, action: #selector(click))
            
            
            let options = pagingMenuOptions()
            
            let pagingMenuController = PagingMenuController(options: options)
            //分页菜单控制器尺寸设置
            pagingMenuController.view.frame.origin.y += 64
            pagingMenuController.view.frame.size.height -= 64
            
            addChildViewController(pagingMenuController)
            view.addSubview(pagingMenuController.view)
            
            
        }
    
        private struct pagingMenuOptions:PagingMenuControllerCustomizable {
            
            private var v1 = ViewController1()
            private var v2 = ViewController2()
            private var v3 = ViewController3()
            private var v4 = ViewController4()
            private var v5 = ViewController5()
            
            fileprivate var componentType: ComponentType{
                return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)
            }
            
            fileprivate var pagingControllers : [UIViewController]{
                return [v1,v2,v3,v4,v5]
            }
            
            fileprivate struct MenuOptions:MenuViewCustomizable {
                var displayMode: MenuDisplayMode{
                    return .segmentedControl
                }
                
                var itemsOptions: [MenuItemViewCustomizable] {
                    return [MenuItem1(),MenuItem2(),MenuItem3(),MenuItem4(),MenuItem5()]
                }
                
                
            }
            
            //第1个菜单项
            fileprivate struct MenuItem1: MenuItemViewCustomizable {
                //自定义菜单项名称
                var displayMode: MenuItemDisplayMode {
                    return .text(title: MenuItemText(text: "推荐"))
                }
            }
            
            //第2个菜单项
            fileprivate struct MenuItem2: MenuItemViewCustomizable {
                //自定义菜单项名称
                var displayMode: MenuItemDisplayMode {
                    return .text(title: MenuItemText(text: "快讯"))
                }
            }
            
            fileprivate struct MenuItem3: MenuItemViewCustomizable {
                //自定义菜单项名称
                var displayMode: MenuItemDisplayMode {
                    return .text(title: MenuItemText(text: "深度"))
                }
            }
            
            fileprivate struct MenuItem4: MenuItemViewCustomizable {
                //自定义菜单项名称
                var displayMode: MenuItemDisplayMode {
                    return .text(title: MenuItemText(text: "时点对话"))
                }
            }
            
            fileprivate struct MenuItem5: MenuItemViewCustomizable {
                //自定义菜单项名称
                var displayMode: MenuItemDisplayMode {
                    return .text(title: MenuItemText(text: "行情分析"))
                }
            }
        }
        
        @objc func click() -> Void {
            let t = tViewController()
            
            self.navigationController?.pushViewController(t, animated: true)
        }
        
        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
            // Dispose of any resources that can be recreated.
        }
      
    
    }
    
    

    2.轮播图

    导入轮播图的第三方ImageHelper
    使用第三方方法链接:http://www.hangge.com/blog/cache/detail_1314.html
    Swift请求网络数据使用Alamofire
    Alamofire下载链接:https://github.com/Alamofire/Alamofire

    import UIKit
    import Alamofire
    
    class ViewController1: UIViewController,SliderGalleryControllerDelegate,UITableViewDelegate,UITableViewDataSource {
        
        
        
        var table : UITableView?
        
        
        func galleryDataSource() -> [String] {
            return imgArr
        }
        
        func galleryScrollerViewSize() -> CGSize {
            return CGSize(width: SCR_W, height: 200)
        }
        
    
        var sdlier = SliderGalleryController()
        
        var imgArr = ["http://img4q.duitang.com/uploads/item/201503/18/20150318230437_Pxnk3.jpeg",
                      "http://img4.duitang.com/uploads/item/201501/31/20150131234424_WRJGa.jpeg",
                      "http://img5.duitang.com/uploads/item/201502/11/20150211095858_nmRV8.jpeg"]
        
        
        
        override func viewDidLoad() {
            super.viewDidLoad()
    
            self.view.backgroundColor = UIColor.white
            
            sdlier = SliderGalleryController()
            sdlier.delegate = self
            sdlier.view.frame = CGRect(x: 0, y: 0, width: SCR_W, height: 200)
            sdlier.view.backgroundColor = UIColor.white
            addChildViewController(sdlier)
            view.addSubview(sdlier.view)
            
            let parameters1 = ["参数1":"参数值1","参数2":"参数值2"]
            Alamofire.request("图片接口", parameters: parameters1).responseJSON { (response) in
                
                print(response.result.value)
    //            if let JSON = response.result.value
            }
            
            table = UITableView.init(frame: CGRect(x: 0, y: 240, width: SCR_W, height: SCR_H - 240), style: .grouped)
            table?.register(MainTableViewCell.self, forCellReuseIdentifier: "cell")
            table?.contentInset = UIEdgeInsetsMake(-30, 0, 0, 0)
            table?.delegate = self
            table?.dataSource = self
            self.view.addSubview(table!)
            
        }
    
        func numberOfSections(in tableView: UITableView) -> Int {
            return 4
        }
        
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            if section == 0 {
                return 1
            }else if section == 1{
                return 3
            }else if section == 2{
                return 1
            }
            return 1
        }
        
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            var cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MainTableViewCell
            if cell == nil {
                cell = MainTableViewCell.init(style: .default, reuseIdentifier: "cell")
            }
            if indexPath.section == 0 {
                cell.textLabel?.text = "创业黑马董事长:区块链是机会,但不是每个人的机会"
                cell.imageView?.image = UIImage.init(named: "2")
            }else if indexPath.section == 1{
                cell.title?.text = "创业黑马董事长:区块链是机会,但不是每个人的机会"
                cell.name?.text = "岳恒月"
                cell.time?.text = "6月11日"
                cell.imag?.image = UIImage.init(named: "2")
            }else if indexPath.section == 2{
                let imgV = UIImageView.init(frame: CGRect(x: 0, y: 0, width: SCR_W, height: 140))
                imgV.image = UIImage.init(named: "3")
                cell.addSubview(imgV)
            }else{
                cell.title?.text = "创业黑马董事长:区块链是机会,但不是每个人的机会"
                cell.name?.text = "岳恒月"
                cell.time?.text = "6月11日"
                cell.imag?.image = UIImage.init(named: "2")
            }
            return cell
            
        }
        
        func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
            if indexPath.section == 2{
                return 140
            }
            return 70
        }
        
        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
            // Dispose of any resources that can be recreated.
        }
        
    
    }
    
    展开全文
  • 分页菜单(分段菜单)在许多 App 上都会用到。比如大多数新闻 App,如网易新闻、今日头条等...本文介绍一个优秀的第三方分页视图控件:PagingMenuController,不仅可以自定义菜单,而且可以自由地修改样式。 一、...
    分页菜单(分段菜单)在许多 App 上都会用到。比如大多数新闻 App,如网易新闻、今日头条等,顶部都有个导航菜单。这个导航菜单是一组标签的集合,每个标签表示一个新闻类别,我们点击这个标签后下面就会切换到相应的分页面。同时左右滑动分页面,上方的标签也会跟着移动。
    本文介绍一个优秀的第三方分页视图控件:PagingMenuController,不仅可以自定义菜单,而且可以自由地修改样式。

    一、安装配置

    (1)从 GitHub 上下载最新的代码:https://github.com/kitasuke/PagingMenuController
    (2)将下载下来的源码包中 PagingMenuController.xcodeproj 拖拽至你的工程中。
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    (3)工程 -> General -> Embedded Binaries 项,把 PagingMenuController.framework 添加进来。
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    (4)最后,在需要使用 PagingMenuController 的地方 import 进来就可以了。
    1
    import PagingMenuController

    二、纯代码使用样例

    1,效果图

    (1)主视图顶部分页菜单中有两个菜单标签,分别对应两个子视图。
    (2)点击菜单标签,下方便会切换显示相应的子视图。
    (3)也可以直接左右滑动子视图进行切换,上方的菜单标签状态也会同步更新。
       原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    2,样例代码

    (1)子视图控制器1(ViewController1.swift)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import UIKit
     
    //子视图控制器1
    class ViewController1: UIViewController {
        override func viewDidLoad() {
            super.viewDidLoad()
             
            view.backgroundColor = UIColor.orange
             
            let textLabel = UILabel(frame: CGRect(x: 0, y: 100, width: self.view.frame.width,
                                                  height: 30))
            textLabel.textAlignment = .center
            textLabel.font = UIFont.systemFont(ofSize: 33)
            textLabel.textColor = .white
            textLabel.text = "电影"
            view.addSubview(textLabel)
        }
    }

    (2)子视图控制器2(ViewController2.swift)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import UIKit
     
    //子视图控制器2
    class ViewController2: UIViewController {
        override func viewDidLoad() {
            super.viewDidLoad()
             
            view.backgroundColor = UIColor.darkGray
             
            let textLabel = UILabel(frame: CGRect(x: 0, y: 100, width: self.view.frame.width,
                                                  height: 30))
            textLabel.textAlignment = .center
            textLabel.font = UIFont.systemFont(ofSize: 33)
            textLabel.textColor = .white
            textLabel.text = "音乐"
            view.addSubview(textLabel)
        }
    }

    (3)主视图控制器(ViewController.swift)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    import UIKit
    import PagingMenuController
     
    //分页菜单配置
    private struct PagingMenuOptions: PagingMenuControllerCustomizable {
        //第1个子视图控制器
        private let viewController1 = ViewController1()
        //第2个子视图控制器
        private let viewController2 = ViewController2()
         
        //组件类型
        fileprivate var componentType: ComponentType {
            return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)
        }
         
        //所有子视图控制器
        fileprivate var pagingControllers: [UIViewController] {
            return [viewController1, viewController2]
        }
         
        //菜单配置项
        fileprivate struct MenuOptions: MenuViewCustomizable {
            //菜单显示模式
            var displayMode: MenuDisplayMode {
                return .segmentedControl
            }
            //菜单项
            var itemsOptions: [MenuItemViewCustomizable] {
                return [MenuItem1(), MenuItem2()]
            }
        }
         
        //第1个菜单项
        fileprivate struct MenuItem1: MenuItemViewCustomizable {
            //自定义菜单项名称
            var displayMode: MenuItemDisplayMode {
                return .text(title: MenuItemText(text: "电影"))
            }
        }
         
        //第2个菜单项
        fileprivate struct MenuItem2: MenuItemViewCustomizable {
            //自定义菜单项名称
            var displayMode: MenuItemDisplayMode {
                return .text(title: MenuItemText(text: "音乐"))
            }
        }
    }
     
    //主视图控制器
    class ViewController: UIViewController {
     
        override func viewDidLoad() {
            super.viewDidLoad()
             
            //分页菜单配置
            let options = PagingMenuOptions()
            //分页菜单控制器初始化
            let pagingMenuController = PagingMenuController(options: options)
            //分页菜单控制器尺寸设置
            pagingMenuController.view.frame.origin.y += 64
            pagingMenuController.view.frame.size.height -= 64
     
            //建立父子关系
            addChildViewController(pagingMenuController)
            //分页菜单控制器视图添加到当前视图中
            view.addSubview(pagingMenuController.view)
        }
     
        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
        }
    }
    源码下载:hangge_1656.zip

    三、Storyboard 使用样例

    1,效果图

    具体功能同上面的是一样的。
       原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    2,Storyboard 相关操作

    (1)在主视图中添加一个 Container View,并设置好相关约束。
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    (2)Container View 默认embed的是 UIViewController,我们将其改成 PagingMenuController。
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    3,样例代码

    (1)子视图控制器(ViewController1.swift、ViewController2.swift)
    1
    //具体参考上面的纯代码实现部分

    (2)主视图控制器(ViewController.swift)
    高亮处表示与上面纯代码实现不相同的地方。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    import UIKit
    import PagingMenuController
     
    //分页菜单配置
    private struct PagingMenuOptions: PagingMenuControllerCustomizable {
        //第1个子视图控制器
        private let viewController1 = ViewController1()
        //第2个子视图控制器
        private let viewController2 = ViewController2()
         
        //组件类型
        fileprivate var componentType: ComponentType {
            return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)
        }
         
        //所有子视图控制器
        fileprivate var pagingControllers: [UIViewController] {
            return [viewController1, viewController2]
        }
         
        //菜单配置项
        fileprivate struct MenuOptions: MenuViewCustomizable {
            //菜单显示模式
            var displayMode: MenuDisplayMode {
                return .segmentedControl
            }
            //菜单项
            var itemsOptions: [MenuItemViewCustomizable] {
                return [MenuItem1(), MenuItem2()]
            }
        }
         
        //第1个菜单项
        fileprivate struct MenuItem1: MenuItemViewCustomizable {
            //自定义菜单项名称
            var displayMode: MenuItemDisplayMode {
                return .text(title: MenuItemText(text: "电影"))
            }
        }
         
        //第2个菜单项
        fileprivate struct MenuItem2: MenuItemViewCustomizable {
            //自定义菜单项名称
            var displayMode: MenuItemDisplayMode {
                return .text(title: MenuItemText(text: "音乐"))
            }
        }
    }
     
    //主视图控制器
    class ViewController: UIViewController {
     
        override func viewDidLoad() {
            super.viewDidLoad()
             
            //获取分页菜单配置
            let options = PagingMenuOptions()
            //设置分页菜单配置
            let pagingMenuController = self.childViewControllers.first as! PagingMenuController
            pagingMenuController.setup(options)
        }
     
        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
        }
    }
    源码下载:hangge_1656.zip

    四、标签、页面切换响应

    有时我们需要监听页面切换事件进行一些操作,比如当切换到新的页面时可以去请求数据等。这个通过 PagingMenuController 的 onMove 回调就可以实现。每当菜单移动前后、页面切换前后、手指滑动页面前后,该方法都会被调用。

    1,样例代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    //分页菜单控制器初始化
    let pagingMenuController = PagingMenuController(options: options)
     
    //....省略一些代码
             
    view.addSubview(pagingMenuController.view)
     
    //页面切换响应
    pagingMenuController.onMove = { state in
        switch state {
        case let .willMoveItem(menuItemView, previousMenuItemView):
            print("--- 标签将要切换 ---")
            print("老标签:\(previousMenuItemView.titleLabel.text!)")
            print("新标签:\(menuItemView.titleLabel.text!)")
        case let .didMoveItem(menuItemView, previousMenuItemView):
            print("--- 标签切换完毕 ---")
            print("老标签:\(previousMenuItemView.titleLabel.text!)")
            print("新标签:\(menuItemView.titleLabel.text!)")
        case let .willMoveController(menuController, previousMenuController):
            print("--- 页面将要切换 ---")
            print("老页面:\(previousMenuController)")
            print("新页面:\(menuController)")
        case let .didMoveController(menuController, previousMenuController):
            print("--- 页面切换完毕 ---")
            print("老页面:\(previousMenuController)")
            print("新页面:\(menuController)")
        case .didScrollStart:
            print("--- 分页开始左右滑动 ---")
        case .didScrollEnd:
            print("--- 分页停止左右滑动 ---")
        }
    }

    2,运行效果

    (1)我们点击顶部菜单标签进行页面切换,可以看到控制台打印出如下信息:
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    (2)而如果通过手指滑动切换页面,控制台打印出如下信息:
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)

    五、使用代码切换标签

    比如下面代码自动将分页菜单控制器切换到第 2 个页面。
    1
    pagingMenuController.move(toPage: 1, animated: true)

    六、自定义分页控制器样式

    PagingMenuControllerCustomizable 对象有如下几个属性可以对整个视图控制器进行自定义:

    1,defaultPage: Int

    设置默认页面的索引,如果不指定则默认显示第一个视图页。

    2,animationDuration: TimeInterval

    页面切换动画时间。

    3,isScrollEnabled: Bool

    是否允许手指左右滑动进行页面切换,设置为 false 则只能点击菜单标签切换页面。

    4,backgroundColor: UIColor

    设置页面背景色。

    5,lazyLoadingPage: LazyLoadingPage

    lazy loading 的页面数量,这个是一个枚举,可选值如下:
    1
    2
    3
    4
    5
    public enum LazyLoadingPage {
        case one // Currently sets false to isScrollEnabled at this moment. Should be fixed in the future.
        case three
        case all // Currently not available for Infinite mode
    }

    6,menuControllerSet: MenuControllerSet

    这个不太清楚做什么用的,也是一个枚举可选值如下:
    1
    2
    3
    4
    public enum MenuControllerSet {
         case single
         case multiple
    }

    7,componentType: ComponentType 

    这个很重要,用来配置整个分页菜单控制器包含的页面和菜单标签。这也是一个枚举,可选值如下:
    1
    2
    3
    4
    5
    public enum ComponentType {
        case menuView(menuOptions: MenuViewCustomizable)
        case pagingController(pagingControllers: [UIViewController])
        case all(menuOptions: MenuViewCustomizable, pagingControllers: [UIViewController])
    }

    8,下面是一个完整的配置样例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    //分页菜单配置
    private struct PagingMenuOptions: PagingMenuControllerCustomizable {
         
        //默认显示第2页
        var defaultPage: Int = 1
         
        //页面切换动画播放时间为0.5秒
        var animationDuration: TimeInterval = 0.5
         
        //不允许手指左右滑动页面切换
        var isScrollEnabled: Bool = false
         
        //页面背景色为紫色
        var backgroundColor: UIColor = .purple
         
        //lazy loading的页面数量(默认值就是.three)
        var lazyLoadingPage: LazyLoadingPage = .three
         
        //不太清楚干嘛用的(默认值就是.multiple)
        var menuControllerSet: MenuControllerSet = .multiple
         
        //第1个子视图控制器
        private let viewController1 = ViewController1()
        //第2个子视图控制器
        private let viewController2 = ViewController2()
         
        //组件类型
        fileprivate var componentType: ComponentType {
            return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)
        }
         
        //所有子视图控制器
        fileprivate var pagingControllers: [UIViewController] {
            return [viewController1, viewController2]
        }
         
        //菜单配置项
        fileprivate struct MenuOptions: MenuViewCustomizable {
            //菜单显示模式
            var displayMode: MenuDisplayMode {
                return .segmentedControl
            }
            //菜单项
            var itemsOptions: [MenuItemViewCustomizable] {
                return [MenuItem1(), MenuItem2()]
            }
        }
         
        //第1个菜单项
        fileprivate struct MenuItem1: MenuItemViewCustomizable {
            //自定义菜单项名称
            var displayMode: MenuItemDisplayMode {
                return .text(title: MenuItemText(text: "电影"))
            }
        }
         
        //第2个菜单项
        fileprivate struct MenuItem2: MenuItemViewCustomizable {
            //自定义菜单项名称
            var displayMode: MenuItemDisplayMode {
                return .text(title: MenuItemText(text: "音乐"))
            }
        }
    }

    七、自定义菜单栏样式

    MenuViewCustomizable 对象有如下几个属性对菜单栏进行自定义:

    1,backgroundColor: UIColor

    设置未选中的菜单标签背景色。

    2,selectedBackgroundColor: UIColor

    设置选中的菜单标签背景色。

    3,height: CGFloat

    设置菜单标签的高度。

    4,animationDuration: TimeInterval

    设置菜单标签切换时动画持续时长。

    5,deceleratingRate: CGFloat

    设置菜单切换动画减速率(默认为:UIScrollViewDecelerationRateFast)

    6,menuSelectedItemCenter: Bool

    不太清楚干嘛的。

    7,displayMode: MenuDisplayMode

    菜单显示模式,它是一个枚举有三个可选值:
    1
    2
    3
    4
    5
    6
    7
    public enum MenuDisplayMode {
        case standard(widthMode: MenuItemWidthMode, centerItem: Bool,
            scrollingMode: MenuScrollingMode)
        case segmentedControl
        case infinite(widthMode: MenuItemWidthMode,
            scrollingMode: MenuScrollingMode) //这个至少要求有3个页面
    }

    其中的 MenuItemWidthMode、MenuScrollingMode 也是枚举:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //设置菜单标签的宽度
    public enum MenuItemWidthMode {
        case flexible //自动
        case fixed(width: CGFloat//固定宽度
    }
     
    //菜单如何滚动
    public enum MenuScrollingMode {
        case scrollEnabled  //可以跨多个菜单项切换
        case scrollEnabledAndBouces //可以跨多个菜单项切换
        case pagingEnabled  //菜单只能一个接一个切换
    }

    • 样例1:分段模式
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    3
    4
    //菜单显示模式(分段模式)
    var displayMode: MenuDisplayMode {
        return .segmentedControl
    }

    • 样例2:标准模式,这里我让选中标签始终居中
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换) 原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    3
    4
    5
    //菜单显示模式(标准模式)
    var displayMode: MenuDisplayMode {
        return .standard(widthMode: .fixed(width: 30), centerItem: true,
                         scrollingMode: .pagingEnabled)
    }

    • 样例3:无限循环模式(这个必需至少有三个菜单项)
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换) 原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    3
    4
    //菜单显示模式(无限循环模式)
    var displayMode: MenuDisplayMode {
        return .infinite(widthMode: .flexible, scrollingMode: .pagingEnabled)
    }

    8,focusMode: MenuFocusMode

    选中菜单标签的样式,这个也是枚举:
    1
    2
    3
    4
    5
    6
    7
    public enum MenuFocusMode {
        case none
        case underline(height: CGFloat, color: UIColor, horizontalPadding: CGFloat,
            verticalPadding: CGFloat)
        case roundRect(radius: CGFloat, horizontalPadding: CGFloat, verticalPadding: CGFloat,
            selectedColor: UIColor)
    }

    • 样例1:无样式
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    //选中项无样式
    var focusMode: MenuFocusMode = .none

    • 样例2:下划线样式
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    3
    //选中项为橙色下划线样式
    var focusMode: MenuFocusMode = .underline(height: 3, color: .orange, horizontalPadding: 0,
                                              verticalPadding: 0)

    • 样例3:圆角矩形背景样式
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    3
    //选中项为橙色矩形背景
    var focusMode: MenuFocusMode = .roundRect(radius: 6, horizontalPadding: 5,
                                              verticalPadding: 8, selectedColor: .orange)

    9,dummyItemViewsSet: Int

    不太清楚干嘛用的。

    10,menuPosition: MenuPosition

    菜单栏的位置,我们可以指定菜单栏在页面视图的上方还是下方。
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    这个也是个枚举:
    1
    2
    3
    4
    public enum MenuPosition {
        case top
        case bottom
    }

    11,dividerImage: UIImage?

    菜单标签间的分隔图片,显示在每个标签的右侧。
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    //设置标签间的分隔图片
    var dividerImage: UIImage? = UIImage(named: "dividerImage.png")!

    12,下面是完整的使用样例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    //菜单栏配置
    fileprivate struct MenuOptions: MenuViewCustomizable {
        //设置未选中的菜单标签背景为深灰色
        var backgroundColor: UIColor = .darkGray
         
        //设置选中的菜单标签背景为浅浅灰色
        var selectedBackgroundColor: UIColor = .lightText
         
        //设置菜单标签高度为40
        var height: CGFloat = 40
         
        //菜单切换动画播放时间为0.5秒
        var animationDuration: TimeInterval = 0.5
         
        //菜单切换动画减速率(默认为:UIScrollViewDecelerationRateFast)
        var deceleratingRate: CGFloat = UIScrollViewDecelerationRateFast
         
        //不知道干嘛的
        var menuSelectedItemCenter: Bool = false
         
         
        //菜单显示模式(分段模式)
        var displayMode: MenuDisplayMode {
            return .segmentedControl
        }
         
         
        //选中项为橙色矩形背景
        var focusMode: MenuFocusMode = .roundRect(radius: 6, horizontalPadding: 5,
                                                  verticalPadding: 8, selectedColor: .orange)
         
        //不知道干嘛的
        var dummyItemViewsSet: Int = 3
         
        //设置菜单栏在下方
        var menuPosition: MenuPosition = .bottom
         
        //设置标签间的分隔图片
        var dividerImage: UIImage? = UIImage(named: "dividerImage.png")!
         
        //菜单项
        var itemsOptions: [MenuItemViewCustomizable] {
            return [MenuItem1(), MenuItem2(), MenuItem3() , MenuItem4()]
        }
    }

    八、自定义单独的菜单标签样式

    MenuItemViewCustomizable 对象有如下几个属性可以对单独的菜单项进行自定义:

    1,horizontalMargin: CGFloat

    设置该菜单标签的左右水平间距。
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    3
    4
    5
    6
    7
    8
    //第2个菜单项
    fileprivate struct MenuItem2: MenuItemViewCustomizable {
        //该标签的水平边距设为50
        var horizontalMargin: CGFloat = 50
         
        //自定义菜单项名称
        var displayMode: MenuItemDisplayMode = .text(title: MenuItemText(text: "音乐e"))
    }

    2,displayMode: MenuItemDisplayMode

    设置该菜单标签的显示模式,它是一个枚举:
    1
    2
    3
    4
    5
    6
    public enum MenuItemDisplayMode {
        case text(title: MenuItemText//普通标题文本
        case multilineText(title: MenuItemText, description: MenuItemText//标题+描述文本
        case image(image: UIImage, selectedImage: UIImage?)  //图片
        case custom(view: UIView//自定义视图
    }

    • 样例1:标签显示为标题+描述文本
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //第2个菜单项
    fileprivate struct MenuItem2: MenuItemViewCustomizable {
        //该标签的水平边距设为50
        var horizontalMargin: CGFloat = 50
         
        //自定义菜单项标题和描述
        var displayMode: MenuItemDisplayMode {
            let desFont = UIFont.systemFont(ofSize: 10)
            let description = MenuItemText(text: "Music", font: desFont , selectedFont: desFont )
            return .multilineText(title: MenuItemText(text: "音乐"), description: description)
        }
    }

    • 样例2:将菜单标签显示为图片
    原文:Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //第2个菜单项
    fileprivate struct MenuItem2: MenuItemViewCustomizable {
        //该标签的水平边距设为50
        var horizontalMargin: CGFloat = 50
         
        //菜单项显示为图片
        var displayMode: MenuItemDisplayMode {
            return .image(image: UIImage(named: "forward")!,
                          selectedImage: UIImage(named: "forward")!)
        }
    }

    原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1656.html
    展开全文
  • Swift滚动视图

    2018-11-16 11:55:30
    var View:UIView? var scroll:UIScrollView? var page:UIPageControl? var imgV:UIImageView? var timer:Timer? var k:Int = 0 override func viewDidLoad() { super.viewDidLoad() ...ScrollView()//滚动视图 ...

    var View:UIView?
    var scroll:UIScrollView?
    var page:UIPageControl?
    var imgV:UIImageView?
    var timer:Timer?
    var k:Int = 0

    override func viewDidLoad() {
    super.viewDidLoad()
    Time()//定时器
    ScrollView()//滚动视图
    PageContol()//分页控制器
    }
    //定时器
    func Time() {
    timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(time), userInfo: nil, repeats: true)
    timer!.fire()
    }

    //滚动视图
    func ScrollView() {
        View = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 220))
        ojtable?.tableHeaderView = View
        
        scroll = UIScrollView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 220))
        View?.addSubview(scroll!)
        scroll?.delegate = self
        scroll?.contentSize = CGSize(width: UIScreen.main.bounds.width*5, height: 220)
        scroll?.showsVerticalScrollIndicator = false
        scroll?.showsHorizontalScrollIndicator = false
        scroll?.bounces = false
        scroll?.isPagingEnabled = true
        let arr = ["4","2","3","1","5"]
        for i in 0..<arr.count {
            imgV = UIImageView(frame: CGRect(x: i*Int(UIScreen.main.bounds.width), y: 0, width: Int(UIScreen.main.bounds.width), height: 220))
            imgV?.image = UIImage(named: arr[i])
            scroll?.addSubview(imgV!)
        }
    }
    //分页控制器
    func PageContol() {
        page = UIPageControl(frame: CGRect(x: (UIScreen.main.bounds.width-100)/2, y: 150, width: 100, height: 40))
        page?.currentPage = 1
        page?.numberOfPages = 5
        page?.pageIndicatorTintColor = UIColor.red
        page?.currentPageIndicatorTintColor = UIColor.orange
        View?.addSubview(page!)
    }
    //滚动视图协议方法
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        page?.currentPage = Int((scroll?.contentOffset.x)!/UIScreen.main.bounds.width)
    }
    // 定时器的时间
    @objc func time(){
        scroll?.contentOffset = CGPoint(x: Int(UIScreen.main.bounds.width)*k, y: 0)
        k+=1
        if k>4 {
            k=0
        }
    }
    
    展开全文
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • Tabman 适用于iOS的强大分页视图控制器带指示条
  • LTInfiniteScrollView-Swift, 分页 scrollview,允许轻松应用动画( 快速 3 ) 演示 1你可以在滚动过程中对每个视图应用动画: 在lib的支持下,可以在10分钟内实现iOS任务切换动画: 3 fancy菜单也可以轻松实现: 你...
  • // BannerViewController.swift // iosTest // // import UIKit import SwiftyJSON import Alamofire import MJRefresh //实现SliderGalleryControllerDelegate接口 class BannerViewController: UIViewControlle....
  • 需求在当前的移动端开发中,我们经常可以看见集合视图需要横向布局分页的场景。例如:微信的表情美团外卖的首页需求实现分析//预布局方法 布局相关代码可放在此处 override func prepare() { } /** 返回true只要显示...
  • 看到很多滑动菜单的APP,今天用UISegmentedControl+UICollectionView尝试了一下,当然也有很多其他实现方式,纯UIView+UIScrollView也可以实现,只不过动画效果自己写比较困难。 大概思路: 1.最外边一个...
  • 最近在开发新版的APP时需要一个可自定义分页宽度的图片轮播组件。刚开始自己觉得在这个万能的互联网上早就应该有一个大侠为我们封装好了,我只需要下载、拷贝、粘贴、修改一下代码就可以了。谁知一圈下来,不知道是...
  • 视图控制器与导航是iOS开发中比较重要的知识,主要介绍了平铺导航,标签导航,树形导航,组合使用导航几种模式,分别介绍了每种导航适合于什么样的应用中使用,以及如何使用导航具体方法。...
  • 分页菜单的实现

    2018-04-13 15:43:53
    Swift - 分页菜单的实现(使用PagingMenuController库实现tab标签切换)分页菜单(分段菜单)在许多 App 上都会用到。比如大多数新闻 App,如网易新闻、今日头条等,...本文介绍一个优秀的第三方分页视图控件:P...
  • 1. 本节课将为您演示多视图控制器的使用。首先在欢迎窗口中,点击[创建一个新项目]选项,创建一个新的项目。 2. 选择创建一个简单的单视图应用。 3. 点击下一步按钮,进入下一步设置页面。 4. 在产品名称输入框内...
  • segment页面视图: 因为防止在切换页面的时候,将整个页面都切换掉,所以我在segment control下面另外加了一个view,将这个新加的view作为要切换页面的视图,并设置好上下左右的约束。 segment页面代码: // ...
  • swift创建图片轮播器和用OC创建的方式是一样的,都主要用到UIScrollView和UIImageview这两个控件,有几张图片,就将滚动视图的内容区域大小设置为每一张图片的大小乘以张数即可。然后允许实现分页功能...
1 2 3 4 5 ... 20
收藏数 969
精华内容 387
热门标签