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

自定义标题按钮

• 创建标题按钮

  // 设置导航栏标题
  let button = UIButton()
  button.setTitle("iOS", for: UIControlState.normal)
  button.setImage(UIImage(named: "navigationbar_arrow_down"), for: UIControlState.normal)
  button.setTitleColor(UIColor.black, for: UIControlState.normal)
  button.sizeToFit()
  navigationItem.titleView = button
  

• 将图片放到右边,自定义按钮

  class HMHomeTitleView: UIButton {
    // 返回文字的frame
  //    override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
  //    }
    // 返回图片的frame
  //    override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
  //    }
  
    // 只想单纯的改变位置,不需要改变大小
    /**
    view布局的时候调用
    */
    override func layoutSubviews() {
        super.layoutSubviews()
  
        // 把label移动到左边
        titleLabel?.frame.origin.x = 0
  
        // 把图片移到label的后面
        imageView?.frame.origin.x = titleLabel!.frame.width + 3
    }
  }
  

• 修改调用

  // 设置导航栏标题
  let button = HMHomeTitleView()
  button.setTitle("iOS", for: UIControlState.normal)
  button.setImage(UIImage(named: "navigationbar_arrow_down"), for: UIControlState.normal)
  button.setTitleColor(UIColor.black, for: UIControlState.normal)
  //
  button.sizeToFit()
  navigationItem.titleView = button
  

• 封装 HMHomeTitleView 创建方式

  // 自定义构造函数创建按钮
  init(title: String) {
    super.init(frame: CGRect())
  
    setTitle(title, for: UIControlState.normal)
    setImage(UIImage(named: "navigationbar_arrow_down"), for: UIControlState.normal)
    setTitleColor(UIColor.black, for: UIControlState.normal)
  
    sizeToFit()
  }
  

• 调用修改

  // 设置导航栏标题
  let button = HMHomeTitleView(title: "iOS")
  navigationItem.titleView = button
  

• 图片旋转

  • 添加点击事件

    // 添加点击事件
    button.addTarget(self, action: #selector(homeTitleButtonClick(button:)), for: UIControlEvents.touchUpInside)
    

  • 根据不同状态,改变箭头方向

    // MARK: - 按钮点击事件
    @objc private func homeTitleButtonClick(button: UIButton) -> Void {
      // 改变按钮的状态
    //        if button.isSelected {
    //            button.isSelected = false
    //        } else {
    //            button.isSelected = true
    //        }
    
      button.isSelected = !button.isSelected
    
      // 根据不同状态设置箭头旋转角度
      // 选中状态,旋转180°,使箭头朝上
      if button.isSelected {
          UIView.animate(withDuration: 0.25, animations: { 
              button.imageView?.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI))
          })
      } else {
          // 未选中状态,旋转角度为0°,箭头朝下
          UIView.animate(withDuration: 0.25, animations: { () -> Void in
              button.imageView?.transform = CGAffineTransform.identity
          })
      }
    }
    

  • 抽取代码

    @objc private func homeTitleButtonClick(button: UIButton) -> Void {
      // 改变按钮的状态
    //        if button.isSelected {
    //            button.isSelected = false
    //        } else {
    //            button.isSelected = true
    //        }
    
      button.isSelected = !button.isSelected
    
      // 根据不同状态设置箭头旋转角度
      var transform: CGAffineTransform
      if button.isSelected {
          transform = CGAffineTransform(rotationAngle: CGFloat(M_PI))
      } else {
          transform = CGAffineTransform.identity
      }
    
      UIView.animate(withDuration: 0.25) { 
          button.imageView?.transform = transform
      }
    }
    

  • 发现按钮一直是向右旋转,UIView旋转动画的特点:
    • 1.就近原则,如果需要旋转 270°, 360 - 270 = 90, 它会就近旋转90
    • 2.两边一样远,就顺时针

  • 解决方法,旋转的时候转180°少一点

    @objc private func homeTitleButtonClick(button: UIButton) -> Void {
      // 改变按钮的状态
      button.isSelected = !button.isSelected
    
      // 根据不同状态设置箭头旋转角度
      var transform: CGAffineTransform
      if button.isSelected {
          /*
           UIView旋转动画的特点:
           1.就近原则,如果需要旋转 270°, 360 - 270 = 90, 它会就近旋转90
           2.两边一样远,就顺时针
           */
          transform = CGAffineTransform(rotationAngle: CGFloat(M_PI - 0.001))
      } else {
          transform = CGAffineTransform.identity
      }
    
      UIView.animate(withDuration: 0.25) { 
          button.imageView?.transform = transform
      }
    }