Transparent blurred view is not working - ios

I'd like to apply layer on top of ImageView that slightly blurrs it.
I put a view on top of imageView, subclass it as follows:
class BlurredView: UIView {
override func draw(_ rect: CGRect) {
self.backgroundColor = UIColor.clear
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.extraLight)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.backgroundColor = UIColor.clear
blurEffectView.frame = self.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.addSubview(blurEffectView)
}
}
The result is quite different from what I expected.
How to customize it to make this blur much lighter, so the picture still shows some details?

As https://stackoverflow.com/users/1387306/chrstpsln mentioned in the comment, this can be achieved by changing the alpha of the UIVisualEffectView.
As a bonus, you can add a fade animation to make the transition feel smoother.
Heres an example of how you can add this effect to any viewController through an extension:
extension UIViewController {
func addBlurEffect() {
let blurEffect = UIBlurEffect(style: .light)
let blurVisualEffectView = UIVisualEffectView(effect: blurEffect)
blurVisualEffectView.frame = UIScreen.main.bounds
blurVisualEffectView.alpha = 0.1
// Bonus animation - Or just set the alpha higher
UIView.animate(withDuration: 0.3) {
blurVisualEffectView.alpha = 0.90
}
view.addSubview(blurVisualEffectView)
}
}
Usage:
let viewController = UIViewController()
viewController.addBlurEffect()

You can't change the blur amount, the only thing you can do is to change the blur effect style:
UIBlurEffectStyle.light
UIBlurEffectStyle.extraLight
UIBlurEffectStyle.dark
Try to change the blur effect alpha. Also, since your image is light, you should use the light style and not the extra light in order to not lose details.
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
blurEffect.alpha = 0.95

Related

How to reduce the quality of the text inside UITextView with Swift

I'm trying to reduce the quality of a message before its being sent, for example if the connect is poor I want to blur out the text in the UITextView and if connection improves or internet comes back, then remove the blur and show the normal text in the UITextView. I have tried using CATextLayer doesn't work. Is there a way I can achieve this?
cell.messageTextView.text = theText
let textLayer = CATextLayer()
textLayer.string = cell.messageTextView.text
textLayer.contentsScale = 0.2
cell.messageTextView.layer.addSublayer(textLayer)
You can drop the quality of the layer by making it rasterized and reducing the scale of it:
let badQualityRatio: CGFloat = 4
textView.layer.shouldRasterize = true
textView.layer.rasterizationScale = UIScreen.main.scale/badQualityRatio
Result:
you can set the rasterizationScale any number between 0 and UIScreen.main.scale
You could try something like this:
let blurEffect = UIBlurEffect(style: .systemUltraThinMaterial)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = cell.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
cell.view.addSubview(blurEffectView)
Adding a UIVisualEffectView with blur effect on top of your table view cell.

Swift mask UIView constraints issues

I've created a mask view for my camera screen that blurs everything except for a small rectangle in the middle. I'm having issues when testing on different screen sizes. I'm testing on an 11 Pro and an 8. If my storyboard view has the proper device selected, the constraints look fine on the device. But if I switch phones without changing in the storyboard, it is incorrect. I'm programmatically creating the mask view. Any help would be much appreciated!
func setupBlur() {
if !UIAccessibility.isReduceTransparencyEnabled {
blurView.backgroundColor = .clear
let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = blurView.bounds
blurEffectView.translatesAutoresizingMaskIntoConstraints = false
blurEffectView.addConstraints(blurView.constraints)
blurView.addSubview(blurEffectView)
let maskView = UIView(frame: blurView.bounds)
maskView.translatesAutoresizingMaskIntoConstraints = false
maskView.addConstraints(blurView.constraints)
maskView.backgroundColor = .clear
let outerbezierPath = UIBezierPath.init(rect: blurView.bounds)
let croppedOriginX = (blurView.bounds.width / 2) - (captureView.bounds.width / 2)
let croppedOriginY = (blurView.bounds.height / 2) - (captureView.bounds.height / 2)
let frame = CGRect(x: croppedOriginX, y: croppedOriginY, width: captureView.bounds.width, height: captureView.bounds.height)
let innerRectPath = UIBezierPath.init(rect: frame)
outerbezierPath.append(innerRectPath)
outerbezierPath.usesEvenOddFillRule = true
let fillLayer = CAShapeLayer()
fillLayer.fillRule = kCAFillRuleEvenOdd
fillLayer.fillColor = UIColor.green.cgColor // any opaque color would work
fillLayer.path = outerbezierPath.cgPath
maskView.layer.addSublayer(fillLayer)
blurView.mask = maskView;
}
}
This happens because when you call setupBlur() from viewDidLoad, at the beginning blurView.bounds values are from stroyboard which you're working on it, and you are using these bounds to setup blurEffectView.frame before they are adjusted for your device's screen.
This is not the best solution, but I hope it will resolve your problem.
Try this:
override func viewDidLoad() {
super.viewDidLoad()
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
self.setupBlur()
}
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
self.setupBlur()
}
In my case, I've tried viewDidLayoutSubviews() instead of DispatchQue but it didn't work. However, viewDidLoad() worked for me.
override func viewDidAppear() {
self.setupBlur()
}

