An issue with our collection view that displays the user's camera roll has appeared specifically on the iPhone 13 Pro. This includes the simulator and real device.
The layout of the cells is acting like there's a missing column in the collection view. This bug does not occur on models prior such as 12 Pro Max or SE 2nd gen.
The layout I am using is the "UICollectionViewFlowLayout" or "Flow" layout. I am wondering if this is an iOS 15 or Xcode 13 issue, or did something change elsewhere.
Here are some screenshots that showcase the issue:
iPhone 13 Pro:
iPhone 12 Pro Max:
The same code renders both of these outputs...
What could be causing this problem or where to look?
UPDATE:
The width is calculated properly:
let numberOfColumn = CGFloat(configure.numberOfColumn)
let width = (view.frame.size.width - (5 * (numberOfColumn - 1))) / numberOfColumn
As you will see in the following ss, when I select a cell (orange bordeR) it is normal size, the cell size doesn't seem to be the issue. When I click on the empty space in the middle, it does nothing, there is no cell there.
So it was the cell size being off by a fraction!
let count = CGFloat(configure.numberOfColumn) // value is always 3
let width = floor((view.frame.size.width - (5 * (count - 1))) / count)
Calling floor() on the width fixed the issue, 3 cells can now fit in screen width on 13 Pro and other models.
Related
I'm using VNRecognizeTextRequest via VNImageRequestHandler with following settings:
request.recognitionLevel = .accurate
request.usesLanguageCorrection = false
request.recognitionLanguages = ["en-US", "de-DE"]
I'm using real time capturing from AVFoundation, then converting CMSampleBuffer to CVPixelBuffer and send it to VNImageRequestHandler.
Basically the code is taken from Apple sample:
https://developer.apple.com/documentation/vision/reading_phone_numbers_in_real_time
The thing is it was working well until iOS 15 came. Then it stopped recognising the text with following errors:
Could not determine an appropriate width index for aspect ratio 0.0062
Could not determine an appropriate width index for aspect ratio 0.0078
Could not determine an appropriate width index for aspect ratio 0.0089
...
Generally I was able to partly fix it by changing recognitionLevel from .accurate to .fast. But I prefer the first more as it gives better results and sometimes .fast recognises only individual characters from words, e.g. if there is a number with spaces like "7 2 5 6" it can recognise only 7 or 2 and so on.
Thanks in advance for suggestions.
I have an app I'm building and I recently made the screens I have so far scale automatically based on screen size so that they can fit multiple devices and so that I can test them on my device (iPhone 7 Plus). I did that and it worked fine but then I wanted to test it on a smaller screen and see how it goes, on the iPhone 6s emulator the app had render flex overflows, after changing any sized boxes i had to set their size based on their (original size / size of container on iPhone 12 Pro Max) * current container size and it barely worked (i was building the app on the iPhone 12 Pro Max emulator). Any smaller screen sizes won't work and that is because the elements them selves don't scale because the text size is too big (e.g. text form fields and buttons don't scale down because text size remains the same).
I saw this (Flutter: How can I resize text based on device's screen size) and was going to try it as a potential solution as that is how I rescaled the containers on the Welcome/Authentication screens but wanted to see if there was an eaiser or built in solution that Flutter has that would be easier to implement.
iPhone 12 Pro Max:
Welcome/Authentication Screens: https://cln.sh/asdQyc
Settings Screen: https://cln.sh/yQSM5o
iPhone 6s:
Welcome/Authentication Screens: https://cln.sh/mZZZ2F
Settings Screen: https://cln.sh/oUss9m
Thanks for the help!
Edit: Also using the solution in Flutter: How can I resize text based on device's screen size makes the text too small but I can't make it bigger because then it would be too big on bigger screens.
You can use an if-else condition too. It worked for me when I was very specific about size of text. I used both height and width to calculate my text size, like -
if(height<A && width<B) {
size = MediaQuery.of(context).size.width*MediaQuery.of(context).size.height*(some ratio)
}
if(height>A && width<B) {
size = MediaQuery.of(context).size.width*MediaQuery.of(context).size.height*(some ratio)
}
if(height<A && width>B) {
size = MediaQuery.of(context).size.width*MediaQuery.of(context).size.height*(some ratio)
}
if(height>A && width>B) {
size = MediaQuery.of(context).size.width*MediaQuery.of(context).size.height*(some ratio)
}
I was using android, so it was a bit longer, but i-phones have very less range of varieties in sizes, so 4-5 statements would be more-than enough.
Or, if you wish to go even further, make a linear or logarithmic function by using appropriate values of size, height and width
I am loading a view (shaped a circle) from a circle. I want to make sure, the circle's size adapts to various screen sizes. So far I tried placing the view inside another view, pinning the margins to the superview and then setting the superview's aspect ratio to 1:1. This gives me a circle. However, now, I want to change its size. Currently, the superview's size is specified by another subview in it, a label. Depending on the contents of the label, the superview's size changes (I have set the label's font size to Autoshrink). If I try to add a constant to the margin constraints it works, but looks the same size across different screen sizes. Also, I tried adding a multiplier, while the multiplier works for trailing and bottom margins, top and leading margins don't get affected by setting the multiplier. Below is a screenshot of the IB (Today View is the shape in the question).
You have a good start - aligning both center X & Y, 1:1 ratio. All you need to add is two sets of top/bottom and leading/trailing constraints with different priorities. Here's an example, which combined with the three constraints you have, would center a view in all orientations with a 10 point border along the narrower axis:
Priority == 750
Top == 10 points
Bottom == 10 Points
Leading == 10 points
Trailing == 10 points
Priority == 1000
Top >= 10 points
Bottom >= 10 Points
Leading >= 10 points
Trailing >= 10 points
You may see errors/warnings while doing this because IB doesn't know how to render it, but once you've completed this, you'll have what you need.
EDIT:
From memory, there are points and pixels. When and where possible, try to think in terms of points. About the only time you may wish to think in terms of pixels is with images. (There may be other measurements of graphics, but again, I'm writing from memory.)
Points should be consistent across device size - so if you have a 100x100 square in a 4 inch iPhone screen, it will be the same size on a 12.9 inch iPad Pro.
More importantly, the margins can be set the same using auto layout. A 25 point margin will be the same on both of those screen. So in my example above, you will get pretty much the largest rectangle possible across all devices since you are setting margins, not view size.
I did a dive into screen sizes last year, and these are the current screen sizes:
//iPad Pro 1366x1024
//iPad 1024x768
//iPad Mini 1024x468
//iPhone 6 Plus 736x414
//iPhone 6 677x375
//iPhone 5 568x320
//iPhone 4 480x320
So based on this the above constraints would yield a 300x300 square on an iPhone 4 (iPhone SE also) as the narrowest axis will be 320 less two 10 point margins. And on an iPad Pro 12.9 inch it will be a 1004x1004 square.
When you create constraints in code, you can also create a layoutMarginGuide with this code:
let margins = view.layoutMarginsGuide
This should be the same thing as keeping the "contain to margins" checkbox checked in IB. Essentially this is the recommended size of margins for each device. (I believe this should also include the status bar, tab and navigation bars, and even the iPhone "phone call top banner (sic)". But I've had some issues with this so YMMV.)
EDIT 2:
Putting this all together, what you are defining through "auto layout" is a very fluid way of maximizing the size of a square (or in your case, a square turned into a circle). By setting two sets of margins, one set equal to but with a high priority, you are letting auto layout know that it may break this over required constraints. The second set with greater than or equal to values is required.
Thus, in a 480x320 device, the top/bottom margin constraints that cannot be met ("equal to") can be broken, and in landscape the leading/trailing ones that cannot be met will be broken. Remember, you already set the center X/Y, so the view will be centered, and you set the 1:1 ratio so it will be square. (As long as you did not touch the priorities - the default is required.
I am having an issue applying certain Core Image Filters on iOS 10. Filters like CICrystallize, CIEdgeWork, CIHexagonalPixellate, CIPointillize jump out of my UIImageView when filter is applied.
Strange part one is the bigger the inputScale the more they shift away from center. Strange part two is that it happens only iOS 10; they were all working fine on iOS 9. Strange part three is that it happens only on real devices; on the iOS 10 simulator all works fine!
Found a solution. Replaced
filteredImage.image = UIImage(CIImage: filteredImageData)
With this:
let filteredImageRef = ciContext.createCGImage(filteredImageData, fromRect: filteredImageData.extent)
filteredImage.image = UIImage(CGImage: filteredImageRef!)
For example,
My emulator sets 800*480 (w*h) as the screen size.
Portrait case : The total width of my UIs is 412dp.
Landscape case : The total height is 413
Above two cases are within the 480. But inner components are still cut..
If anyone knows the answer it would be greatly
appreciated.
I have got the answer from google documents enter link description here
1 dp equals 1.5 physical pixels
Because I put my drawable icon (E.g 410*212 using actual pixels as unit)in the res/drawable folder.
so some area of my components will be cut.
To solve this problem, I just move all my icons into the res/drawable-high folder.
I cut following information from the official web sites:
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp