专业java、php、iOS、C++、网页设计、平面设计、网络营销、游戏开发、前端与移动开发培训机构

设置UIPageControl

• 当我们滑动表情的时候,可以通过 UIPageControl 知道当前显示的是 第几页, collectionView 滚动时, UIPageControl 并不会滚动,所以将 pageControl 添加到 CZEmoticonKeyboard

• 在 HMEmoticonKeyboard 的awakeFromNib 里 设置 UIPageControl

  override func awakeFromNib() {
    super.awakeFromNib()
  
    collectionView.register(HMEmoticonPageCell.self, forCellWithReuseIdentifier: "cell")
    collectionView.dataSource = self
    collectionView.delegate = self
  
    // 设置toolBar代理
    toolBar.delegate = self
  
    // 设置UIPageControl
    pageControl.currentPageIndicatorTintColor = UIColor(patternImage: UIImage(named: "compose_keyboard_dot_selected")!)
    pageControl.pageIndicatorTintColor = UIColor(patternImage: UIImage(named: "compose_keyboard_dot_normal")!)
  
    // 测试
    pageControl.numberOfPages = 5
    pageControl.backgroundColor = UIColor.black
  }
  

• 运行发现设置的 currentPageIndicatorTintColor 有问题.不能使用图片平铺来作为 currentPageIndicatorTintColor，查看头文件，没有其他属性来设置图片的,使用 runtime 来获取 UIPageControl 里面的所有属性

  override func awakeFromNib() {
    super.awakeFromNib()
  
    collectionView.register(HMEmoticonPageCell.self, forCellWithReuseIdentifier: "cell")
    collectionView.dataSource = self
    collectionView.delegate = self
  
    // 设置toolBar代理
    toolBar.delegate = self
  
    // 设置UIPageControl
    pageControl.currentPageIndicatorTintColor = UIColor(patternImage: UIImage(named: "compose_keyboard_dot_selected")!)
    pageControl.pageIndicatorTintColor = UIColor(patternImage: UIImage(named: "compose_keyboard_dot_normal")!)
  
    // 测试
    pageControl.numberOfPages = 5
    pageControl.backgroundColor = UIColor.black
  
    // 记录属性总数
    var count: UInt32 = 0
  
    // 获取UIPageControl里面的所有属性
    let ivars = class_copyIvarList(UIPageControl.self, &count)
  
    // 遍历
    for i in 0..<count {
        // 获取属性数组里面的属性
        let ivar = ivars![Int(i)]
  
        // 获取属性的名称
        let cName = ivar_getName(ivar)
        //  UnsafePointer<Int8>?
  
        // 转成String
        let name = String(cString: UnsafePointer<CChar>(cName!), encoding: String.Encoding.utf8)
  
        print("name: \(name)")
    }
  
    free(ivars)
  }
  

• 打印结果

  name: Optional("_lastUserInterfaceIdiom")
  name: Optional("_indicators")
  name: Optional("_currentPage")
  name: Optional("_displayedPage")
  name: Optional("_pageControlFlags")
  name: Optional("_currentPageImage")
  name: Optional("_pageImage")
  name: Optional("_currentPageImages")
  name: Optional("_pageImages")
  name: Optional("_backgroundVisualEffectView")
  name: Optional("_currentPageIndicatorTintColor")
  name: Optional("_pageIndicatorTintColor")
  name: Optional("_legibilitySettings")
  name: Optional("_numberOfPages")
  

• 可以看到 _pageImage 和 _currentPageImage. 使用 KVC 给这2个属性赋值

  pageControl.setValue(UIImage(named: "compose_keyboard_dot_normal"), forKey: "_pageImage")
  pageControl.setValue(UIImage(named: "compose_keyboard_dot_selected"), forKey: "_currentPageImage")
  

• 图片就设置好了,根据当前显示的cell来设置 pageControl,在 HMEmoticonKeyboard 的 scrollViewDidScroll 方法中设置 pageControl 的 总页数 和 pageControl 的 当前页

  // 监听colletionView滚动,来动态设置toolBar上的按钮选中
  func scrollViewDidScroll(_ scrollView: UIScrollView) {
    // 计算中心参照点
    var refPoint = scrollView.center
    refPoint.x += scrollView.contentOffset.x
    // print("center: \(refPoint)")
  
    // 判断哪个cell包含这个参照点
    for cell in collectionView.visibleCells {
        if cell.frame.contains(refPoint) {
            // 显示这个cell所在的组
            let indexPath = collectionView.indexPath(for: cell)!
             print("选中: \(indexPath.section) 组")
  
            // 让toolBar选中按钮
            toolBar.switchSelectedButton(withSection: indexPath.section)
  
            // 设置pageControl的总页数 = 当前表情包的页数
            pageControl.numberOfPages = HMEmoticonManager.shared.packages[indexPath.section].pageEmoticons.count
  
            // 当前页 = 当section的item
            pageControl.currentPage = indexPath.item
  
            break
        }
    }
  }
  

• 但是点击 HMEmoticonToolbar 中的按钮 pageControl 并不会改变.需要在 HMEmoticonKeyboard 的 HMEmoticonToolbarDelegate 方法中设置 pageControl 的 总页数 和 pageControl 的 当前页

  extension HMEmoticonKeyboard: HMEmoticonToolbarDelegate {
    func didSelectedButton(didSelectedType type: HMEmoticonToolbarType) {
        print("选中了: \(type)")
        // 切换collectionView对应的section
  
        let indexPath = IndexPath(item: 0, section: type.rawValue)
        collectionView.selectItem(at: indexPath, animated: false, scrollPosition: .left)
  
        // 设置pageControl的总页数 = 当前表情包的页数
        pageControl.numberOfPages = HMEmoticonManager.shared.packages[indexPath.section].pageEmoticons.count
  
        // 当前页 = 当section的item
        pageControl.currentPage = indexPath.item
    }
  }
  

• 发现2个地方设置 pageControl 的代码都一样.抽取到一个方法里面

  /**
  设置pageControl
  parameter indexPath: 当前页的indexPath
  */
  func setPageControl(indexPath: IndexPath) {
    // 设置pageControl的总页数 = 当前表情包的页数
    pageControl.numberOfPages = HMEmoticonManager.shared.packages[indexPath.section].pageEmoticons.count
  
    // 当前页 = 当section的item
    pageControl.currentPage = indexPath.item
  
    // 第0组不显示
    pageControl.isHidden = indexPath.section == 0
  }
  

•