I want to place a blur effect on top of a view with gradient. When I do so using the UIVisualEffectView combined with the UIBlurEffect light, I get the following result:
As you can see, the navigation bar is very bright. I'd like it to not be tinted with white color, or what this might be, but instead actually just blur the background.
I noticed that when dragging down the notification center / lockscreen on iOS 11, the blur is not so bright, even though the background gradient is exactly the same:
I was thinking this could be done using the tintColor property of UIVisualEffectView, but changing it did not have any effect whatsoever.
Is there any way I can reproduce the blur effect shown in the image above, using standard Swift libraries?
Edit
Since there haven’t been any responses whatsoever, I’m guessing there’s no way to do it natively.
If someone can recommend a good library, I’m open to that too.
Thanks!
Related
I have created a blur effect in Flutter on the bottom tool bar of a scroll list. For this I used BackdropFilter with ImageFilter.blur().
The effect looks nice but I don't like the hard edge between the blurred and non-blurred area. I'd like a gradual transition between sharp and blurred.
I noticed that on the bottom of the screen this effect is somehow already there, you can read the number (see picture below, iPhone 11 sim). Seems to be some bug.
I've tried lots of stuff, anyone any idea on how to create this effect on the top edge?
I am trying to add a thick shadow to a UILabel, without any blur. In photoshop I would use the "Spread" option to make the shadow look like this. It's for a comic book themed UI in an app I am developing. I cannot use images as the text is dynamic and different for each user.
Here is what I am after (on the left) and here is as far as I have gotten so far with CGShadowWithColor (on the right):
Anyone know how I can achieve this result?
A quick hack to try would be to have several black UILabels below the white one, each offset slightly.
I am just playing with an iPhone test app that orients the view when the simulator is rotated left or right. Everything worked fine when my view had a white background, however when I altered the view background to a darker color I noticed a white edge (1 pixel) around the view as it rotates. Has anyone come across this before or know how I might get rid of it. Indeed it might be an issue with the simulator that won't show on the actual device, but I just thought it worth asking for future reference.
gary
I have seen something similar before..
Go through the nib (.xib) files and make sure that all of the views have an appropriate dark background colour set, most notably the nib file which contains the "window". Click on them and set the background colour.
I've never noticed it but then again I've never tried to rotate a very dark view. There might be a small border to keep the view from visually bleeding into the status bars or other views.
Rotation and scaling in the discrete domain( as against analog) is quite difficult, because after a rotation/scaling the rotated location may not be a pixel location. You can suppress the effect by smoothening the edges, but I believe that is not implemented, and so the bug.
I'm trying to place a red tint on all the screens of my iPhone application. I've experimented on a bitmap and found I get the effect I want by compositing a dark red color onto the screen image using Multiply (kCGBlendModeMultiply).
So the question is how to efficiently do this in real time on the iPhone?
One dumb way might be to grab a bitmap of the current screen, composite into the bitmap and then write the composited bitmap back to the screen. This seems like it would almost certainly be too slow. In addition, I need some way of knowing when part of the screen has been redrawn so I can update the tinting.
I can almost get the effect I want by putting a red, translucent, fullscreen UIView above everything. That tints everything red within further intervention on my part, but the effect is much "muddier" than results from the composite.
So do any wizards out there know of some mechanism I can use to automatically composite the red over the app in similar fashion to what the translucent red UIView does?
I managed to somewhat make this work but with some side-effects:
I setup a UIView on top of all my app-views (attached to the window) which is not userInteractionEnabled and which is opaque
This UIView carries some custom drawRect-method which first fills the complete area with red color and then after having made a "screenshot" of my window-viewhierarchy I am rendering this image with
CGContextSetBlendMode( c, kCGBlendModeMultiply);
to the UIView.
To constantly update this UIView to the current state of the apps UIViews I constantly produce "screenshots" and render them as fast as possible.
I setup an NSTimer which is doing this snapshotting/rendering in a defined frequency and which is added to the the NSRunLoop for "Tracking".
RESULT: some really laggy response from the UI with several fancy effects, but still usable though if you do not set the frequency of snapshotting/rendering to high.
See screenshot here...
The result looks okay, but the usability really suffers a lot. I had a look at the OpenGL-examples before trying this aproach, but OpenGL is a whole lot of different (mostly C) code which seems to be very near to the hardware and which gives you a real headache.
So, the described approach is what I will shoot for with my next app. I hope Apple accepts it even though it degrades UXP during nightvision mode. They should simply make CALayer filter-backed then my problem will definitely be solved a whole lot better and performing nicely.
You could try this: subclass UIView. Add code to -drawRect method to draw the overlay. Make your UIView subclass pose as UIView everywhere in your app with
class_poseAs ([CustomUIView class], [UIView class]);
You guys helped so much with my last question, I figured I'd give you a shot at another. I have written an app with a theme that uses a dark blue glassy background and white / gray text and labels. The textfields in my app have clearcolor backgrounds and white texts and everything shows up very well. My only concern is that when you hold down a touch in a text box to get the magnification loupe, of course the white text shows up on a white background... which you can not read. Anybody got any ideas on how to implement a usable loupe here?
Unfortunately, the only "public" way I know how to change the loupe background is by setting textField.backgroundColor
I assume that since you're setting your backgrounds as clearColor, the magnifier defaults to white background, so the only way is to set your backgroundColor as something not clear.
I'm also assuming that since you did mention that you set your backgrounds a clear, that having it not be clear is not an option. So two ways I can think up in my mind about how to get around this is:
Assuming that the magnification lopue gets its background color by calling the backgroundColor implementation (and not some other obscure private API method): override the backgroundColor method and return a solid color.
Create your own loupe (probably not feasible)
I figured out a simple work around that achieved the desired effect. I also went through the full process of making my own loupe but since there is clear documentation on making your own loupe (see kiyoshi's answer), and this other method is ridiculously simple, I decided to document it here. It is basically just faking the clear background so that the white text shows up in the loupe. The background I am using for the view looks like blue smoke on a darker blue background:
alt text http://img231.imageshack.us/img231/9835/beforestatex.jpg
I took a screenshot of the simulator with the textfield visible and a black background so it would show up better:
alt text http://img193.imageshack.us/img193/9023/blackfieldx.jpg
Then I took that screenshot and made it semi transparent in photoshop, and overlayed my original background image to find exactly where the textfield appeared on the background:
alt text http://img266.imageshack.us/img266/9493/transparencyfullscreenx.jpg
Then I copied the exact pixels that would be used as the background of the textfield into a new PNG and saved that and set it as the the background image:
alt text http://img41.imageshack.us/img41/3450/textboxback.png
forwardToField.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed:#"textboxback.png"]];
Keep in mind that the image will be repeated as a pattern within the loupe... so if you don't want to see the edges, simply make sure your textfield is larger than the loupe height and width.
Before:
alt text http://img196.imageshack.us/img196/2672/beforex.jpg
After:
alt text http://img23.imageshack.us/img23/2182/afterxd.jpg
I hope this helps somebody out there!
Actually its pretty feasible to create your own loop. Haven't tried subitting to apple yet so don't know how they feel about it.
Basic idea is override touches, use a timer to see how long the user has been touching the screen. The loupe is just a UIView that grabs as an image the view behind it and magnifies it.
Check out this article from Craftymind here
The article has you cache the entire image behind which is definitely faster, for rendering the loupe, but if you have stuff (i.e. textFields) that are constantly changing I've been able to render the loope image real-time without too much of a performance hit.