I would like to place 4 buttons on the screen. They should be all of the same height and width. The margin between the buttons should be 35px and the outter margin to the views border should be 20px.
Now the buttons should be scaling to the different sizes of the screen. But all my tries with the constrains have failed.
Does somebody know how to use them properly?
layout:
---------------
| |
| x x |
| |
| x x |
| |
---------------
X are the buttons
If the result you want is the one presented below, please follow the steps:
Always keep in mind this method. Design your view as-it-should-render in your storyboard (600x600) and then apply your constraints.
Position your four buttons as expected for a 600x600px. view:
Select all buttons, then choose "Equal Width" and "Equal Height" constraint in the lower Constraint helper:
Drag-n-drop from B1 to B2 with Ctrl key pressed, release and select "Horizontal Spacing". Do the same between B3 and B4.
Repeat the previous step with B1/B3 and B2/B4 but choose "Vertical Spacing".
For B1, attach-it to 20px. from left and top bounds as presented below:
Deselect Constraint to margins before applying constraint.
Do the same for B2 (top/right), B3 (left/bottom) and B4 (right/bottom).
You're all set, your view will now scale appropriately, no matter what's the screen size.
You could write a program to calculate the sizes of the buttons. First, get your screen width, say 320. Then: 320 = 20 + button width + 35 + button width + 20
2 * button width = 245. button width = 122.5.
The same would apply for the height.
I would do the following:
1) Add a 1x1 view which has a background color which is clear and add constraints which center it relative to the containing view. This gives you a point in the center.
2) For the left buttons, set the trailing distance to the 1x1 view as 17.5.
3) For the right buttons. set the leading distance to the 1x1 view as 17.5.
4) For the top buttons, set the bottom distance to the 1x1 view as 17.5.
5) For the bottom buttons, set the top distance to the 1x1 view as 17.5.
This gives you the buttons relative to this 1x1 view. You can move this up or down now if you want the buttons at the top or bottom etc... Now you want to handle the scaling of the width.
6) Add an aspect ratio for the buttons which meets your needs. 1:1 for square etc.
7) For the left buttons, set the leading distance to the containing view to be 20pts.
8) For the right buttons, set the trailing distance to the containing view to be 20pts.
As you have the aspect ratio set, the buttons should scale width and height proportionally to satisfy the 20pt constraint and constraint to the 1x1 center point.
Related
given the url(image) below as an example
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_220,y_140/yellow_tulip.jpg
From what I understand, the first image yellow_tulip is drawn on (0, 0) which is the top left corner. The second image brown_sheep draws from (220, 140), which is the right bottom corner of yellow_tulip because (0, 0) starts from top left of canvas.
Everything makes sense from what I understand til the third image kicks in. horses also starts from (220, 140) but how come it starts from the center of second image brown_sheep? I'm really confused.
The dimensions of the image changes when you apply the overlay changes so that should be taken into consideration when applying the x and y coordinates.
The coordinates are calculated from the center of the image but since the size of the canvas in the first image is 220 by 140, setting the brown sheep overlay's coordinates to 220 by 140 will double the size of the canvas to 440 by 280.
Meaning the following URL is now 440 by 280 https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill/yellow_tulip.jpg
To now overlay the horsed over the brown sheep you will need to recalculate the dimensions to the following- https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_110,y_70/yellow_tulip.jpg
Or
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220,y_140/l_horses,w_220,h_140,c_fill,x_330,y_210/yellow_tulip.jpg
I am currently doing work for my college and I need help with a specific part of the program (Visual Studio 2010).
I have a HScrollbar that has a minimum of 0 and maximum of 85, which are supposed to represent angle values. I have it so that as you scroll the scrollbar the value is displayed in a label underneath(lblangle.text = HScrollbar.value)and above the scrollbar is a 90 ° vertical rectangle (colored -in label). How can I make it so that the colored in rectangular label rotates with the value in the label (lblangle) bellow. So for example lblangle will display 40 and so the rectangle rotates 40 degrees clockwise. I would also like this to update real time so that every time the scrollbar is scrolled the colored-in label is rotated accordingly.
Images of visuals and what should be the relevant code.
For the xml below
<Image Width="30px" Height="30px" Margin="1 1 1 1" />
The margin is 1 1 1 1 but the image is at the centre of the screen (668 369 668 369). Why is this happening? Isn't the margin above invalid? Also, for the position of anything, you just need margin left and margin top. That's how winforms works, right? I don't understand why the Thickness constructer requires 4 values.
A Thickness for a Margin is how many pixels from each edge of the element. These are Left, Top, Right, and Bottom.
Here's an example:
Margin="10,15,5,0"
The code above defines a margin of:
10 Pixels from the Left.
15 Pixels from the Top.
5 Pixels from the Right.
0 Pixels from the Bottom.
The margin is always defined as Left, Top, Right, Bottom. However there are some shortcuts.
For example:
Margin="10,15"
The margin here will be defines as:
10 Pixels on the Left and Right.
15 Pixels on the Top and Bottom.
And also:
Margin="15"
This margin will be 15 pixels on all sides.
To answer your question more directly, you are simply missing the commas.
I'd like to display multiple small UIViews as Subviews relative to the screen estate. This should work across different screen sizes (iPad, iPhone)/portrait/landscape modes.
Each subview to display has two NSNumber objects with an unsigned int ranging from -100 (min) to 100 (max) which needs to be mapped to the correct x and y coordinates for positioning.
What's the best way to translate those values (-100...100) to use them for positioning UIViews on the screen?
How do I position them in a relative rather then an absolute way, so that the code works across screen rotation and screen sizes?
Ok, so if I understand correctly you want a -100 in the x direction to map to the left most point on the screen, 100 in the x to map to the right most point on the screen, -100 in the y direction to map to the lowest point on the screen, and 100 in the y to map to the highest point on screen (or maybe you want the y inverted from what I have so that it agrees with the screen coordinate system in which y becomes bigger the lower on the screen you get?).
And we also want to account for rotation.
As far as I understand it, asking UIScreen for its height and width:
CGFloat width = [UIScreen mainScreen].bounds.size.width;
CGFloat height = [UIScreen mainScreen].bounds.size.height;
but this does not account for rotation. The only other way I am aware of that is pretty straightforward would be to ask a UIView covering the screen for its width and height (most simply, you could make your viewcontroller's view cover the whole screen).
If you had a UIView that perfectly covered the whole screen (let's call it myView), you could try:
CGFloat width = myView.frame.size.width;
CGFloat height = myView.frame.size.height;
these should adjust for orientation by themselves (from my experience, it should definitely work if you get the height and width in viewDidAppear:animated: or anything after. also the UIView needs to either be the UIViewControllers view property or a subview of this view. if not, you'll have to implement didRotateFromInterfaceOrientation: or find some other way to tell your view about any rotations). Once we have the 'width' and 'height' of the screen, we can convert from your int's to screen position. Try something like:
(CGPoint)convertX:(NSNumber *)x andY:(NSNumber *)y intoPoint
{
pointX = ([x intValue] + 100.0)*width/200.0;
pointY = (-[y intValue] + 100.0)*height/200.0; // remove the - sign at the front of the expression for y to grow as you move down the screen
return CGPointMake(pointX, pointY);
}
to convert from -100 to 100 in x and y to their respective points on the screen.
If you're working with a range of +/-100, then you may want to use the underlying CALayers to position your views. The nice part about CALayers, is that their anchor points are mapped to a device-agnostic grid that ranges from 0.0 to +1.0 on a Cartesian plane.
My app has a grouped table view, and the cells use linen as their background, with no divider. The linen pattern repeats perfectly when tiled 150x150, but if cell 0 is 100 pixels tall, since the pattern starts again at pixel 0 in cell 1 it becomes noticeable, as the lines in the linen wouldn't match up. The linen ends where the table view ends, and so it needs to scroll with it too.
Any ideas on how I can get this to work more gracefully?
If you're using UIColor to set your pattern background, you probably need to switch to putting in a UIImageView. Set the frame appropriately, but adjust the origin of the bounds to scroll the inner content.
So the cell at row 0 will have bounds with origin.y = 0. The cell at row n will have bounds with origin.y = (n * [your cell height])%[your source texture height]. In order to handle wraparound (eg, if your cell were meant to contain the final line of your source pattern at the top, then roll back onto the first line) you'll probably want to create a modified texture image that's [cell height] + [source texture height] - 1 pixels tall and has the first portion of the texture repeating at the bottom.