【问题标题】: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+ 的leftViewfalse 否则。

      【讨论】:

        【解决方案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
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2023-03-07
                • 2020-01-24
                • 1970-01-01
                • 2013-10-22
                • 1970-01-01
                相关资源
                最近更新 更多