Good afternoon,
I'm trying to put an image in the middle of two inputs, that means that I would like to have the same margin to the first input as the second input. I'm going to explain better with an example:
[input a]---- 20px-----[image]---- 20px-----[input b]
I want to have the image always at the middle between them, because when I rotate the screen I have to make it large.
I have to use constraints? Which one? Is it possible?
Thanks in advance.
There are a number of ways to approach this. (There are a number of ways to approach everything, lol).
I'm only going to show AutoLayout solutions because it will make things easer when things are moving. Also, your description is pretty much already using AutoLayout Visual Format Language.
The first would be to place inputA, inputB and image into a third view which I'll call interfaceView.
Now you can lay it out like this...
|[inputA] // i.e. up against the left edge
[inputB]| // i.e. up against the right edge
[image] is different. You then align the centre of image with the centerX of interfaceView
The second option is to use "spacer" views.
Create two more views called spacer1 and spacer2 and layout the screen like this...
[inputA][spacer1][image][spacer2(==spacer1)][inputB]
Make spacer 1 and 2 hidden. They are just there for layout purposes. Now, because I have given them equal widths they will align the image view exactly in the middle of A and B.
Related
please see the image below for two examples of what is to be achived
the alignment should be on the Center Y of the first lines of each UILabels and should work regardless of font size or font. currently we have implemented this with different constraints to the top of the super view for different font and font size combinations.
the constraint to align the center of the two UILabels does not work since the text of the second UILabel is not fixed and can have several lines.
also the text is dynamic, so it is not known where the text will wrap to create the first line, thus it cannot be shown in an one line UILabel with the rest of the text in another one below.
currently this is implemented using UIKit, but if there is an easy solution in SwiftUI we can put these two labels in a SwiftUI component. so a SwiftUI solution would also be welcomed.
Your comments said "it should be on the glyphs" ... but, without additional information, my guess is that "real world" usage would not really need that level of precision.
For example:
While the glyphs are not perfectly center-Y aligned, it seems unlikely you'd run into a case where the first line of the "rightLabel" is " ' " ' " or . , . , ..
This layout can be easily done with only a few constraints - no need to do any calculations:
The "Positioning" label would, of course, be set .hidden = true so it would never be seen.
If you really, really want glyph-precision, you'll need to calculate
the Glyph bounding box for the left-label
the Glyph bounding box for first line of the right-label
calculate the "character box" offsets to align the Glyph Y-centers
and then position the two labels accordingly, or use Core Text to draw the text (instead of using UILabel).
Probably more work than necessary -- unless your actual use-case demands it.
That's an interesting problem! You can try using the centerYAnchor for the label on the left, and the firstBaselineAnchor for the label on the right... that will align the center Y with the text baseline, which isn't quite what you want.
To find the correct offset to apply, you can use the information from UIFont about the size of the characters. I'd probably start with capHeight * 0.5 and see if that looks or feels right. Something like:
leftLabel.centerYAnchor.constraint(equalTo: rightLabel.firstBaseLineAnchor, constant: rightFont.capHeight * 0.5)
This is a more difficult problem in SwiftUI, I think, because resolved font metrics aren't directly available to you.
On the left is the normal state of the layout. On the right is the expanded state of the layout.
My problem is that I can't figure out how to keep the pink boxes centered within their cells, and the green lines connected between the pink boxes as the layout grows in any direction.
The AutoSizing.xib with just these two views can be found here: https://dl.dropboxusercontent.com/u/6979623/AutoSizing.xib
There are two approaches to keeping the pink boxes centered within the four quadrants of the super view:
You can add four invisible views that even split up the four quadrants of this main view (using constraints to pin them to their respective corners and another set of constraints to make them equal widths and heights). If I were going to represent that in VFL (just because it's a concise way of representing all of those constraints), it might be something like:
H:|[quadrant1][quadrant2(==quadrant1)]|
H:|[quadrant3(==quadrant1)][quadrant4(==quadrant1)]|
V:|[quadrant1][quadrant3(==quadrant1)]|
V:|[quadrant2(==quadrant1)][quadrant4(==quadrant1)]|
You can then center the pink views in the center of each of those four quadrant views.
You can add center constraints that employ multipliers to offset these pink squares within their shared superview. Interface Builder has only recently gotten multiplier support and it's not super solid, in my opinion, so when I want to use multipliers, I often fall back to adding those programmatically.
Once you have the pink boxes laid out correctly, then the green lines between them are simply fixed spacing leading/trailing or top/bottom for horizontal or vertical lines, respectively. Combine that with fixed width and center alignment and you're done. Bottom line, take care of the placement of the pink boxes, as discussed above, and then the creation of the green lines becomes pretty easy.
I am working inside a Tabpane and I want to have 2 buttons on the bottom-right of the tap-pane, so I thought I just add a LayoutSpacer, but this resulted in
but I wanted it to look like
How can I make my Layoutspacer "bigger"?
In Smart GWT there are different methods to set the size of the component's vertical dimension.
Try with any one
canvas.setHeight100()
canvas.setHeight("100%")
canvas.setHeight("*")
Layouts may specially interpret percentage sizes on their children, and also allow "*" as a size.
In my existing app, I had 5 of my UIView derivatives (labels and buttons) laid up horizontally, i.e. on 0 degrees. They were all aligned on their left edges (so that button1.frame.origin.x = button2.frame.origin.x and so on.)
Now, for update purpose, I need to rotate all 5 of them, by 9 degrees anticlockwise.
I achieve the the rotation easily.
But I can't get how adjust their left edges so that they would all be aligned again after rotation.
The requirement, in summary, is this: The first control need to remain fixed (acting as pivot point) - the 4 others need to move right in order to maintain left alignment after rotation.
I tried putting incremental x value to each of the last 4 controls (keeping the pivot x fixed) but so far don't achieve exact alignment.
After rotation, it looks like all of them are center aligned, instead of left aligned which I really want.
I know what I really want, but just looking for a smarter way so that it won't be ugly like it is now.
Read about layout constraints. That will really help you in many ways. In layout constraints the concept is very simple like
Control1.attribute = Control2.attribute + C
So you can literally program each controls attributes and achieve a fine grain control. You can then code it such that all the controls X is same as other controls X, they are all same distance from another control etc.
You can have multiple layout constraints and the system will try to satisfy as many as possible.
But the only thing is that this is possible in iOS 6.0.
I trying to create a fixed border to the site that dynamically change size with the browser window from this sprite (it isn't perfect I know.): http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.png
DEMO on jSFiddle
My problem as you can see is the vertical wall part. As the #falJ and #falB are height:100% they include the bottom wall's end too with the space between the two wall sprites. Is there a way to force backround-position to only use vertical wall part without bottom wall's end?
Thanks in advance.
Solution: http://jsfiddle.net/vonkly/Ld43B/
It's not the prettiest thing in the world, but it achieves what you want. Check out the source code & direct link for the background images to see what you'll need to do. It's currently set at 299px wide; I imagine you'll be using something wider.
I'd also suggest adding some padding around your content (either with a p tag, span, another div, etc.) - the way it is currently set up isn't what I'd recommend for readability.
EDIT
The only way I can imagine achieving a fluid width + height box with the borders that you have in the way that you want is to use a second image for the west and east containing divs. This should work with your current method.