IOS 13：UITextField rightView 的间距问题答案

【问题标题】：IOS 13: spacing Issue with UITextField rightViewIOS 13：UITextField rightView 的间距问题
【发布时间】：2020-01-29 15:30:24
【问题描述】：

iOS 13 中 UITextField 的右视图存在间距问题，请参阅我的以下代码和 ios 13 和 ios 12.4 的屏幕截图

IOS 12.4模拟器在UITextField的右视图（UIButton）中显示适当的空间

在IOS 13.0模拟器中，UITextField的右视图（UIButton）有间距问题

let dropdownButton = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: txtField.frame.height))
dropdownButton.backgroundColor = UIColor.clear
dropdownButton.setImage(UIImage(named: "ic_DownArrow"), for: UIControl.State())            
txtField.rightView = dropdownButton           
txtField.rightViewMode = .always

【问题讨论】：

标签： ios swift uitextfield ios13 xcode11

【解决方案1】：

您可以从我制作的扩展中更改右填充和左填充 ............ 您可以使用或不使用 IBDesignable，如您所见

import UIKit

@IBDesignable
extension UITextField {
    
    @IBInspectable var paddingLeftCustom: CGFloat {
        get {
            return leftView!.frame.size.width
        }
        set {
            let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: frame.size.height))
            if leftView == nil {
                leftView = paddingView
                leftViewMode = .always
            }
            
        }
    }

    @IBInspectable var paddingRightCustom: CGFloat {
        get {
            return rightView!.frame.size.width
        }
        set {
            let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: newValue, height: frame.size.height))
            if rightView == nil {
                rightView = paddingView
                rightViewMode = .always
            }
            
        }
    }
}

【讨论】：

【解决方案2】：

为此我遇到的另一个解决方案是将translatesAutoresizingMaskIntoConstraints 设置为true，以便分配给iOS 13+ 的leftView 和false 否则。

【讨论】：

【解决方案3】：

这对我有用，它还解决了 iPhone X/11 中发生的问题，当时 rightView 占据了 textField 的整个宽度：

txtField.rightView = dropdownButton
txtField.translatesAutoresizingMaskIntoConstraints = false
txtField.rightView?.widthAnchor.constraint(equalToConstant: 50).isActive = true

【讨论】：

【解决方案4】：

为要添加的 leftView 或 rightView 设置宽度限制。

leftImageView.widthAnchor.set(to: 30.0)
textField.leftView = leftImageView
textField.leftViewMode = .always

这是我用来设置宽度约束的扩展：

extension NSLayoutDimension {

@discardableResult
func set(
        to constant: CGFloat,
        priority: UILayoutPriority = .required
        ) -> NSLayoutConstraint {

        let cons = constraint(equalToConstant: constant)
        cons.priority = priority
        cons.isActive = true
        return cons
    }
}

【讨论】：

完美运行

【解决方案5】：

我通过设置这个来解决同样的问题：

覆盖 textField rightViewRectForBounds: 方法，

- (CGRect)rightViewRectForBounds:(CGRect)bounds {
    if (self.rightView) {
        CGRect rightFrame = self.rightView.frame;
        return CGRectMake(bounds.size.width - rightFrame.size.width, 0, rightFrame.size.width, bounds.size.height);
    }
    return CGRectZero;
}

【讨论】：

【解决方案6】：

显然这是 rightViewRect(forBounds:) 在 iOS 13 Beta 5 中的行为方式发生了变化。

来自 iOS 和 iPadOS 13 Developer Beta 5 发行说明：

UIKit - 已解决的问题

在 iOS 13 之前，UITextField 假定其 leftView 和 rightView 的框架在分配时已正确设置并且永远不会更改。从 iOS 13 开始，leftViewRect(forBounds:) 和 rightViewRect(forBounds:) 的实现现在向视图询问其 systemLayoutSizeFitting(:)。要在 iOS 13 上链接和运行时实现之前的行为，请在视图上添加显式大小约束，将其包装在普通 UIView 中，或子类化视图并实现 systemLayoutSizeFitting(:)。 (51787798)

所以将自动布局约束添加到您添加到 rightView 的自定义视图中

例子：-

override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.width - 30, y: 0, width: 20 , height: bounds.height)
    }

【讨论】：

如何在 Objective C 中做到这一点？
如何在 Swift 中使用它？
@GautamShrivastav 在 Objective-C 上你只需要这样设置：[txtField.rightView.widthAnchor constraintEqualToConstant:50.0].active = YES;
谢谢@RicardoBarroso

【解决方案7】：

我使用布鲁诺的方法让它工作。

1) 创建一个容器视图并使用自动布局设置其宽度和高度。宽度和高度应包括子视图的大小 + 所需的间距。

2) 创建要在文本字段中显示的子视图。使用自动布局设置宽度、高度和布局。将其添加到容器视图中。

3) 将容器视图添加到文本字段

您可以看到我的容器与文本字段的高度匹配。宽度是按钮的宽度（44），加上我想要的间距（16）。当我添加我的子视图时，我会将它对齐到容器的左侧。这将使我在按钮右侧和文本字段边缘之间留出 16 像素的间距。

let forgotButtonContainer = UIView()
forgotButtonContainer.translatesAutoresizingMaskIntoConstraints = false
forgotButtonContainer.widthAnchor.constraint(equalToConstant: 44.0 + 16.0).isActive = true
forgotButtonContainer.heightAnchor.constraint(equalToConstant: 48.0).isActive = true

forgotButton = PFSecondaryButton(link: "Forgot?")
forgotButton.translatesAutoresizingMaskIntoConstraints = false
forgotButtonContainer.addSubview(forgotButton)

forgotButton.topAnchor.constraint(equalTo: forgotButtonContainer.topAnchor).isActive = true
forgotButton.leftAnchor.constraint(equalTo: forgotButtonContainer.leftAnchor).isActive = true
forgotButton.bottomAnchor.constraint(equalTo: forgotButtonContainer.bottomAnchor).isActive = true

passwordField.rightView = forgotButtonContainer

【讨论】：

【解决方案8】：

可能你的图片比width: 50, height: txtField.frame.height小，所以你的按钮被缩小了。

您可以尝试添加一些容器：

let dropdownButton = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: txtField.frame.height))
dropdownButton.backgroundColor = .clear
dropdownButton.setImage(UIImage(named: "ic_DownArrow"), for: UIControl.State())
let container = UIView(frame: dropdownButton.frame)
container.backgroundColor = .clear
container.addSubview(dropdownButton)
txtField.rightView = container
txtField.rightViewMode = .always

【讨论】：