自定义表情键盘-上下联动

底部toolbar中,为button自定义type类型(直接使用tag值也是可以的),在button的点击事件中,执行闭包,让外界监听button的点击事件

// 定义一个常量(添加子控件时,0的tag值默认被占用,所以创建时最好添加一个系数)
// 内部创建button的时候,让其加上一个中间值,调用闭包时,再减去个中间值,这样传出去的Tag值和CollectionView的索引可以对应,外界不需要在进行设置
let tmpvalue: Int = 1000
// 表情键盘类型
enum JSEmoticonToolBarType: Int {
    case Default = 0        //默认
    case Emoji = 1          //Emoji
    case Langxiaohua = 2    //浪小花
}
    // MARK: - Button点击事件
    @objc private func buttonClick (button: UIButton) -> Void {
        
        // button的选中状态
        if button == currentButton {
            return
        }
        button.selected = true
        currentButton?.selected = false
        currentButton = button
        
        buttonClickClosure?(type: JSEmoticonToolBarType(rawValue: button.tag)!)
        
    }

监听按钮点击事件的闭包实现中,通过参数传入button的Tag值,转化为CollectionView Cell对应的索引,跳转到指定Cell,完成点击按钮调到指定表情分组

    // 接收toolbar中的哪个按钮点击
    toolbar.buttonClickClosure = {[weak self] (type: JSEmoticonToolBarType) -> () in
            
        // 根据button的type转换为CollectionView的索引,跳转到对应分区的表情首页
        let indexPath = NSIndexPath(forItem: 0, inSection: type.rawValue)
        self?.pageView.scrollToItemAtIndexPath(indexPath, atScrollPosition: UICollectionViewScrollPosition.Left, animated: false)
            
    }

滚动CollectionView改变toolbar按钮选中


    - 计算方式 (只试用于cell和item一样大,即ItemSize均为0)
    - 当前的collectionView界面上展示给用户最多两个cell
    - 相对于 collectionView 左侧起点为O点 屏幕中心点x = 屏幕的宽度/ 2 + contentOffset.x
    - 由于cell贴在pageView 每个cell都有自己的frame
    - 如果判断出 哪个cell的frame 包含屏幕的中心点 就代表它在屏幕中显示区域占比大
    - 通过cell 和 collectionView 得到indexPath
    - indexPath 得到 section
    - section 0 1 2  viewWithTag  通过该方法 得到button  把button状态发生改变

代码:

extension JSEmoticonKeyBoardView: UICollectionViewDelegate {
    
    func scrollViewDidScroll(scrollView: UIScrollView) {
        
        // 屏幕中心点距离CollectionView左边的距离
        let centerX = SCREENW / 2 + scrollView.contentOffset.x
        
        // 获取当前屏幕显示的Cell
        let cellArr = pageView.visibleCells().sort { (cell1, cell2) -> Bool in
            
            return cell1.frame.origin.x < cell2.frame.origin.x
        }
        
        // 当屏幕上显示2个cell的时候
        if cellArr.count == 2 {
            
            // 取出Cell
            let firstCell = cellArr.first!
            let lastCell = cellArr.last!
            
            // 获取占屏幕比例大的Cell
            var indexPath: NSIndexPath
            
            // 如果中心点在第一个cell中,代表第一个Cell占屏幕比例多
            if firstCell.frame.contains(CGPointMake(centerX, 0)) {
                
                indexPath = pageView.indexPathForCell(firstCell)!
                
            } else {
                
                indexPath = pageView.indexPathForCell(lastCell)!

            }
            // 滚动CollectionView时,改变toolbar下面按钮的选中状态
            toolbar.switchSelectedButton(indexPath.section + tmpvalue)
            
        }
                
    }
    
    
}

CollectionView 数据源方法中

// 数据源方法
extension JSEmojiconPageView: UICollectionViewDataSource {
    
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        
        return JSEmoticonTool.sharedTool.allEmoticons.count
    }
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
        return JSEmoticonTool.sharedTool.allEmoticons[section].count
    }
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(collectionViewCellId, forIndexPath: indexPath) as! JSEmojiconPageViewCell
        cell.indexpath = indexPath
        
        cell.emoticons = JSEmoticonTool.sharedTool.allEmoticons[indexPath.section][indexPath.item]
        
        return cell
    }
    
    
}
效果图.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容