Question

我使用Swift 2和Xcode 7。

我想在我的UITextField的背景中模糊。我还没找到属性backgroundView。仅background（用于背景图片）或backgroundColor。

我本来会在后台添加一个视图。但我不知道如何制作UITextField。

你有解决方案吗？

Answer 1

您只能添加某种视图才能使其成为模糊视图。现在的问题是textfields没有backgroundView属性，但它们有一个background属性，我们可以在其中设置UIImage。我们也可以从UIImage

创建UIView

此方法将为传递的UIView创建一个UIImage。

func imageWithView(view:UIView)->UIImage{
        UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
        view.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }

现在我们将使用适用于iOS 8 +的UIBlurEffect和UIVisualEffectView

//only apply the blur if the user hasn't disabled transparency effects
if !UIAccessibilityIsReduceTransparencyEnabled() {
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light) 
    //you can try for more values like .ExtraLight and .Dark

    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = textField.bounds
    blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
    textField.backgroundColor = UIColor.clearColor()

    //Set the blurred image made from blurred view as textfield's background
    textField.background = imageWithView(blurEffectView)
}

适用于Swift 3.0

func imageWithView(view:UIView)->UIImage {
       UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
       view.layer.render(in: UIGraphicsGetCurrentContext()!)
       let image = UIGraphicsGetImageFromCurrentImageContext()
       UIGraphicsEndImageContext()
       return image!
}

if !UIAccessibilityIsReduceTransparencyEnabled() {
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
    //you can try for more values like .extraLight and .dark

    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = textField.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    textField.backgroundColor = UIColor.clear

    //Set the blurred image made from blurred view as textfield's background
    textField.background = imageWithView(view: blurEffectView)
}

这是附件截图

希望这有帮助

Answer 2

你有解决方案吗？

您始终可以在另一个视图的顶部上放置透明文本字段。如果该视图恰好与文本字段具有相同的大小，则它看起来就像文本字段的背景视图。您甚至可以将文本字段设置为“背景”视图的子视图，以便您可以更轻松地将它们移动到一起。

Answer 3

您可以将背景颜色设置为白色，并更改其Alpha值：

{{1}}

可能不完全是你提出的问题，但更容易实施。

Answer 4

Swift 5，Xcode 10：

我通过子类化UIView类来做到这一点，并向其中添加了模糊效果和文本字段：

import UIKit

class BlurryTextField: UIView {

    private lazy var blurView: UIVisualEffectView = {
        let blurEffect = UIBlurEffect(style: .light)
        let blurView = UIVisualEffectView(effect: blurEffect)
        blurView.translatesAutoresizingMaskIntoConstraints = false
        blurView.clipsToBounds = true
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        return blurView
    }()

    lazy var textField: UITextField = {
        let view = UITextField()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .clear
        return view
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.layer.cornerRadius = 10
        self.clipsToBounds = true
        self.backgroundColor = .clear
        setupConstraints()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    private func setupConstraints() {
        self.addSubview(blurView)
        self.addSubview(textField)

        blurView.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive     = true
        blurView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive   = true
        blurView.topAnchor.constraint(equalTo: self.topAnchor).isActive             = true
        blurView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive       = true

        textField.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive    = true
        textField.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive  = true
        textField.topAnchor.constraint(equalTo: self.topAnchor).isActive            = true
        textField.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive      = true
    }
}

然后在您的UIViewController中：

// Create an instance of BlurryTextField
private lazy var blurryTF: BlurryTextField = {
    let view = BlurryTextField()
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()

    // Add the instance to the top of our view
    view.addSubview(blurryTF)
    blurryTF.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    blurryTF.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    blurryTF.heightAnchor.constraint(equalToConstant: 55).isActive = true
}

这是我的方法的预览：

模糊效果 - 背景UITextField

4 个答案: