I have a view sized 320 x 376
On top of this view, i'd like to place a UIImageView leaving 4 (not sure what is the unit of measurements here) points to each size. This (i hope) will create a frame around the image.
So, from the stand point of the view,
Starting x,y coordinates will be 4 x 4.
Calculating the width of the top view, i 320 - 4 - 4 = 312
Calculating the height of the top view, i 376 - 4 - 4 = 368
When said measurements are in place, however i get
Why am i not seeing a 4 points buffer towards the bottom?
Tested with your params, it's ok for me :
The only reason that I found to explain why this happens is because the view that is behind the 2 others (border view + image view) is shorter than 376, so it hides the bottom of your views :
(here, it's the green one)
OK
Too short
Related
I'm trying to create a Google Sheets template that is exactly A4. The reason for that is I need to insert a picture in there that is absolutely placed and sized.
So, I'm figuring that since A4 is 210x297mm and Google Sheets default resolution is 96dpi, I need 793.59x1122.363 pixels.
Since a cell is 100x21 pixels, I need 7 cells horizontally + an additional cell that is 93 pixels large and 53 cells vertically + a cell that is 9 pixels high.
Which prints too big (A4, portrait, Scale Normal 100%, Margins 0,0,0,0):
too big
If I manually adjust the size of the cells to get a complete grey area without white lines on a single page, like this:
perfect size
I need 7 cells + one cell that is 85 px large x 53 cells + one cell that is 8 px high.
Note that (53*21+8)/785 = 1.428, which is not sqrt(2), the standard A4 ratio.
Why ? Thanks!
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 have a problem with multiplier and cannot understand how this feature works. For example i have view has 6:1 multiplier(To SuperView.Leading) as below.
When i change the multiplier to 2:1 it seems like below picture.
My question is in the 6:1 relation what does 6 and 1 mean. And also in 2:1 relation what does 2 and 1 mean. Similar consider you have three view like the picture below. Totally there 4 blank areas between subViews and superView. How can i say every blank area must be the SuperView.Width / 6 (and every blank width must be equal)
Thanks in advance.
When working with autolayout, especially when you are working with proportional layouts, you have to use multiplier.
I have to explain here some mathematics.
We know straight line equation.
Y = Mx + C
In above equation. Assume M is your multiplier and C is your Constant.
Thus suppose you have superview (in case of iphone 6s plus) of
414(width) x 736(height) size. On that view suppose you created subview.
Now if you want subview size exacly half of superview size, then just drag two constraints from subview to superview. (i.e. Equal Width and Equal Height)
See this Image
Obviously now you will get an error. just like I'm getting. (See below Image)
Now click on both of the constraints one by one, and use multiplier as 0.5. Then use above straight line equation.
Here 0.5 means you want width of subview = superviewWidth / 2.0 i.e. 207 px.
In other words you can provide multiplier as 207:414 also.
Y i.e. subviewWidth = ((M i.e. 0.5) * (x i.e. 414 i.e. superviewWidth)) + (Constant i.e. Zero)
Finally you get subviewWidth = 207 px
Similarly do for height of subview. Provide multiplier 0.5 or 368:736.
When done all things, don't forget to click on subview and update frames.
This way constants and multiplier will works.
Multiplier is there for creating Proportional Constraint. Auto Layout calculates the first item’s attribute to be the product of the second item’s attribute and this multiplier. Any value other than 1 creates a proportional constraint.
In your case, 6:1 means multiplier is 6/1 = 6. Which means
view.leading = Superview.leadingMargin*6
replace : with / - you will understand what it means.
In my example multiplier is 1:2 = 0.5
height red view is 0.5 times greater than the superview
When it comes to the multiplier it depends on what constraints you are dealing with. You have the views leading constraint connected to the superview leading margin. When the constant is 0 that gives you an 8 points gap. When you change the multiplier you will be effecting that gap. That's why when you do 2:1 you see it go to the right 8 points. Essentially multiplying the original 8 point gap by 2. If you do 1:2 it will go from 8 points to 4 points, essentially dividing the original 8 point margin by 2.
Now when you look at Adrians example, he only multiplied it by 1:2 so how did that make it half of the entire screen? That's because he did that on the height constraint. The view was originally the full size of the superview, but when he multiplied it by 1:2, he indicated that he wanted it to be 1/2 of its original height. Giving you that end result.
So the important thing to understand is that multiplier may seem to act different depending on the situation but that's because it depends on what constraints you are dealing with.
here is a good answer that goes into this more:
Understanding multiplier in auto layout to use relative positioning
the link details how if you wanted to make the leading edge 10% and trailing edge 90% you would need to set both constraints in relation to the trailing edge.
Multiplying the trailing constraint by 0.9 and the leading constraints by 0.1.
In regards to your question about the equally separated views, you should use a stack view. They were made for situations like this so you didn't have to deal with all the constraints. You just need to set constraints for the stack view and configure it accordingly.
I set up a group in my WatchApp Storyboard which has a width relative to container 1 and height relative to container 0.5.
Inside this group I have 20 horizontal aligned groups with a width relative to container 0,05. The spacing of the group is set to 0 but when i set a background color to all groups I end up like this.
As you can see, some spacings are really zero but sometimes there is a small gap of about 1 px. Is this some sort of bug? Is it possibile to perfectly align the groups so that it looks like it is one solid background?
Please don't tell me, that I can set the background color of the first group. Obviously I know that, i need it to work like this!
Thanks!
I believe the problem is that the width of the screen isn't evenly divisible by 20. The width of the 42mm screen is 312 pixels, which divided by 20 is 15.6 pixels. Apple is probably truncating this to an integer value for performance, which results in the gaps.
I reproduced your problem and then, to test my theory, I created 8 groups instead of 20 and set them to a width of 0.125. This resulted in no gaps, which makes sense since 312 is divisible by 8.
The 32mm watch has a width of 272 pixels and, doing factorization of the two I got:
272 = 2 * 2 * 2 * 2 * 17
312 = 2 * 2 * 2 * 3 * 13
Which shows that eight columns is the maximum by which you can evenly divide both sizes.
If you have to have 20 columns, then I would set each to a fixed width, some at 15 and some at 16 pixels for the 42 mm, and 13/14 pixels for the 32 mm to get the layout you want.
I have a jasper report set to portrait letter, which, in pixel terms, translates to 612 x 792 in iReport. I have the left margin set to 17 pixels and the right set to 10. That leaves the single column width at 585 with no spacing.
Now, I have two vertical lines that are used to form the report's border, and they're positioned at x-coordinates 0 (for the left bar) and 585 (for the right). When this reported is executed, the resultant PDF looks perfectly fine. However, when I go to print, the two vertical lines are missing, and I have to select shrink to fit (which sets the zoom to 94% and displays everything).
I've done some experimenting, and, without shrinking the report at print time, the vertical lines need to be positioned at x-coordinates 2 (for the left) and 575 (for the right) in order to display, which translates into essentially an x-margin of 19 pixels. Playing around some more, if I set the left margin to 19, the left vertical bar displays at print time when positioned at x-coordinate 0.
Is something else setting the margins at 19 pixels aside from the jasper report itself? I can't find any culprits in the report itself that seem to be responsible for the discrepancy. Any help is greatly appreciated.
Most printers can't print up to the edge of a page. It sounds like you are hitting this limit. The print driver is detecting that the PDF doesn't fit inside the printer's printable area and allows you to shrink the content to fit what the printer supports.
This is just a guess. In my reports I use the Background-Band in iReport and draw a rectangle for the background of my reports.