Does anybody know how to make correct image and (UIlabel)label position for iphone and ipad
according to the layout image in psd file.
I'm using photoshop. I take a ruler look for the highest letter in the sentence(which should be positioned) and move it to the top of psd image, than take the left extreme letter and move ruler to the left.
Then i make a screenshot of the ipad/iphone screen and compare the x,y of psd and png file.
if psd x/y more then png x/y i make the next steps: Xpsd - Xpng, Ypsd - Ypsd, and if the coordinates of psd less than png i make Xpsd + Xpng, Ypsd + Ypsd.
And finally i have wrong visual position in ipad/iphone!
The most common reasons why the visual position/dimensions of a given element don't match what you think they should is typically the auto resizing mask that is applied to the particular view in question.
For example, your UILabel should have its autoresizing mask set to:
label.autoResizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleRightMargin;
This will keep your label aligned to the top left, and will not allow its height, nor its width to be changed depending on the super view's size changes.
This can also be set in interface builder with these controls:
The outer lines match the margin sizing, if it is a solid red line, then that means that as the superview's size changes, the current view's position relative to those edges will be preserved.
The Inner lines represent a flexible width, and height. If it is a solid line, then that means that the current view will resize to retain the same proportion of the superview's size.
Related
actually I'm trying to fit my app for all the size of screen phones, I have a view (the blue square) which contains 2 rectangles at top and bot and 4 squares in the 4 angles of the view and I'm struggling how to make my view (and the contains) have a dynamic resizing on different phone as you can see for the iPhone 4 it takes all the screen... Thanks for the help.
my AutoLayout image
Looks like you set a fixed width constraint (with a constant of 334) to your blue square view. The smaller iPhones (4s and SE) have a screen width of 320pt, so your blue square view is too wide for them.
You have to make the blue square view's width dynamic (depending on the available screen width)
To achieve that you can set the blue square view's width constraint the be the same as its superview (the light blue view) and then define a multiplier. For example to define the blue square view's width to be 80% of the available width, you set the multiplier to 0.8
Here are the steps to set the dynamic width:
Delete the fixed width constraint
Select the blue square view and the light blue view
Add a new Equal Widthsconstraint
Select the constraint
In the Attributes Inspector define the Multiplier
I am working to have my buttons height and position adapt to screen size changes like the pictures shown above. The buttons themselves will remain clear and only serve as a simple way to handle taps that trigger the segues to different screens. My goal is to make it so that as the image stretches across different screen sizes, I would like the buttons to keep equal height and width and position with the windows. I know that if the windows had properties I could simply make the buttons have an equal size and width to them and be done, but as I mentioned the image is static and it has to stay that way for the time being. I've tried creating constraints for the buttons and that has only proven to be a headache and I don't know if stack views will help me here either, I know this is fairly complex, but I'm ok with that I just need some direction.
UPDATE: In an effort to follow the instructions LGP listed properly I started from step 1. As I mentioned in the comments, I believe it's simply the ratio and the constraints conflicts since when I remove one or two it works fine, but then how do I set the constraints so it fills the entire screen and maintains the ratio of the picture? Also shown are the constraint conflicts for the image view an it isn't showing the aspect ratio of the parent container view either
If you want to do it in interface builder it is not too hard. You should use spacer views and proportional sizes to position the buttons. That way, whatever size your background will have, all the elements will follow.
1. Create a container that has the same proportions as you image. Add a regular UIView and set an Aspect Ratio constraint with a multiplier of 852:568. This is the dimension of your background photo, 852 x 568 pixels, but the actual values don't matter, as long as the aspect ratio is the same. (Don't forget to also tie up the container view to however you want it in your view controller. See the UPDATE below on how to do this.)
2. Place the background image in the container. Add an image view as a child to the container. Set the constraints to touch all four edges of the container. Set the Image property to you image, and set Content Mode to Aspect Fit.
3. Add the first spacer view. Add a regular UIView to the container view (see leftmost, white view below) and set the constraints as follows:
height = 1 (not important, I used 10 in the image)
Top space to Superview = 90 (not important)
Leading space to Superview = 0
Width equal to Superview with multiplier dw:cw <- This makes it proportional! dw is the distance from the left edge to the first window/button, and cw is the width of the container. If your container is 375 wide, and your distance to the first button is 105, the multiplier will be 105:375.
4. Add the second space view. This is the vertical spacer, going from top to first button. Set it up similar as the first spacer, except make the height proportional to the containers height, and the width fixed.
5. Add the first button. Constrain its left and top edges to the spacers, then make its width and height proportional to the container.
6. Add the remaining spacers and buttons. They are all the same. Just remember where to make them proportional. All buttons are constraint to the single vertical spacer.
Finally, you should make the spacer views hidden. You can easily try it within your Storyboard by selecting different devices.
I chose to add everything on iPhone 8, but it is not really important. Here is what it looks like when I change to iPad Pro 12.9" and iPhone SE. Note how the buttons are positioned correctly. The spacer move around a little because they have partly fixed distances, but it works fine anyway.
UPDATE: Here is how to constrain the container view in the view controller's view to make the container fill the whole view and still keep its aspect ratio.
First, set the image view's (the one you added in step 2 above) Content Compression Resistance Priority to 200 for both Horizontal and Vertical. This will allow the image to compress rather then expand if it has a choice.
Second, Add the following constraints to you container:
Align Center X to Superview
Align Center Y to Superview
Equal Width to Superview >= 0
Equal Height to Superview >= 0
852:568 Ratio to View <- This you should already have!
Now the container will always center on screen, it will always fill at least the entire screen, but will also allow it to fill beyond in both X and Y.
UPDATE 2: If you want to ignore the photo's aspect ratio, and always fill the screen with the photo, you just add constraints for the container view to each side to its superview. Your container view's constraints should look like this.
In step 2 you will need to set the image's Content Mode to Scale to fill. The rest should be the same.
Use percentage based positions and size. Identify the positions of windows in percentage basis, and create the origin in x and y dimension by multiplying the percentage to the width and height of the screen. I am assuming that you are using ScaleToFill as content mode of the ImageView.
Similarly for calculating size, identify the width and height of the ImageView on percentage basis, and multiply the values in percent with the total width and height of the screen.
For example, to calculate the position of Window one-
Suppose, window1.x in percentage basis is 25% & total image view width is 400 (for example), than window1.x pixel position will be-
window1X = (25 * 400) / 100 = 100
Suppose, window1.y in percentage basis is 25% & total image view height is 300 (for example), than window1.y pixel position will be-
window1Y = (25 * 300) / 100 = 75
Suppose, width is 7% of image views width, than width in pixel will be -
window1Width = (7 * 400) /100 = 28
Suppose, height is 12% of image views height, than height in pixel will be -
window1Height = (12 * 300) /100 = 36
window1.frame = CGRectMake (window1X, window1Y, window1Width, window1Height)
Same approach for other windows, to calculate their positions(size will be same as window 1)
This approach will work across all screen resolutions, since it uses percentage based calculations & ScaleToFill as content mode for image view.
I'm developing an app where I'm facing an issue to achieve one UI layout only for iPhone devices. This is the layout that I'd like to achieve:
I want to achieve overlapped views that layout should be same on every device from 5s to 7 plus.
The key is setting proportional constraints.
Start with adding a UIView to hold the 4 elements - background, man, woman and heart.
Add a UIImage for the background, and pin the edges to the edges of the view - that's the easy part.
Add a UIImage for the Man...
Set the Aspect Ratio to 1:1 to keep it square (well, round in this case).
Set the Height constraint equal to the Height of the "containing" view, but then set the multiplier to less than 1 to make it relative to the view. In this case, 0.6 is pretty close.
Set constraints for Centered Horizontally and Vertically... then set the Multipliers to keep the image left and above the centers. 0.64 on horizontal, and 0.9 on vertical work pretty good.
Add a UIImage for the Woman...
Set the Height and Width constraints equal to the Man image.
Set constraints for Centered Horizontally and Vertically... then set the Multipliers to keep the image right and below the centers. 1.4 on horizontal, and 1.2 on vertical work pretty good.
Add a UIImage for the Heart...
Set the Aspect Ratio to 1:1 (or whatever gives you the proper ratio for your heart image).
Set the Height constraint equal to the Height of the "containing" view, but then set the multiplier to less than 1 to make it relative to the view. In this case, 0.15 is pretty close.
Set constraints for Centered Horizontally and Vertically... then it will need a little adjustment o note Vertical 1.05 worked for me.
Now, you just need to set appropriate constraints for the "containing" view, and all the elements will scale and position themselves within it.
When you're all done, it should (hopefully) look like this:
I put the project up in a GitHub repo for you to look at: https://github.com/DonMag/AnotherLayoutExample
I am trying to create this layout, but I am struggeling so badly that I have no words left for it. I have tried for three days but yet I can't create the layout.
I am trying to have the three imageviews in the middle scale if the height of the view changes, but they are not behaving correct. I have successfully manage to get the ratios correct though, but the images either goes behind the blue button, or the blue button suddenly looses its height or the text disappears.
Isn't it possible to have three image views in the middle that take whatever height is left after the title and text + blue button have been laid out and then properly show them with correct ratios?
You can try multiple approaches here:
Size Classes:
Lay out the views for each possible size (probably the easiest but the least flexible
Use Constraints with different priorities:
You can set a max-height for the image views by adding a constraint for the height and then setting its relationship to equal or less than. This allows the image to scale up until a maximum size is reached.
Then add a second constraint between the bottom box and the images. Set the priority of this constraint to 750. This makes the image grow in height, when the bottom view moves down.
Then add another constraint which sets the aspect ratio of the image. If you use the mode of the view to Aspect Fit, the image will now always be scaled up to fit the image view.
To make all images scale proportionally, add constraints for equal width and equal height between them, then set the factor to match the proportions between these images.
The last step is now to vertically align the images properly as you showed in the pictures. To do that, add constraints between the images, which align them by their vertical centers, bottoms, baselines or tops.
I am having troubles aligning multiple images by using auto-layout in xcode.
I tried different settings, but nothing seems to work yet (refer to attached photos).
It would be great to hear some opinions from you guys, either in code or storyboard.
I want the image to be aligned equally in different screen sizes.
Too much space
Last image scaled too much
When Equally width is set
Constraints Setting
You need extra views to achieve this
In the sample picture the red rectangles they are all invisible UIView with constraints:
fixed length leading space to the view on the left(or the superview)
fixed length trailing space to the view on the right(or the superview)
fixed length height
This way it's the invisible views who have different width in different screen size while the size of images between them is fixed.
For left most item you should specify leading space to superview, for right most specify trailing space to superview. For all inner gaps between views specify horizontal spacing and for each neighbor view specify equal width constraint. Additionally I recommend for you to specify Align center Y for all views and set the y position constraint only for one of them