Background : I am stacking a couple buttons and a label within a view over an image with some visual effect views for blurring.
Conundrum : The text in the buttons and in the label are pixelated while other text is crisp and sharp. It's almost as if the label and buttons have been converted into a badly rendered image.
DoneDid :
Put the buttons and label in it's own view.
Put the view with label and buttons outside of the Visual Effects view stack.
Played with the font, scale, various other settings.
Set the background of the "Inventory Details Bar" to a solid color to check for potential FX leaking up to the overlying view.
Looked all over for "blurry text over visual effect view" and several variations of the sort. Nothing that quite matches my current experience.
As always, this community is awesome and I appreciate any ideas that might break through this visual odditiy.
Inventory Type label is the thing we are looking at
Label details (tried several fonts, not just Arial)
Blurry "Inventory Type" label
3 hours researching,
post for help...
Found the issue a moment later.
Ok, so the view that contains the image stack with blurring effects, including the label and the background images, has a shadow that I throw over the scrolling cells below it.
In looking for a solution to dealing with the layer shadow, someone had mentioned rasterizing the whole view to make it more efficient. Which means.... it turns the whole view and its contents into an image of sorts to lower processing resources.
It was...
(detailedImageView being the name of the parent UIView)
detailedImageView.layer.shouldRasterize = true
I changed it to "False" which is the default for this parameter and BAM... sharp and crisp text.
I hope this helps someone.
Related
sorry, if this might been asked before.
I am laying out a viewcontroller for a new app. It will include a photo (UIImageview) which fills the nearly all of the screen and it should include a scrollable UITextview which should fill the bottom right corner of the screen and including a description of the photo.
So i have two views over one space and i would like to give the Textview priority over the UIimage. Is there any other way then reducing "Alpha" of the UIImage to make the Textview visible ? Tinkered around with Conten Hugging Priority and Content Compression ... to no avail.
Any help would be appreciated
Thanks
The easiest way to make sure text is easily readable over any image, I suggest setting a background of color rgba(.2, .2, .2, .8) or something similar and then using a white font color.
Thanks everybody for trying to help me out... I have found the solution... It is perfectly ok to overlay Views in Interfacebuilder but then it is imperative to use a background color for the overlaying textview with reduced opacity.
How can I draw a little triangle above the selected item in a UISegmentedControl? Does anyone know an open-source than extends it?
(if not - pointers of how to do it)
Design should look like (this is in the bottom of the screen)
I don't believe there's a native way to do that. You can either find a library that allows for it, but you can do it yourself fairly easily, which I recommend.
I can think of a few out of the box ways to approach it, here at the two I think worth mentioning off the bat:
1) Use UISegmentedControl with images. Make the segmented controller have a height that includes the triangle, and have an image for selected and normal states that shows what you want. The Normal states would have a rectangle of transparency on top, as wide as the entire image and as tall as the triangle. The selected image would include the triangle. Both images should end up the same width and height.
2) Subclass UISegmentedControl and do some custom drawing in drawRect:. You could draw the triangle outside (above) the bounds of the segmented controller, make sure to set the segmented controller's clipToBounds property to NO, as well as its layer's masksToBounds property.
If you'd like more help, or some other suggestions, just ask.
I have a UIVisualEffectView with a UIBlurEffect effect as a pinned UICollectionViewCell in a UICollectionView.
The blur is masked with an icon so that the icon appears in a subtle shimmery way, responding to whatever it is drawn on top of.
The effect is on top of the collection's background. As it stays pinned and the varying background scrolls underneath, it gently changes to reflect the background and looks very nice.
However, except for the collections's scrolling background, most content is drawn in front of the blur effect. This is necessary because that other content is more important and shouldn't be obscured.
Even though it is behind the more important content, I'd like the effect view to reflect the content that is scrolling in front of it. Any suggestions for how this might be made to work?
Ideas:
Could I grab a chunk from the previously drawn frame and draw this under the effect view? How would I do that?
Could I render the whole collection view, apply the blur, and then render everything that should be on top of the blur a second time? How can I make that efficient?!
Thanks.
I went with a slightly refined version of the second option.
I added some duplicate cells to the collection view that are rendered behind the blur, and then also in front. I've only done this for one of my cell types with lots of colour in it. It works pretty well.
If you have a better approach I'll happily assign you the correct answer.
I have subclassed and am using UIPopoverBackgroundView in order to make custom appearances for my UIPopoverControllers. Everything seems to work great so far, the popover draws well and looks the way I expect it.
The issue is that, when my popover is left open for a period of time with no activity, the border will often suddenly be drawn wrong. This specifically seems to only happen when the popover contains a scrollview/tableview which is larger than the popover (i.e. it is scrollable). It also doesn't happen every time, but if it does happen, it occurs in less than one minute of inactivity. If I take a screenshot, the issue is not visible (despite it clearly being seen on screen) so I can't provide any images of the issue unfortunately.
Does anyone know of any reason why the border would be drawn incorrectly after several seconds of inactivity and how to fix the issue? I can provide snippets of code if necessary, though I'm fairly certain everything is right (and equivalent to the many examples I've seen online). I also do not resize the popover at any time during the inactivity (I do resize when initially displayed to fit the content up to a maximum size).
Since I can't take a screenshot to demonstrate the issue, the best I can do is describe it. It appears as if the border in certain areas is drawn at the wrong size (as in, part of the right edge is being drawn in the middle of the popover; NOT that the border itself is too wide, but rather that the area the border should be bordering is wrong). The area along the actual edge is still there, but is lacking it's layer effects (I have the backgroundView using a border and rounded corner layer effect to give it a nice rounded white edge, emulating the same appearance as the default background view, just a different color). Removing the layer effects does not prevent the issue though. Sometimes it's only a part of the right edge which is drawn incorrectly, sometimes part of the bottom edge is also affected. I can't seem to find any correlation as to when or how this happens (though it is frequent), nor to which edge is affected (though I've never seen it affect the top or left edge).
Does it only happen in the simulator or also on a real device?
This specifically seems to only happen when the popover contains a scrollview/tableview which is larger than the popover (i.e. it is scrollable)
Do you resize the scrollview / tableview in this case? Try adding a UIView inside your UIPopView that would be the container.
If you look at the button/label titled "Address" you'll notice a little speck of white in the corner. This speck of white only occurs when the user starts scrolling the tableView, which is located underneath the searchbar.
I can only guess that the modal border kills all transparencies while scrolling.
This is an iOS issue with regards to scroll view and is seen in many places - no solution other than you reducing or creating some offset for the tableview.
this artifact could be caused by a variety of different things. The first things I would check when seeing these things is that all of the UIViews (and there subviews) that overlap this area
A. Have a background color with an alpha value of 0
B. Have "Cear Graphics Context" turned off in Interface Builder (or corresponding flag in code)