Make ViewController background Blur - swift

I got UIViewController contain custom navigationbar and an UITableView
I am trying to make all the view background blur so the icons and lable and information show above blur effect
I tried this but the blur effect apply on the icons and information
this code in viewWillAppear
//Background
ChatRoomTable.backgroundColor = .clear
let backgroundImage = UIImage(named: "16.png")
let imageView = UIImageView(image: backgroundImage)
ChatRoomTable.backgroundView = imageView
ChatRoomTable.tableFooterView = UIView(frame: CGRect.zero)
ChatRoomTable.sectionIndexColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.6715271832)
let blurEffect = UIBlurEffect(style: .dark)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = self.view.bounds
view.addSubview(blurView)
Update
I want background like this and every thing show above

#SemarY I got your bug you added image you at wrong place so let me give you code which will help you for your desire output.
//Background
ChatRoomTable.backgroundColor = .clear
ChatRoomTable.tableFooterView = UIView(frame: CGRect.zero)
ChatRoomTable.sectionIndexColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.6715271832)
let backgroundImage = UIImage(named: "16.png")
let imageView = UIImageView(image: backgroundImage)
imageView.frame = self.view bound
view.addSubView(imageView)
let blurEffect = UIBlurEffect(style: .dark)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = self.view.bounds
view.addSubview(blurView)
self.bringSubviewToFront(ChatRoomTable)

Try adding the image to the Content View of the blurView like so blurView.contentView.addSubview(imageView)

Related

Background Color to imageView

I am trying to add a circle background to an image view. But I only see the image without background.
lazy var circle: UIImageView = {
let view = UIImageView()
view.contentMode = .scaleAspectFit
view.image = UIImage(named: "iconsCancelThin")
view.frame = CGRect(x: 0, y: 0, width: 32, height: 32)
view.tintColor = KSColor.neutral700.getColor()
view.backgroundColor = KSColor.neutral700.getColor()
view.clipsToBounds = true
view.layer.cornerRadius = 16
return view
}()
guard let image = circle.image else { return }
self.cancelButton.setBackgroundImage(image, for: .normal, barMetrics: .default)

How to use UITextView text as mask to cutout background in swift?

It is easy to do a background cutout with a normal label, using the following code for example:
var coloredBackground : UIView!
coloredBackground = UIView(frame: view.bounds)
coloredBackground.backgroundColor = .blue
coloredBackground.center = view.center
view.addSubview(coloredBackground)
let imageView = UIImageView(frame: coloredBackground.bounds)
imageView.image = UIImage(named: "image")
coloredBackground.addSubview(imageView)
let label = UILabel(frame: coloredBackground.bounds)
label.text = "stackoverflow"
label.font = UIFont(name: "Helvetica", size: 30)
coloredBackground.addSubview(label)
imageView.mask = label
However I cannot seem to apply it to a UITextView
Here is the desired effect

A Blur on an image

I tried this code on an image to blur it ... using TViOS 10.1 and Swift 3.0
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.extraLight)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = CGRect(x: 256, y: 128, width: 1024, height: 512)
self.view.addSubview(blurView)
With this result... sorry this is not a blur... I am missing something here?
Your code is right, Default blur view in iOS is work like this. You want more light blur view, then you should use any third party frameworks.
I used this code in my project:
#IBOutlet var blurView: UIVisualEffectView!
override func viewDidLoad() {
super.viewDidLoad()
let blurEffect = UIBlurEffect(style: .extraDark)
self.blurView.effect = blurEffect
}
And the result is:
func blurEffect(){
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.blurView.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.blurView.addSubview(blurEffectView)
}

CAGradientLayerHides my UILabel text

I am trying to add gradient background to my labels (which are connected from UserInterface) , but it hides label's text.
This is my code so far:
//MARK: Grdient label func
func gradientBackground(label:UILabel){
let four = UIColor(red: 240/255, green: 240/255, blue: 240/255, alpha: 1).CGColor
let three = UIColor.whiteColor().CGColor
let two = UIColor.whiteColor().CGColor
let one = UIColor(red: 240/255, green: 240/255, blue: 240/255, alpha: 1).CGColor
let gradient = CAGradientLayer()
gradient.locations = [0.0,0.2,0.8,1.0]
gradient.colors = [one,two,three,four]
gradient.startPoint = CGPointMake(0.0, 0.5)
gradient.endPoint = CGPointMake(1.0, 0.5)
gradient.frame = CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, label.bounds.height)
let backView = UIView()
backView.frame = CGRectMake(0, 0, label.bounds.width, label.bounds.height)
backView.backgroundColor = UIColor.clearColor()
backView.layer.insertSublayer(gradient, atIndex: 0)
label.insertSubview(backView, atIndex: 0)
label.backgroundColor = UIColor.clearColor()
label.textColor = UIColor.blackColor()
label.tintColor = UIColor.blackColor()
}
Then I use the function like this:
override func viewDidLoad() {
super.viewDidLoad()
//MARK: Gradient background
gradientBackground(firstLabel)
}
My question is, what is wrong?
Thank you.
check if it is your label "firstLabel" visible
check if your func draw img under the text

Set gradient on UIView partially, half color is gradient and half is single color

Trying to show the progress bar made it custom, took an UIView set it frame to percent of progress. Say 20% of frame width and made gradient but remaining 80% should be white color and text on it defining percentage.
Problems facing is not able to display text set UILabel instead of UIView but text not displaying. Please guide.
Below is what i have tried.
let view: UILabel = UILabel(frame: CGRectMake(0.0, self.scrollMainView.frame.size.height-50, self.view.frame.size.width/5, 50))
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = view.bounds
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
let color0 = UIColor(red:71.0/255, green:198.0/255, blue:134.0/255, alpha:1.0).CGColor
let color1 = UIColor(red:25.0/255, green:190.0/255, blue: 205.0/255, alpha:1.0).CGColor
// let color2 = UIColor(red:0.0/255, green:0.0/255, blue: 0.0/255, alpha:1.0).CGColor
gradient.colors = [color1, color0]
view.layer.insertSublayer(gradient, atIndex: 0)
self.scrollMainView.addSubview(view)
view.text = "20%"
view.textColor = UIColor.blackColor()
view.layer.shadowColor = UIColor.blackColor().CGColor
view.layer.shadowOpacity = 1
view.layer.shadowOffset = CGSizeZero
view.layer.shadowRadius = 2
I cant understand your problem from your question exactly but I will answer based on question title only. To get half color gradient and half single color you have to use three colors gradient and set their locations accordingly :
gradient.colors = [color1,color1, color0]
gradient.locations = [0.0, 0.5, 1.0]
This way you will draw a gradient from color1 to color1 (which in fact is single color) and fill 50% of frame's area with it and a gradient from color1 to color0 that will fill other half of the frame.
I answer to why you can't see the text.
Forget for one second layers and think about subviews. What should happen if you add a subview to a UILabel? It will be on top of the label's content, of course.
So, the same applies to layers. The UILabel draws its text on its main layer, and any sublayer you add to the main layer is on top of it.
My suggestion is to use a UIView with a CAGradientLayer sublayer and a UILabel subview.
Or even better, subclass a UIView in order to use a CAGradientLayer as backing layer (through class func layerClass() -> AnyClass method) and just add UILabel as subview.
Here is an example:
class CustomView : UIView {
lazy var label : UILabel = {
let l = UILabel(frame: self.bounds)
l.text = "20%"
l.textColor = UIColor.blackColor()
l.backgroundColor = UIColor.clearColor()
return l
}()
override class func layerClass() -> AnyClass {
return CAGradientLayer.self
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
private func commonInit() {
let gradient: CAGradientLayer = self.layer as! CAGradientLayer
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
let color0 = UIColor(red:71.0/255, green:198.0/255, blue:134.0/255, alpha:1.0).CGColor
let color1 = UIColor(red:25.0/255, green:190.0/255, blue: 205.0/255, alpha:1.0).CGColor
gradient.colors = [color1, color0]
label.frame = bounds
label.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
self.addSubview(label)
}
}