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

表情键盘设置 HMEmoticonToolbar 和 collectionView

HMEmoticonToolbar搭建

• 自定义 HMEmoticonToolbar 继承 UIView,作为底部按钮的 View，设置4个按钮
• 
• 设置按钮 Normal，Highlighted，Selected 时的状态图片
• 关联4个按钮的点击事件到 HMEmoticonToolbar

• 

  class HMEmoticonToolbar: UIView {
    @IBAction func buttonClick(button: UIButton) {
        print("buttonClick: \(button.tag)")
    }
  }
  

  • 当按钮点击的时候设置 选中 按钮

    func buttonClick(button: UIButton) {
      switchSelectedButton(button)
    }
    
    /**
    切换选中按钮
    parameter button: 要选中的按钮
    */
    private func switchSelectedButton(button: UIButton) {
      if selectedButton == button {
          return
      }
    
      // 设置选中的按钮为normal状态
      selectedButton?.selected = false
    
      // 设置传入的按钮为selected状态
      button.selected = true
    
      // 设置选中的按钮为传入的按钮
      selectedButton = button
    }
    
    /// 记录选中的按钮
    private var selectedButton: UIButton?
    

  • 按钮点击的事件使用使用代理传递给 HMEmoticonKeyboard
  • 定义按钮类型枚举

    enum HMEmoticonToolbarType: Int {
      case Recent = 0  // 最近表情
      case Default = 1 // 默认表情
      case Emoji = 2   // Emoji表情
      case Lxh = 3 // 浪小花表情
    }
    

  • 点击的协议 CZEmoticonToolbarDelegate

    protocol HMEmoticonToolbarDelegate: NSObjectProtocol {
      func didSelectedButton(didSelectedType type: HMEmoticonToolbarType)
    }
    

  • 在 CZEmoticonToolbar 定义代理属性

    weak var delegate: HMEmoticonToolbar?
    

  • 在 按钮 点击的时候调用代理

    @IBAction func buttonClick(button: UIButton) {
      switchSelectedButton(button: button)
    
      let type = HMEmoticonToolbarType(rawValue: button.tag)!
      // 调用代理方法
      delegate?.didSelectedButton(didSelectedType: type)
    }
    

  • 将 HMEmoticonToolbar 关联到 HMEmoticonKeyboard 中, 在 HMEmoticonKeyboard 的 awakeFromNib 设置 self 为 HMEmoticonToolbar 的代理
  • 在 HMEmoticonKeyboard 实现 HMEmoticonToolbarDelegate

    extension HMEmoticonKeyboard: HMEmoticonToolbarDelegate {
      func didSelectedButton(didSelectedType type: HMEmoticonToolbarType) {
          print("选中了: \(type)")
      }
    }
    

  • 运行，效果如果下

    选中了: Recent
    选中了: Default
    选中了: Emoji
    选中了: Lxh