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

发微博界面添加toolBar

在 HMComposeViewController.xib 添加底部 toolBar
关联 toolBar 到 HMComposeViewController 控制器中

定义 setToolBar 方法, 在 viewDidLoad 里面调用 setToolBar

/// 设置toolBar
private func setToolBar() {
  // 创建toolBar上的item
  var items = [UIBarButtonItem]()

  // 每个item对应的图片名称
  let itemSettings = [["imageName": "compose_toolbar_picture"],
                      ["imageName": "compose_trendbutton_background"],
                      ["imageName": "compose_mentionbutton_background"],
                      ["imageName": "compose_emoticonbutton_background"],
                      ["imageName": "compose_add_background"]]

  // 遍历 itemSettings 创建 UIBarbuttonItem
  for dict in itemSettings {
      // 获取图片名称
      let imageName = dict["imageName"]!
      let highlightImageName = imageName + "_highlighted"

      let btn = UIButton()
      btn.setImage(UIImage(named: imageName), for: .normal)
      btn.setImage(UIImage(named: highlightImageName), for: .highlighted)
      btn.sizeToFit()

      // 追加按钮
      let barButtonItem = UIBarButtonItem(customView: btn)
      items.append(barButtonItem)
  }

  toolBar.items = items
}

toolBar 上面的 item 都挤在一起,在两个 item 之间添加 弹簧

/// 设置toolBar
private func setToolBar() {
  // 创建toolBar上的item
  var items = [UIBarButtonItem]()

  // 每个item对应的图片名称
  let itemSettings = [["imageName": "compose_toolbar_picture"],
                      ["imageName": "compose_trendbutton_background"],
                      ["imageName": "compose_mentionbutton_background"],
                      ["imageName": "compose_emoticonbutton_background"],
                      ["imageName": "compose_add_background"]]

  // 遍历 itemSettings 创建 UIBarbuttonItem
  for dict in itemSettings {
      // 获取图片名称
      let imageName = dict["imageName"]!
      let highlightImageName = imageName + "_highlighted"

      let btn = UIButton()
      btn.setImage(UIImage(named: imageName), for: .normal)
      btn.setImage(UIImage(named: highlightImageName), for: .highlighted)
      btn.sizeToFit()

      // 追加按钮
      let barButtonItem = UIBarButtonItem(customView: btn)
      items.append(barButtonItem)

      // 添加弹簧
      items.append(UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil))
  }
  // 删除最后一根弹簧
  items.removeLast()

  // 将barButtonItems赋值给toolBar
  toolBar.items = items
}

toolBar 上按钮添加点击事件

// 遍历 itemSettings 创建 UIBarbuttonItem
for (index, dict) in itemSettings.enumerated() {
  // 获取图片名称
  let imageName = dict["imageName"]!
  let highlightImageName = imageName + "_highlighted"

  let button = UIButton()
  button.setImage(UIImage(named: imageName), for: .normal)
  button.setImage(UIImage(named: highlightImageName), for: .highlighted)
  button.sizeToFit()

  // 按钮添加tag
  button.tag = index
  // 按钮添加点击事件
  button.addTarget(self, action: #selector(itemClick(button:)), for: UIControlEvents.touchUpInside)

  // 追加按钮
  let barButtonItem = UIBarButtonItem(customView: button)
  items.append(barButtonItem)

  // 添加弹簧
  items.append(UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil))
}

toolBar 的按钮实现点击方法

func itemClick(button: UIButton) -> Void {
  print("button: \(button.tag)")
  switch button.tag {
  case 0:
      print("图片")
  case 1:
      print("#")
  case 2:
      print("@")
  case 3:
      print("表情")
  case 4:
      print("加号")
  default:
      print("没有按钮")
  }
}

通过 tag 判断点击哪个按钮不是很好.当按钮顺序改变了的时候,点击事件里面对应的case也要改变

在 itemSettings 的每个字典里面添加 key = action, value = 点击方法

// 每个item对应的图片名称
let itemSettings = [["imageName": "compose_toolbar_picture", "action": "picture"],
["imageName": "compose_trendbutton_background", "action": "trend"],
["imageName": "compose_mentionbutton_background", "action": "mention"],
["imageName": "compose_emoticonbutton_background", "action": "emoticon"],
["imageName": "compose_add_background", "action": "add"]]

从字典中获取按钮点击事件方法名称, toolBarItem 添加点击事件

// 每个item对应的图片名称
let itemSettings = [["imageName": "compose_toolbar_picture", "action": "picture"],
                  ["imageName": "compose_trendbutton_background", "action": "trend"],
                  ["imageName": "compose_mentionbutton_background", "action": "mention"],
                  ["imageName": "compose_emoticonbutton_background", "action": "emoticon"],
                  ["imageName": "compose_add_background", "action": "add"]]
// 遍历 itemSettings 创建 UIBarbuttonItem
for (index, dict) in itemSettings.enumerated() {
  // 获取图片名称
  let imageName = dict["imageName"]!
  let highlightImageName = imageName + "_highlighted"
  let action = dict["action"]!

  let button = UIButton()
  button.setImage(UIImage(named: imageName), for: .normal)
  button.setImage(UIImage(named: highlightImageName), for: .highlighted)
  button.sizeToFit()

  // 按钮添加tag
  button.tag = index
  // 按钮添加点击事件
  button.addTarget(self, action: Selector(action), for: UIControlEvents.touchUpInside)

  // 追加按钮
  let barButtonItem = UIBarButtonItem(customView: button)
  items.append(barButtonItem)

  // 添加弹簧
  items.append(UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil))
}

实现对应的 barButtonItem 点击方法

// MARK: - toolBar item 点击事件
func picture() {
  print("图片")
}

func trend() {
  print("#")
}

func mention() {
  print("@")
}

func emoticon() {
  print("表情")
}

func add() {
  print("加号")
}

不管按钮怎么变换位置,其他地方不需要做任何修改,都能响应对应的点击事件

发微博界面添加toolBar

发微博界面添加toolBar

results matching ""

No results matching ""