UICollectionView flickers thin "see through" lines between cells when scrolling - ios

I have a UICollectionView with cells that are filled with a background image. The collection view has line spacing = 0.
This has been working perfectly well on iOS 6.1, but when tested on the iPhone 6 with iOS 8.1.3 I see thin "see through" lines appearing spontaneously between cells on collection view load, and then they are jumping around when scrolling.
So, how do I get rid of these lines?

I found a solution: make sure that all cells have "Clip subviews" unchecked. I guess this must be a bug, as the solution doesn't make sense, but it solved the problem.

EDIT* - This is actually caused by the app's deployment target being set as iOS7. When I switch to ios8, the problem goes away.
Sounds like you need to update your app to properly support iPhone 6/6+ screen sizes. One of my apps has this problem.
You'll need to go to your project settings and set a launch screen file so that it knows to show your app at actual size on the iphone 6/6+; otherwise, it will just show a scaled view of what one sees on the iPhone 5s.
I'm assuming this happens because the scaling from iphone5 to 6/6+ isn't exactly 1:1 pixel ratio. For example, because of imperfect scaling, a line at y:50 might be 1 pixel tall, but at y:51 it might be 2 pixels tall, which when scrolling causes a noticeable flicker.

I had the same problem, but it also happened on iPhone 4 with iOS7 (not only on iPhone 6 with iOS8.1). "See through" lines appeared between my section header and between the cells, some of them were permanent, others could just blink or disappear when I scrolled the view.
I could solve it expanding the background of my section header and cells by two pixels (in the bottom) and setting both views to not clip its subviews, as Lukas Kalinski suggested. Disabling clipping alone didn't work.
This worked for me, but it's kind of a hack. Not sure why iOS is presenting this behavior. I feel like we're still missing something.
I didn't try the suggested answer because I need to support iOS6+ and I can't stop using the iPhone 6 scale mode.

Check if the width and height of your collection view is an exact multiple of the widths and heights of your cells.

Related

Why is iOS simulator displaying blank screen when I rotate device?

Getting through some introductory swift and playing with Xcode and I basically just have a page with some color squares, background color etc. Doesn't do anything. Problem is when I compile the code it will run in simulator just fine and show everything perfect, BUT when I rotate the device, everything disappears and it only gives me a blank white screen. Rotating right or left does it. The only view that shows it is the original upright view (for all iPhone devices that I tested on through the simulator).
Xcode 6.1.1 and iOS Simulator 8.1 are being used on my MacBook Air with OSX 10.9.5.
In the App general page, I have already checked under Deployment info that Landscape Right and Left are both checked on. Storyboard is set on Any H and Any W.
I'm not sure what I'm doing wrong and it has been pretty difficult searching since I'm still new to iOS development I'm not sure I'm using the right words or whatever because I can't find an answer.
Summary:
App displays properly in iOS Simulator, Portrait View but no other views work and will display blank white screen instead.
In order to see if your views are actually being drawn and just off screen as others have suggested capture the view hierarchy. Go to 'debug' in the menu, then in 'view debugging' click capture view hierarchy. This will pause your app and create a 3D representation of all view on your screen which you can move around by clicking and dragging.
Are your views actually being drawn? If yes are they drawing off screen? If yes then you need to fix your constraints.
It sounds like you haven't set your constraints appropriately. Try setting the top and leading constraints for each of your views to something less than 320 (should cover all device sizes). Fix your warnings, then try again. I believe the views are simply off the screen.
You don't have the correct auto-layout UIConstraints set in interface builder. Check the document outline view in interface builder and ensure that you have appropriate constraints set on each view.
Auto Layout issues occur when you create conflicting constraints, when you don’t provide enough constraints, or when the final layout contains a set of constraints that are ambiguous.
Check this Apple documentation out, it will show you step by step how to resolve your (common) issue.

iPhone 6/6 Plus: UITableView separator flickering and different thickness

I've got a UITableView with separator set to Single Line.
On iPhones <= 5s everything looks fine, but on 6 and 6 Plus (device as well as simulator) the separators have a different thickness. It's even worse as they're flickering while scrolling which looks pretty bad. I don't set the height manually, so I have no idea what's causing this.
As you can see, the first two lines are a little bit thicker than the next two. Now if I scroll, they change from thick to thin and back, so it looks like flickering...
The problem is that your app doesn't support native resolution for the iPhone 6 and iPhone 6 Plus. Therefore it gets scaled up which results in the flickering.
You can enable native resolution by adding iOS8 launch images. Then your app will run in the right resolution and this problem will be fixed.
Add
Renders with edge antialiasing: YES
In you .plist file
Aqua is right, the thickness and flickering problems go away if you add iOS8 launch images.
But you don't need to make actual launch images if you are using storyboards. In Xcode, select your overall project and your app target, then under the General tab find App Icons and Launch Images, then in the Launch Screen File popup, just select your storyboard and the thickness/flickering problems go away.

Buttons sized incorrectly on iOS8, correctly on iOS7

