How do you add a simple two color gradient as background to a UICollectionView. It should cover the whole background and stay fixed even when scrolling the collection view (horizontally).
All layer based solutions I tried so far had issues regarding not covering the whole screen and covering only the initially visible frame. Bonus points for being animatable and not using images ... ;)
What's the best way to do this?
An easy and fast solution is to set the background color of the UICollectionView to 'clear' and add another UIView with the gradient behind it.
Related
This is end end result I want:
And this is the thing I tried initially.
This does not work, the cells below/above the cell with the background will overlap or underlap the background depending on when they are added into the tableview (like via dequeue/scrolling).
I am quite OK with this not working, and I believe I can achieve it by other means. For example by adding these backgrounds as views within the tableview itself and moving them based on the content offset or similar ways, maybe adding a background image that is tall with them embedded.
But. I am curious if there are some easier way, just adding the view into the XIB and applying a rotation would be very nice.
The background should be below the text in the other cells as well - this is where the complications comes in.
Anyway. Is this possible in some super-neat way?
What you should do is setting all cell's background to clear, and to set a background to your UITableView or your UIView.
Or, as you suggest, you can add a UIView with a rotation applied, and add it as a subview of your UIView/UITableView, and send it to back with [self.view sendSubviewToBack:backgroundView].
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.
Right now I have a UIScrollView and a semi-transparent top and bottom bar which go over it. The UIScrollView contains a large UIImageView that is pannable and zoomable.
I want to be able to toggle the image and darken everything around a certain part of the image, but have the transparency mesh perfectly with the top/bottom bars which are semi-transparent. Since the content is scrollable/zoomable, if I darken the image itself, anytime that part goes under the top/bottom bars it will double darken.
I tried to solve this dilemma by creating a smaller UIScrollView that sits nested between the top and bottom bars, and sending zoom/pan commands to it in an attempt to mirror the UIScrollView below it, but that didn't work too nicely. It was a nightmare trying to sync the animations (I tried copying over the zoomScale/contentOffset in zoomDidScroll, sending the zoom/pan animation to each UIScrollView individually, using KVO, etc).
Is there any way I can set different frame sizes/cut-off points for each individual layer? Or perhaps each UIImageView subview? I'm open to any other proposed solutions as well, this has really been driving me up the wall. I appreciate the help.
What it's like before toggle:
What I want after toggle:
Why not cover the "center" part with another semi-transparent view to match the tool bars, then use a mask on the layer to make the part of it you wish fully transparent?
I have a weird issue:
I have a UIScrollView whose background is transparent. Inside of it there are a few UILabels also with a transparent background and with a custom font.
When the scrollview is first displayed everything looks sharp and good but as soon as I start panning the scroll view, the text of the labels gets extremely pixelated.
This does not happen if i set an opaque background to the labels.
Do you have any idea what might be causing this?
This sounds like you may be adding several layers of the identical UILabel on top of the others on scroll. Place a debug breakpoint on the code that adds it to your content, and ensure it is only being called once.
The "pixelation" could be caused by the overlapping of anti-aliasing pixels.
I have a UIScrollView over an image at the bottom of my app that acts as a dock with icons that can be scrolled through horizontally. Instead of the harsh edges of the UIScrollView, I would like the icons to fade out for a more aesthetically pleasing look. Being new to iOS development, I don't know if either of these would be valid options:
Create a faded image to use as an overlay on the scrollview so the
icons only appear through the visible portion.
Actually change the
alpha of the images based on their distance from the center (or from
each edge).
I suspect the first idea would be the most simple, but I'd like to throw this out there for any other ideas.
Note: I did see this tutorial, however that technique assumes that the background is a solid color. If I were to do it programatically, I would probably need to fade the individual images.
You can definitely implement something along the lines of #2. It'd be something similar to what the tutorial describes. The alpha transition however won't be as smooth as using the gradient layer mentioned in the tutorial or using an image since the entire icon would have the same alpha. How much discernible the difference is depends on the size of your icons. Smaller icons, very few will be able to tell the difference. Larger icons the difference would be quite clear.
You'd have to implement the
(void)scrollViewDidScroll:(UIScrollView *)scrollView
method in your scroll view's delegate class. This method will get called every time the scroll view changes the location of its content. In this method you can call its subviews and adjust their alphas as required. To optimize it a bit instead of calling the alpha adjustments on all the elements you can just update the subviews which are still partially/completely visible.
EDIT: to figure out which views to adjust you'll use the contentOffset property of the scrollView that gets passed as a parameter in the above method.