带填充,顶部垂直对齐,多行占位符文本的自定义文本字段

时间:2019-04-02 04:07:27

标签: swift uitextfield textfield text-alignment

enter image description here

我要创建自定义文本字段,该字段的左上角右上角为空白。因此,我使用以下代码实现了这一点:

class CustomTextField: UITextField {

let padding = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8);

override func textRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.inset(by: padding)
}

override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.inset(by: padding)
}

override func editingRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.inset(by: padding)
} }

我还希望将占位符文本对齐方式放在TF的顶部而不是其中心。我使用以下代码:

 textField.contentVerticalAlignment = .top

但是,当我尝试使用填充设置垂直对齐方式时,对齐方式将无法正常工作。当我删除填充时,只有这样才能起作用。我的意思是,它只能使用其中之一。我怎样才能做到这两者?另外,是否可以显示多行占位符文本,而不是将其显示在一行的末尾加点?

2 个答案:

答案 0 :(得分:0)

您需要像这样覆盖placeholderRect(forBounds:)

override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
    var placeholderPadding = self.padding
    placeholderPadding.top = 0

    var rect = bounds.inset(by: placeholderPadding)

    // We need to adjust placeholder in-case there is a leftView or rightView
    if rightViewMode == .always || rightViewMode == .unlessEditing, let rightViewWidth = self.rightView?.frame.width {
        rect.size.width -= rightViewWidth
    }

    if leftViewMode == .always || leftViewMode == .unlessEditing, let leftViewWidth = self.leftView?.frame.width {
        rect.size.width -= leftViewWidth
    }

    return rect
}

问题2:UITextField仅适用于1行,为此您需要查看UITextView

答案 1 :(得分:0)

对于第一个问题,您可以扩展UIView     公共扩展UIView {

/// SwifterSwift: Border color of view; also inspectable from Storyboard.
@IBInspectable public var borderColor: UIColor? {
    get {
        guard let color = layer.borderColor else { return nil }
        return UIColor(cgColor: color)
    }
    set {
        guard let color = newValue else {
            layer.borderColor = nil
            return
        }
        // Fix React-Native conflict issue
        guard String(describing: type(of: color)) != "__NSCFType" else { return }
        layer.borderColor = color.cgColor
    }
}

/// SwifterSwift: Border width of view; also inspectable from Storyboard.
@IBInspectable public var borderWidth: CGFloat {
    get {
        return layer.borderWidth
    }
    set {
        layer.borderWidth = newValue
    }
}

/// SwifterSwift: Corner radius of view; also inspectable from Storyboard.
@IBInspectable public var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        layer.masksToBounds = true
        layer.cornerRadius = abs(CGFloat(Int(newValue * 100)) / 100)
    }
}

/// SwifterSwift: Height of view.
public var height: CGFloat {
    get {
        return frame.size.height
    }
    set {
        frame.size.height = newValue
    }
}

/// SwifterSwift: Check if view is in RTL format.
public var isRightToLeft: Bool {
    if #available(iOS 10.0, *, tvOS 10.0, *) {
        return effectiveUserInterfaceLayoutDirection == .rightToLeft
    } else {
        return false
    }
}

/// SwifterSwift: Take screenshot of view (if applicable).
public var screenshot: UIImage? {
    UIGraphicsBeginImageContextWithOptions(layer.frame.size, false, 0)
    defer {
        UIGraphicsEndImageContext()
    }
    guard let context = UIGraphicsGetCurrentContext() else { return nil }
    layer.render(in: context)
    return UIGraphicsGetImageFromCurrentImageContext()
}

/// SwifterSwift: Shadow color of view; also inspectable from Storyboard.
@IBInspectable public var shadowColor: UIColor? {
    get {
        guard let color = layer.shadowColor else { return nil }
        return UIColor(cgColor: color)
    }
    set {
        layer.shadowColor = newValue?.cgColor
    }
}

/// SwifterSwift: Shadow offset of view; also inspectable from Storyboard.
@IBInspectable public var shadowOffset: CGSize {
    get {
        return layer.shadowOffset
    }
    set {
        layer.shadowOffset = newValue
    }
}

/// SwifterSwift: Shadow opacity of view; also inspectable from Storyboard.
@IBInspectable public var shadowOpacity: Float {
    get {
        return layer.shadowOpacity
    }
    set {
        layer.shadowOpacity = newValue
    }
}

/// SwifterSwift: Shadow radius of view; also inspectable from Storyboard.
@IBInspectable public var shadowRadius: CGFloat {
    get {
        return layer.shadowRadius
    }
    set {
        layer.shadowRadius = newValue
    }
}

/// SwifterSwift: Size of view.
public var size: CGSize {
    get {
        return frame.size
    }
    set {
        width = newValue.width
        height = newValue.height
    }
}

/// SwifterSwift: Get view's parent view controller
public var parentViewController: UIViewController? {
    weak var parentResponder: UIResponder? = self
    while parentResponder != nil {
        parentResponder = parentResponder!.next
        if let viewController = parentResponder as? UIViewController {
            return viewController
        }
    }
    return nil
}

/// SwifterSwift: Width of view.
public var width: CGFloat {
    get {
        return frame.size.width
    }
    set {
        frame.size.width = newValue
    }
}

// swiftlint:disable next identifier_name
/// SwifterSwift: x origin of view.
public var x: CGFloat {
    get {
        return frame.origin.x
    }
    set {
        frame.origin.x = newValue
    }
}

// swiftlint:disable next identifier_name
/// SwifterSwift: y origin of view.
public var y: CGFloat {
    get {
        return frame.origin.y
    }
    set {
        frame.origin.y = newValue
    }
}}

这将为您提供属性检查器中的那些功能

enter image description here

对于第二个问题,UITextField仅是一行,因此请尝试使用UITextView