I solved this before posting, but I'm sharing this anyway just in case it helps someone else.
I'm having a problem with certain buttons sizing incorrectly on iOS8. They are coming out too tall, too wide, and the label is vertically misaligned. Interestingly, though the button is x-centered on the signin view, it maintains alignment on the left side. I'm still building on Xcode 5/iOS 7 as we have some higher priority issues we need to get out and building against iOS 8 breaks more than this. Are there different constraints I can apply here?
I've included the background image slicing also. It is 66x87 px, but the button is getting sized to 72px tall, so I'm not sure it is be related or not.
The problem here was that I did not have an #2x image for the button background. The button background is just a flat color so there was no real need for an #2x before.

portrait layout wont scroll in landscape orientation

Im quite new to XCode and Interface Builder, so forgive me if the solution is obvious.
I have designed a nice portrait IPhone view in interface builder (XCode 5) and have set the constraints on each of the elements (labels, text views, switches, buttons etc) so that they are positioned correctly in either 3.5 or 4 inch portait mode in the simulator.
However, when I rotate the simulator to landscape it breaks the design with elements overlaying each other and other elements disappearing (being clipped from the view) - and I expected this.
My idea of a solution is to put all of the UI elements inside a UIScrollView and set constraints on the scroll view so that it fills the screen in either portait of landscape mode.
After doing this, the portrait view is as before in the simulator, but in landscape view nothing scrolls, and none of my UI elements respect their constraints (stretch horizontally etc). Im still losing UI at the bottom and I cant scroll it into view.
I assumed that putting everything into the scroll view would simply 'fix' this issue, but the scroll view seems to do absolutely nothing at all. I have fiddled with various settings in interface builder but nothing fixes this.
There seem to be lots of long-winded solutions to this type of scenario based on code, but surely something this simple and common should just 'work'
What am I missing, or what have I done wrong, or does simple scrolling really have to be extensively coded in order to work ???
Putting all of your elements inside a scroll view won't really solve anything. Those elements would still need constraints to know how to position themselves in the scroll view. You need to be careful as well, as this solution sounds like something that goes against apples human interface guidelines. I'd advise against ignoring those, as Apple are known to reject apps that do this.
I'd say your problem is your constraints simply aren't setup correctly if elements are cover other elements and moving into the wrong places when rotated.
Annoyingly the WWDC videos section of the developer site is still down, but when it's back up, have a watch of the video of autolayout in Xcode 5, it will help explain what's going on.
If you want elements to completely change position when rotated however, you're likely to need more than just constraints, and would need to throw in some code to handle the transition between portrait and landscape. So it really depends on what the view is supposed to do when you rotate the device
OK, Ive figured it out. It IS a bug in either XCode 5 or IOS 7
I created 2 simple iphone UI's in interface builder - one in Xcode 4.6.3 targeting IOS 6.1 and the other in XCode 5 Beta 4 targeting IOS 7 beta 4.
The first app ran entirely as I had assumed, with the scroll view scrolling in landscape mode. The second app had no scrolling at all in the scroll view - so obviously a bug.

How to make controls in view not overlap if built by Interface Builder for Xcode 4.5 and iPhone 5?

I am using Xcode 4.5 and iPhone 4 and 5 simulator, and the Interface Builder would add a UIButton in the top half of the screen with a top constraint, and add a UIButton in the bottom half of the screen with a bottom constraint.
It works fine on an iPhone 5 simulator, but on the iPhone 4 simulator, the buttons can overlap, or the bottom button may even get positioned above the top button.
I think it is due to the constraint, such as the bottom button "must be 250 points away from the bottom margin". I can't delete the constraint, and if I change it to "250 points or less", it won't work, if I change it to "250 points or more", it won't work either.
Is there a way to:
1) Make it have no constraint, but just position at absolute x and y? (or what about the spring in the past, so that everything is more spaced out in iPhone 5?)
2) Make the NIB into a one for iPhone 4 and 4S only, so that the app works well on iPhone 4 and 4S and just "black barred" on the iPhone 5.
3) Make it work well on iPhone 5 and work well on iPhone 4 as well?
If you know solutions to only (1), (2), or (3), above, please give it regardless, as it is still a viable solution for the transition period.
It is actually very easy to reproduce: Create a simple Single View app using Xcode 4.5, and drag one button just above the center point of the screen, and another one just below the center point of the screen. Then run it on the Simulator. On iPhone 5, it is:
And now stop the app, and change the Device in the Simulator to iPhone 4S (3.5 inch Retina). If you don't stop the app first, the Simulator can crash. Now run the app again, and the buttons will overlap:
I had the same problem, and it was due to a wrong settings for autosizing. To change the autosizing, click on the control in the interface builder, go to the size inspector.
Notice the bold red I's in the autosizing grid, they control placement when the screen is resized (like when going from iPhone 3GS to iPhone 5.
I think it will work best for you if you make your autosizing look like this:
I'm not sure, since I haven't used constraint-based layout (and won't until we drop support for iOS 5). Traditional NIB-based autoresizing will do absolute coordinates.
You can't do that for just one screen, as far as I know — you can disable it for your whole app by removing Default-568h#2x.png.
I'd go for programmatic layout, or if you want the easy way (which will be a pain to maintain), different nibs for different screen sizes. Note that you'll want to correctly handle the in-call status bar too...
EDIT: Put the two buttons in a container view and make the constraint center the container inside its parent? It won't adjust the spacing between buttons, but should look okay on both devices.
Select your buttons and add "vertical spacing" constraint for them. And set "less than" for top/bottom margins.

Resources