I'm new to React Native and I'm very happy with how flexbox automatically fits the content to the screen size.
This works great as long as I'm working with squares, but when it comes to circles it seems that I have to specify the size of the circle using pixels..
This is obviously not optimal when developing to different screen sizes.
I have tried using PixelRatio like this:
height: 90 * pixelRatio,
width: 90 * pixelRatio,
borderRadius: 45 * pixelRatio,
This makes it a little better, but there still seems to be a huge different in the size of the circle as it appears on Iphone 6 vs Iphone 6 plus.
Is there any way to use flexbox to automatically create the size of a circle just like it can with squares?
Or is there another way to make sure the circle will be displayed identical on different devices?
AFAIK, the value you enter for width and height are device independent pixels. Meaning they will scale according to the pixel density of the device in hand. pixelRatio will make it extremely device dependent.
Have to tried it without the pixelRatio factor
height:90,
width:90,
borderRadius:45
Related
I spent hours of searching about this topic, but nothing is exactly dealing with my problem. Maybe you guys can help me better.
I want to ask what is the proper way of designing a layout to properly support all the iPhones. Also the easiest way for me as possible.
My style is that I am designing for the smallest device first and then scale things up for the other devices. Is that alright or is this not how it is supposed to be done?
My problem is that I am creating a layout that should scale up according to display size.
I will give an example of Original iPhone which has screen of 320 x 480 points (which equals 320 x 480 pixels) and iPhone 6, which has screen of 375 x 667 points (which is 750 x 1334 pixels because of the different pixel density).
Now I want to make a button or textbox or rectangle (whatever) on the Original iPhone that will get bigger if I launch it on bigger device like iPhone 6.
So if I have a button having height of 30 (pt) on Original iPhone, it should be bigger on iPhone 6. But how much bigger?
Do I have to calculate those 30 pt into pt on bigger device myself every time, or is there better method that works automatically so I don't have to re-count all the dimensions for every device? What is the correct way?
Btw: I am aware of that when designing the icons, buttons, or anything that is a .png file, I have to create them in dimensions of 1x, 2x and 3x so it can scale on all the devices, but how to work with these while constructing the actual layout?
What is the logic or how is it ment to be done?
THIS PICTURE is showing the dimension proportions I found on the web and little bit of idea of my problem below.
EDIT: Please look at this website: https://designcode.io/iosdesign-guidelines
It seems like there are some Apple's measurement standarts in (pt).
For example on one of the pictures they are showing that the margin from the sides should be 8pt. Since [pt] is an universal unit, I would expect it to adapt on other devices. So if I set the margin of 8 in editor, will it make different ammount of pixels on the other devices so it looks visually the same?
If you calculate every view like this one , it will not work.
Just set constrains on that view which you want same in other devices.
Like if you fix a view's height is 30 then it will 30 in every device. It is not going to be bigger or smaller in other devices.
But if you think that, a view is 20 pixel from right and 20 pixel from left, 10 pixel from top bar and bottom layout then this view gonna same ratio in every device.
I hope you understand what i want too say.
Please comment if i am unable to make you understand. :)
I have a question about using images for universal apps on IOS.
I've created a universal app that works on all iphone devices and ipads. I've placed all the content via storyboard. On a View I have two buttons one on the top space area that is 40 points high and as wide as the view, one on the bottom area also 40 points high and as wide as the view and an image that is a square (A x A) in the middle of the view, the image is constrained by horizontal and vertical (For it to stay always aligned in the middle of the view).
(I understand that if I use an image that is 100 points by 100 points image at 1x, I need to create two other images at 200 points by 200 points for 2x and 300 by 300 for 3x.)
1) So if I constrain the UIImage container by height and width equal to 100 by 100, it will be 100 by 100 points in all devices. But I want it to use as much space as possible. That would mean that on iphone 5 - 6s+ it would always be 100 by 100, it would look smaller on every growing screen. It would also mean that I would need to make it bigger for Ipad (Storyboard changing to regular regular to change UIImage container size for ipad, ex. increase it to 300 x 300). Put once I make it bigger, the image I have will be to small for that size therefore turn blurry or pixelated.
Right?
2) If I would like to be able to use as much space as possible I thought of using the following method. Constraining the UIImage to be equal width as the view but reducing its multiplier to 0.9 or 0.8 (Therefore making it smaller then the view width) and placing an aspect ratio of 1:1(To maintain it square). That way taking advantage of most of the view space that is free, and In all the devices it would always seem filling the same space. However the problem would be that the image would have to be different sizes. (Ex. iphone 5 = 150 x 150, on iphone 6 = 250 x 250, on iphone 6+ = 320 x 320 ans on ipad 600 x 600).
so If I make an image that in 2x that is 150 x 150, when its used on the iphone 6 it would be distorted or pixelated and the same for for the rest.
So can someone help me understand what I should do? or link a tutorial?
Please help!!
I've found that the best way to solve this problem would be to make a much larger image and let the constraints resize it. That way, you've covered your bases if new resolutions are developed, or with the current varying sizes. A much larger image would not look bad if it was compressed into a smaller space, but you might lose some details.
I am making my first iphone game using corona sdk and would like it to run on as many devices as possible (phones + tablets). However I am not sure how to deal with different screen sizes and resolutions. I developed my game for the iPhone 5 using corona simulator and it works fine on that device. When I tried it on lower resolution devices like the iPhone 4 I get 2 black rectangles on each side. I tried creating 2 different backgrounds with different resolutions and added this in my config.lua:
imageSuffix = {
["#2x"] = 2
}
However this does not seem to change anything... I am not sure what height and width I should set in content in the config.lua file and what heights and widths I should set for the backgrounds. I am sorry if these questions are stupid, I am just starting.
Thanks in advance!
It sounds like you need to fully read up on config files and dynamic scaling.
The question is a little to broad as such I suggest you read this article about "the ultimate config/modernizing the config".
Some screens are wider while others are more narrow. If we take
resolution out of the equation, its easier to visualize the screens.
Corona makes it easy to take resolution out of the picture using
Dynamic Scaling. With Dynamic Scaling, you can use a common set of
screen coordinates and Corona will automatically scale the text and
graphics for different resolution screens. It can scale upwards or
downwards depending on your starting point. It also can substitute
higher resolution images when it needs to scale up. This is all
managed by a Lua file in your project folder called config.lua.
Since available resolutions vary considerably, it’s helpful to use the
same scale for each device. It doesn’t matter if you’re on an iPhone
3GS at 320×480 or a Retina iPad at 1536×2048, the location (0,0)
represents the top-left corner and (320,480), in vertical portrait
mode, is the bottom-right corner. The screen center is (160,240).
Each point, in this case, is one pixel on a lower-resolution device
like the 3GS, which has a native screen resolution of 320×480, while
each point is four pixels on a Retina iPad. Don’t worry about the math
— Corona will handle it for you.
Source: http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/
This goes through the creation of a config file that fully utilize the dynamic scaling and image scaling.
local aspectRatio = display.pixelHeight / display.pixelWidth
application = {
content = {
width = aspectRatio > 1.5 and 320 or math.ceil( 480 / aspectRatio ),
height = aspectRatio < 1.5 and 480 or math.ceil( 320 * aspectRatio ),
scale = "letterBox",
fps = 30,
imageSuffix = {
["#2"] = 1.8,
["#4"] = 3.6,
},
},
}
I made an iPhone game a few months ago, and am now trying to port it as a universal app to both the iPad and iPhone 5 with Cocos2D. I was wondering if there was a simple-ish way to determine where an object should be placed based on the device running the game.
I could use if statements to figure out which device the game is running on, so when I get the correct sized images for the device I could have separate positions for each object, but it seems like there would be a maths formula which would allow me to use a lot less code. Obviously something like a full screen background is very simple, because it just needs to be centred with:
[background setPosition:CGPointMake(screenSize.width/2,screenSize.height/2)];
I haven't a clue how to adapt a button that would be X = 144 & Y = 330 on the old 3.5inch, 640 by 960 resolution iPhone to an iPad or iPhone 5 resolution.
I'm willing to use a more recent version of iOS if it will make my life easier, but because I'm not using any of Apple's objects I don't know if that is possible.
Maybe this isn't even possible because the button will be different sizes for the iPhone and iPad version, but I thought I would ask.
yeah, i am usually facing the same problem,
but if it is just a static objects placement
i would have relative coordinates instead of absolute for every object
and then use screen sizes to place them correctly
so you might want to use a function like:
-(CGPoint) relativeToScreen:(CGPoint) p {
return ccp(screenSize.width * p.x, screenSize.height * p.y)
}
where 0.0 <= p.x =< 1.0 and the same for p.y
and don't forget about your anchorPoint, because the node position is based on it as well
and i hope you have discovered that cocos2d already does image choosing instead of you,
you just have to set right suffixes for your images: -hd, -ipad, -ipadhd
For iphone5 resolution, I position hud buttons relative to the screen dimensions. Very similar to what you are doing for the background. So for example, a pause button I want in the top left I would position like this:
[pauseButton setPosition:CGPointMake(0.0f + 30.0f, screenSize.height - 50.0f)];
For ipad it gets really tricky. The lazy way which I have implemented is to play around with the content scale factor and zoom everything up and have "dead" borders to compensate for the ipad's screen ratio. Not the best, but at least you can re-use all the same assets for the ipad.
I am developing an application on JDE 4.5. The 4.5 OS is supported by the Pearl, Curve and Huron so the application which I am developing will support all the above devices. The problem which I am facing is screen size. Screen Size of the Pearl is 240 x 260, Curve 320 x 240, Huron 320 x 240.
I am facing the following problems:
What should be the dimensions of the background image?
How should i place the fields (button , label....)?
Can any one please help me out.
Thanks a lot
Blackberry device resolutions can be broadly placed in two categories:
Low Resolution (width less than or equal to 320px)
High Resolution (width more than 320px)
This categorization conveniently allows us to maintain only two versions of the bitmaps and layouts - one for low-res devices and one for high-res devices.
Sample code for dealing with these different categories of screen resolution would be:
boolean lowRes = net.rim.device.api.system.Display.getWidth() <= 320;
if (lowRes)
{
// The device has a low resolution screen size
}
else
{
// The device has a high resolution screen size
}
Source: Developing applications for different screen sizes (http://docs.blackberry.com)
The the screen sizes are not the same ratios you could add multiple sized images to the project and based on the screen res use the appropriate image. (Large App Size)
If the image is a gradient and gradient portion ends at the lowest screen res you could fill the remaining background with the solid color the gradient ends with.
For controls you can use layout managers and build in styles to center and stretch controls to the width of the actual BB. Try to avoid using fixed width to make your app the most compatible. If you've developed web apps the same concepts apply.
Hope this helps.
Use calculate the position of contents using width(Display.getWidth option).Based on the screen width option ,u can position it.For images,u can resize,use images of 3 sizes
i)For Bold type of Phones
ii)Storm
iii)Pearl
create Images for it or else use resize option