[英]Blur effect - Background UITextField
我使用Swift 2和Xcode 7。
我想模糊我的UITextField的背景。 我還沒有找到一個屬性backgroundView
。 僅background
(用於背景圖像)或backgroundColor
。
我本來是要在后台添加視圖的。 但是我不知道如何制作一個UITextField。
你有解決方案嗎 ?
您只能添加某種視圖以使其成為模糊視圖。 現在的問題是,文本字段沒有backgroundView屬性,但它們確實具有background屬性,我們可以在其中設置UIImage
。 所以我們也可以從UIView
制作UIImage
此方法將為傳遞的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)
}
這是所附的屏幕截圖
希望這可以幫助
你有解決方案嗎?
您始終可以將透明文本字段放在另一個視圖的頂部 。 如果該視圖恰好具有與文本字段相同的大小,則它看起來就像文本字段的背景視圖。 您甚至可以使文本字段成為“背景”視圖的子視圖,以便您可以更輕松地將它們一起移動。
您可以將背景色設置為白色,並更改其Alpha值:
myTextField.alpha = 0.5;
可能與您的要求不完全相同,但是易於實現。
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
}
這是我的方法的預覽:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.