切换 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

您可能希望为您的按钮设置足够高的高度限制，以便在切换复选标记时标签不会移动 up/down。

为了避免尴尬的动画：

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)
    }
}

切换 UIButton 图像

Toggle UIButton Image

uibutton

uiimage

cgaffinetransform

ios

swift