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

https://blog.youkuaiyun.com/TanJiaXiang/article/details/95796616

github https://github.com/Coder-TanJX/JXPageControl

 

2019-07-13 21:43:22 Code_TanJX 阅读数 105更多

分类专栏： iOSUI框架 

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 

本文链接：https://blog.youkuaiyun.com/TanJiaXiang/article/details/95796616

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

---

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

 

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

---

Installation [安装]

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

platform :ios, '8.0'

target 'TargetName' do
pod 'JXPageControl'
end

•  

UI效果

• JXPageControlChameleon

  

---

• JXPageControlExchange

  

---

• JXPageControlFill

  

---

• JXPageControlJump

  

---

• JXPageControlScale

  

---

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 , 变换内容位置

 

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.currentPagev = currentPage

    }
    
}

Example 2 and so on …

import JXPageControl
...

Demo地址