iOS JXPageControl-(最全的自定义UIPageControl框架)

(JXPageControl 支持多种动画变换, 支持内容布局变换, 支持Xib布局)

• 1. 开发环境: Xcode 7
• 2. 运行条件: iOS(8.0+)
• 开源框架：github地址

（如果使用有什么问题，可以留言，欢迎一起学习，欢迎star）

Installation [安装]

安装，只需将以下面代码添加到您的Podfile:

platform :ios, '8.0'

target 'TargetName' do
pod 'JXPageControl'
end

UI效果

• JXPageControlChameleon

chamelon.gif

• JXPageControlExchange

exchange.gif

• JXPageControlFill

fill.gif

• JXPageControlJump

jump.gif

• JXPageControlScale

scare.gif

Frame set [框架集合]

• Common 框架公用类文件
• Jump 跳跃式动画效果类文件
• Transform 转变式动画类文件

JXPageControl 介绍

• JXPageControlBase - 所有pageControl的基类
• JXPageControlType - 所有pageControl的准守的协议, 它提供了很多自定义API供给开发者使用

JXPageControlType - 提供的 - API。

• numberOfPages ---> 指示器个数。
• currentPage ---> 当前指示器页码。
• progress ---> 当前指示器页码进程。
• hidesForSinglePage --->只有一个指示器时,是否隐藏。
• inactiveColor ---> 不活跃指示器颜色
• activeColor ---> 活跃指示器颜色
• inactiveSize ---> 不活跃指示器大小
• activeSize ---> 活跃指示器大小
• indicatorSize ---> 所有指示器大小
• columnSpacing ---> 指示器水平间距
• contentAlignment ---> 内容布局位置 (注意这个属性很好用!!!!!)
• contentMode ---> 内容布局位置,并且支持在Xib中变换,实时查看位置变化 (注意这个属性很好用!!!!!)
• isInactiveHollow ---> 不活跃指示器是否是空心图形
• isActiveHollow ---> 活跃指示器是否是空心图形
• reload() ---> 刷新数据/UI

注意 :

JXPageControl 还提供了一些非 JXPageControlType 的 API。可以在具体只用类中查看

[JXPageControl 使用] :

Example 1

• 在 xib, storyboard中使用 ( xib, storyboard 中可以完成属性和布局设置 !!! )

• 注意 module要选择 JXPageControl, 否则会显示不出来, 调用会报错

• View 中可以设置 contentMode , 变换内容位置

377EC788-0C82-4F4F-BC81-45CDF5672231.png

F0A66BAE-61F5-4FB2-8429-03C27090DBB7.png

Example 2

• 使用纯代码编写

import JXPageControl

class ChamelonVC: UIViewController {

    lazy var codePageControl: JXPageControlJump = {
        let pageControl = JXPageControlJump(frame: CGRect(x: 0,
                                                          y: 0,
                                                          width: UIScreen.main.bounds.width,
                                                          height: 30))
        pageControl.numberOfPages = 4
        
        // JXPageControlType: default property
//        pageControl.currentPage = 0
//        pageControl.progress = 0.0
//        pageControl.hidesForSinglePage = false
//        pageControl.inactiveColor = UIColor.white.withAlphaComponent(0.5)
//        pageControl.activeColor = UIColor.white
//        pageControl.inactiveSize = CGSize(width: 10, height: 10)
//        pageControl.activeSize = CGSize(width: 10, height: 10)
//        pageControl.inactiveSize = CGSize(width: 10, height: 10)
//        pageControl.columnSpacing = 10
//        pageControl.contentAlignment = JXPageControlAlignment(.center,
//                                                              .center)
//        pageControl.contentMode = .center
//        pageControl.isInactiveHollow = false
//        pageControl.isActiveHollow = false
        
        // JXPageControlJump: default "custom property"
        pageControl.isAnimation  = true
        pageControl.isFlexible = true
        
        return pageControl
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(codePageControl)
    }
    
}

extension ChamelonVC: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let progress = scrollView.contentOffset.x / scrollView.bounds.width
        let currentPage = Int(round(progress))
        
        // 方式一
        codePageControl.progress = progress
        
        // 方式二
//        codePageControl.currentPage = currentPage

    }
    
}

Example 2 and so on ...

import JXPageControl
...

Demo地址