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
Related
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
Given any screen resolution, is there a way that I can figure out the amount of points in an inch? For instance, if I wanted to create an NSView that was 8.5 inches by 11 inches (like a sheet of a paper), is there an algorithm that will allow me to obtain the correct point values for the frame across many different types of Macs and screen resolutions?
It's not straightforward. I'm not sure there's a good way. I can provide an approach, but I haven't confirmed that this works reliably:
First, you can use CGDisplayScreenSize() to get the screen's physical size in millimeters. You can obtain the CGDirectDisplayID for a screen from NSScreen, which you can, in turn, get from the window. Obtain the screen's deviceDescription and get the value for the "NSScreenNumber" key. That may need to be cast to CGDirectDisplayID.
The problem from there is that the display mode may not fill the screen. It could be letterboxed or pillarboxed. Or, it might be stretched. This should be fairly uncommon these days, but still possible. You can obtain the display mode using CGDisplayCopyDisplayMode(). To determine if it's stretched, you can examine its ioFlags to see if they contain the bitmask kDisplayModeStretchedFlag (declared in IOKit).
If it's stretched, the screen's frame will have to be mapped to its size in millimeters separately for the X and Y axes. You assume the screen's frame.width (in points) maps to the full physical width, and similarly for the height.
If the mode is not stretched, you'll have to check the aspect ratio of the frame and the screen physical size to see if it's letter- or pillarboxed. If the aspect ratios are very close, then it's presumably not. That case is similar to the stretched case, but the width and height mappings should be equivalent.
If the aspect ratios differ significantly, then you compare them. If the screen's physical aspect ratio is larger than the frame's, then the screen is physically wider than the mode is using (pillarboxed). So, you compute the mapping from points to millimeters from the two heights. If the physical aspect ratio is smaller than the logical one, then the mode is letterboxed and you use the widths to compute the mapping.
I have a vertical Scroll List. I have developed this app for resolution 768*1024. In this resolution my List is working fine. But when I run my app in higher resolution(1440*2960) it leave some space around all 4 direction.
I have also tried with changing Layout element min height dynamically, but Spacing issue is still exist.
Vertical and horizontal layout set element position in (screen width/height divided by a number of elements) * element number, in other words, they space out all elements evenly across canvas space. To achieve what you want you either have to enable child control size -> height option or write a script that aligns your elements in the center of the screen and one after another taking in consideration their height.
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.
There is so many places where you can specify the width & height of the a google ima ad tag:
1-https://pubads.g.doubleclick.net/gampad/ads?sz=640x480& (sz: inside the tag parameter)
2-new google.ima.AdDisplayContainer(div_id) div_id has a fixed width & height (html5 ima sdk with js)
3-googletag.defineSlot("/" + scope.vgNetwork + "/" + scope.vgUnitPath, size, div_id) size could be an array of sizes like: [[300,100], [468, 70]]
4-adsManager.init(width, height, google.ima.ViewMode.NORMAL); here is the adsmanager parameters
5-adsRequest.nonLinearAdSlotWidth = 748;
adsRequest.nonLinearAdSlotHeight = 90
adsRequest.linearAdSlotWidth= 468
adsRequest.linearAdSlotHeight= 70 here we have 4 spots, two for non linear linearAdSlotWidth nonLinearAdSlotHeight & two of linear linearAdSlotWidth linearAdSlotHeight
the problem that I'm facing right now is that most of the time ads are not displayed, I get two kind of errors:
1-The VAST response document is empty.
2-Non linear assets were found in the VAST ad response, but none of them matched the video player's capabilities.
Testing my tags width google ima vast inspector goes OK, ads are displayed 100%, so I guess it has something to do width my setup, specially the width & height configuration, is it possible if someone can help & make a relation between all these width & height configurations, and which is important and making the difference.