切换UIButton图像

Question

我正试图创建一个 UIButton 当你不关注某事时，它会显示文字，但当你关注时，它会在右侧显示文字和一个复选标记。

我已经能够使用以下方法来实现这个目标--------------------------------------------。

  private(set) var followButton = UIButton(type: .system)

.....

  func setFollowButtonText() {
    let text: String = isFollowing ? "Following" : "Follow"
    let image: UIImage? = isFollowing ? UIImage(systemName: "checkmark") : nil
    followButton.setTitle(text, for: .normal)
    followButton.setImage(image, for: .normal)
    followButton.imageToRight()
  }

.....

extension UIButton {
  func imageToRight() {
      transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
      titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
      imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
  }
}

但是在切换状态时，虽然添加了复选标记，但随后移动位置时，并不顺畅，出现向右微微跳动的现象。

如何防止这种行为？我希望图像能够平滑地动画化到最终位置，或者出现在最终位置并避免跳跃。

Answer 1

你可能想给你的按钮一个足够高的高度约束，这样当切换复选标记时，标签就不会向上移动。

为了避免尴尬的动画。

extension UIButton {
    func imageToRight() {
        UIView.setAnimationsEnabled(false)
        transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        UIView.setAnimationsEnabled(true)
    }
}