How to make the UIImage edges softer?

I have a UIImage with a UIVisualEffectView on top of it. I want to make the edges softer to give it a shadow effect.
I tried playing around with maskToBounds but it doesn't make a difference.
let weekndImage = UIImage(named: "weeknd.jpg")
let weekndIV = UIImageView(image: weekndImage)
weekndIV.frame.size = CGSize(width: 200, height: 200)
let blur = UIBlurEffect(style: .light)
let blurView = UIVisualEffectView(effect: blur)
blurView.frame = weekndIV.bounds
weekndIV.addSubview(blurView)
weekndIV.layer.cornerRadius = 10
weekndIV.layer.masksToBounds = true
move these two lines after setting the blurView frame and before adding blurView to weekndIV view
weekndIV.layer.cornerRadius = 10
weekndIV.layer.masksToBounds = true
I think you want to have a shadow effect on your view. For that you can access shadowOpacity and shadowRadius from layer of your view
For example in Swift 2:
class MyView : UIView {
override func awakeFromNib() {
layer.cornerRadius = 5.0
layer.shadowOpacity = 0.8
layer.shadowRadius = 5.0
layer.shadowOffset = CGSizeMake(2.0, 2.0)
}
}

Change color of the shadow in background

I`ve a App like the iOS 10 Maps-App or maybe like the Home-Screen with Control Center. For example take a look at the Picture. If you open the Control Center the shadow of the background changes to black & transparent. How can i access this layer or subview and change the color from this shadow to another in my App. Maybe to red or white?
EDIT:
Maybe directly with the Framework.
https://github.com/iosphere/ISHPullUp
You can use UIVisualEffectView like this:
Obj-C:
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];//SELECT STYLE OF YOUR CHOICE
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
blurEffectView.frame = self.view.bounds;//view Will be YOUR_VIEW
blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:blurEffectView];//This add Blur view to your view
Swift:
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.view.addSubview(blurEffectView)
Sometimes open your eyes and you will find what you want. 😕 If you using the same Framework there is one variable you can change. In the sample of the Framework you can got to the "BottomVC" and add the following line to your viewDidLoad().
weak var pullUpController: ISHPullUpViewController!
override func viewDidLoad() {
super.viewDidLoad()
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTapGesture))
topView.addGestureRecognizer(tapGesture)
handleView.arrowSize = CGSize(width: 1 , height: 2)
//This line change the default 40% black to a 70% white.
pullUpController.dimmingColor = UIColor.white().withAlphaComponent(0.7)
}
The "Shadow" is just a normal View. Here you can see how the author has implemented this.

Add blur effect to image Loading from URL

i want to blur image before displaying which is loading from URL.
I have made an extension method for UIImageView to achieve this, you only need to call it once:
import Foundation
import UIKit
public extension UIImageView {
func blurImage() {
let darkBlur = UIBlurEffect(style: UIBlurEffectStyle.Light)
let blurView = UIVisualEffectView(effect: darkBlur)
blurView.frame = self.bounds
self.addSubview(blurView)
}
}
Suppose you try to add blur effect to an ImageView , then
Assign downlaoded Image to ImageView
imageView.image = .. code for download image and assign image to imageView.
Then add blur effect
var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
visualEffectView.frame = imageView.bounds
imageView.addSubview(visualEffectView)

Resources