I have a button that I want to be a constant size across all devices (iPhone 4,5,6, iPad...etc). I want that button to be 347 x 66 pixels wide. I currently have the following constraints:
However, the width constraint isn't followed. This is what it looks like when ran in simulation:
Any ideas on how to get it to always be 374 pixels wide on any device ?
Thanks
You should always design in points not pixels, which is why constraints are in points. The iPhones up to the 5s are all 320 points across in portrait mode, so 374 points would be wider than the screen. The two iPhone 6 models are a bit wider, in points. The simulator image you posted is indeed trying to show a button which is 374 points wide, i.e. wider than the screen. Perhaps you intended to make a button which is half that width, 187 points, which is 374 pixels on a 2x retina screen?
Related
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.
When developing for iPhone 6 Plus (all others devices are unaffected). If you have a UI element that is suppose to fill the screen horizontally from one end to the other, the leading and trailing constraints are usually -16, since the 0 is assumed to be 16 points from the margin.
This looks fine on storyboard and on all devices except iPhone 6 Plus (both physical device and simulator).
As you can see here, the definitions I have for this test view on storyboard:
On iPhone 6 Plus this is what I get:
There are clearly some non filled border left and right of that black view.
I did some tests with setting the constraints to -19 and -20 to see if the space would be filled:
And this is what it looks like:
On the left, where the constraint is -20 there is no border, and on the right where the constraint is -19, there is a 1 pixel border.
My conclusion is that the 0 point on iPhone 6 Plus is 20 points away from the margin instead of 16 as in all other devices. This can't be intended, it's clearly an iOS bug.
Has anyone faced this issue? Is there a workaround to make this consistent, so that I don't have to add hardcoded exceptions for iPhone 6 Plus?
Don't use margin. You have the option of turning the margin off on your constraints.
The point of a margin is that it is controlled by the system, not you, so it can be set to an appropriate size for each device. And it makes sense for the margin to be a little bigger on larger devices than small ones.
I am trying to convert IOS points to real length(inches).
Im testing this on the New iPad. according to the spec. its width is 7.31 inches and in xcode it has 768 Points, which means it has 768/7.31 = 105 points per inch (horizontally).
From the calculation, a 105-point horizontal line should be displayed as 1 inch on physical screen.
However, when i draw on the screen and measure the distance its shorter that calculated.
Am I missing something here?
Thanks,
From the specs, the 7.31 inches is the total width of the device, not the screen. There is a bezel around the screen to allow the user to hold the iPad without touching interface controls on the screen.
Also, if scroll down a bit, you'll see that the screen is
2048-by-1536 resolution at 264 pixels per inch (ppi)
I have used CGRECTMAKE to position an image onto the 'camera' screen and was wondering whether there is a calculation ratio to convert a 4 image placement to a 4s
Iphone 4 screen is 320 480
iphone 4s screen is 640 960
I have tried just doubling my values but that doesnt seem to work so thought someone may know a formula to convert them
I cannot use AUTOLAYOUT or PLACE IMAGES ON SCREEN in storyboard as i am placing an image onto the camera screen..have tried these but no joy
thanks in advance
Not sure if I get your question correct but CGrectMake utilizes points, not pixels. Since the screen on i4 has the same size as the screen on i4s, There should be no implementation differences.
You should use 320*480 measures. The screen is devided into 320*480 points for i4/i4s
I have a simple app with a tabbar. The view size is 480 x 320. The tabbar is 49 x 320. However when i try to take a screenshot using UIgraphicsbeginimagecontext(self.view.frame.size) I get an image of 411 x 320..
My background image is 480 x 320 and shows properly in the ios simulator.
However when the screen is captured the background image is cut by the 69 height pixels.
Anyone knows:
1) Where the 20 missing pixels are going (480-49) = 431 while im getting 411
2) Why my background image displays properly in simulator but is cropped when taking a screenshot..
Many Thanks
Try using self.view.bounds for the context size.
Also, are you taking the screenshot before the view has been properly initialized? If you are, this may result in an incorrect size.
The missing 20 pixels are the size of the status bar on the top. Actually your view size height is 460 pixels if you are displaying a status bar on the top. When you take a screen shot using UIgraphicsbeginimagecontext(self.view.frame.size) your size parameter is 320x460, and NOT 320x480 as you expected, resulting in a "cropped" image. (sorry about my english...)