ios 调整动画大小后 UIButton 不尊重 Aspect Fill contentMode

UIButton not respect Aspect Fill contentMode after resizing animation

提问by HanXu

I am use auto layout. Following is the initial state of the view.

我正在使用自动布局。以下是视图的初始状态。

In the centre is a button contained in a view. The button has contentMode Aspect Fill, and the image is set as the background image of the button.

中间是一个包含在视图中的按钮。按钮有contentMode Aspect Fill，图片设置为按钮的背景图片。

Then I use the following code to transform the view, which will enlarge the centre card to fill the screen, and move the image to the top of the view:

然后我使用以下代码转换视图，这将放大中心卡片以填充屏幕，并将图像移动到视图顶部：

cardTrailingSpaceConstraint.constant = 0
cardLeadingSpaceConstraint.constant = 0
cardView.removeConstraint(cardAspectRatioConstraint)
let cardHeightConstraint = NSLayoutConstraint(item: cardView, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Height, multiplier: 1.0, constant: 0)
view.addConstraint(cardHeightConstraint)

dishImageButton.removeConstraint(dishButtonBottomSpaceConstraint)
let dishButtonHeightConstraint = NSLayoutConstraint(item: dishImageButton, attribute: .Height, relatedBy: .Equal, toItem: cardView, attribute: .Height, multiplier: 0.2, constant: 0)
cardView.addConstraint(dishButtonHeightConstraint)

cardView.setNeedsUpdateConstraints()
UIView.animateWithDuration(0.7, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.7, options: nil, animations: { [unowned self] () -> Void in
    self.cardHeader.alpha = 0
    self.cardView.layer.cornerRadius = 0
    self.cardView.layoutIfNeeded()

    }) { [unowned self] (finished) -> Void in

        }

The result is:

结果是：

However, it is not what I want. The button is not respecting the contentMode and the image then get stretched.

然而，这不是我想要的。该按钮不尊重 contentMode，然后图像被拉伸。

Can anyone tell me how to maintain the Aspect Fill contentMode of the button?

谁能告诉我如何维护按钮的 Aspect Fill contentMode？

回答by rob mayoff

1. Set the button type to UIButtonTypeCustom(“Custom” in a storyboard or xib).
2. Set the button's image, not the button's background image.
3. In viewDidLoad, set button.imageView.contentModeto UIViewContentMode.ScaleAspectFill.

1. 将按钮类型设置为UIButtonTypeCustom（故事板或 xib 中的“自定义”）。
2. 设置按钮的图像，而不是按钮的背景图像。
3. 在 中viewDidLoad，设置button.imageView.contentMode为UIViewContentMode.ScaleAspectFill。

回答by Jessie

Swift 3

斯威夫特 3

---

---

Going off of Rob's answer:

离开罗布的回答：

    let btn = UIButton(frame: CGRect(x: 0, y: 0, width: 80, height: 30))
    btn.setImage(UIImage(named: "albumsBtn"), for: UIControlState.normal)
    btn.imageView?.contentMode = UIViewContentMode.scaleAspectFit
    btn.addTarget(self.navigationController, action: #selector(CustomGalleryViewController.showAlbums(_:)), for:  UIControlEvents.touchUpInside)
    let item = UIBarButtonItem(customView: btn)
    self.navigationItem.leftBarButtonItem = item

回答by bradkratky

In Xcode 10.1 you can use interface builder. In the attributes inspector on the right hand side, use the Control section as follows:

在 Xcode 10.1 中，您可以使用界面构建器。在右侧的属性检查器中，使用 Control 部分如下：

回答by Nik Kov

Swift 4.2

斯威夫特 4.2

Extension

延期

// Inspectable image content mode
extension UIButton {
    /// 0 => .ScaleToFill
    /// 1 => .ScaleAspectFit
    /// 2 => .ScaleAspectFill
    @IBInspectable
    var imageContentMode: Int {
        get {
            return self.imageView?.contentMode.rawValue ?? 0
        }
        set {
            if let mode = UIViewContentMode(rawValue: newValue),
                self.imageView != nil {
                self.imageView?.contentMode = mode
            }
        }
    }
}

UPDATE: This and other answers doesn't work for me in ios 11. The most closest answer is by @Jaro but i think it's better to make an UIImageView and over it add a button, or create a custom class of UIImageView that would have a gesture recognizer and click animation.

更新：这个和其他答案在 ios 11 中对我不起作用。最接近的答案是 @Jaro 但我认为最好制作一个 UIImageView 并在它上面添加一个按钮，或者创建一个 UIImageView 的自定义类手势识别器和点击动画。

回答by Yaro

Try this before [btn setImage:forState:]usage:

在[btn setImage:forState:]用法之前试试这个：

    btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
    btn.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;

• Swift 4

• 斯威夫特 4

//Center
btn.contentHorizontalAlignment = UIControl.ContentHorizontalAlignment.center

//Left
btn.contentHorizontalAlignment = UIControl.ContentHorizontalAlignment.left

//Right
btn.contentHorizontalAlignment = UIControl.ContentHorizontalAlignment.right

回答by Vikram Biwal

Swift 2

斯威夫特 2

button.imageView?.contentMode = UIViewContentMode.ScaleAspectFit

all contentMode:

所有内容模式：

  .ScaleToFill
   .ScaleAspectFit
   .ScaleAspectFill
   .Redraw 
   .Center 
   .Top
   .Bottom
   .Left
   .Right
   .TopLeft
   .TopRight
   .BottomLeft
   .BottomRight

回答by Frank Dev

Swift 2.x version:

斯威夫特 2.x 版本：

let myButton = UIButton(type: .Custom)
myButton.frame = CGRectMake(0, 0, 200, 20)
myButton.backgroundColor = UIColor.blackColor()
myButton.imageView.contentMode = .ScaleAspectFill // ALTERNATIVE:  .ScaleAspectFit
myButton.setImage(UIImage(named: "myImageName"), forState: .Normal)
myButton.addTarget(self, action: #selector(buttonAction), forControlEvents: .TouchUpInside)
view.addSubview(myButton)

回答by ivan ramirez

The language seems to have had an update.

语言似乎有更新。

I had to dig a little deeper to get xscoder solution for:

我不得不深入挖掘以获得 xcoder 解决方案：

myButton.imageView.contentMode = .ScaleAspectFill 

the updated version is as follows:

更新后的版本如下：

myButton.imageView?.contentMode = UIView.ContentMode.scaleAspectFit

myButton.imageView?.contentMode = UIView.ContentMode.scaleAspectFit

回答by Ramazan Karami

Swift

迅速

for button has contentMode Aspect Fill:

for 按钮具有 contentMode Aspect Fill：

btn.contentHorizontalAlignment = .fill
btn.contentVerticalAlignment = .fill
btn.imageView?.contentMode = .scaleAspectFill

回答by Oleksandr

Swift 5.0code for a custom UIButtonwith .scaleAspectFill

Swift 5.0自定义代码UIButton与.scaleAspectFill

var mainImageButton : UIButton = {
    var imageButton = UIButton()
    imageButton.translatesAutoresizingMaskIntoConstraints = false
    imageButton.contentMode = .scaleAspectFit
    imageButton.backgroundColor = .white
    imageButton.layer.cornerRadius = 80 / 2

    // The short way
    imageButton.contentMode = .scaleAspectFit

    // The long way
    imageButton.imageView?.contentMode = UIView.ContentMode.scaleAspectFill

    imageButton.clipsToBounds = true
    return imageButton
}()