Center align a view vertically to other (sibling) view iOS - ios

i am working on an iOS project and want my 2 views to be vertically aligned with respect to each other as shown in attached image.
There is an image view on left and a view on right side. The right side view contains some labels in it. I am using autolayouts and have properly applied constraints to image view (i.e. top/leading/height/width).
Now i want my right view to be center aligned (vertically) to thumbnail but when i do this, it asks for missing constraint y position. I don't know how to fix that (i can not add top/bottom constraint as my title label can have 1 or 2 lined text and the right side view will grow accordingly)
Is it possible to achieve this? if yes, then how? Thanks.
It's a tableView basically. Above image is for detailed description. Whereas, design should be like the following (right side view should be centered aligned to left side image)

Related

Stick three containers and a problem with iPhone X

I am trying to create three containers (UI Views) as in the following example:
As you can see, in my case the TopContainer (the orange one) and the BottomContainer (the red one) have different dimensions. Also, I have a MiddleContainer (the white one) which is NOT located in the middle of the screen or in the center. In fact, the BottomContainer is a bit larger than the TopContainer.
Question: how can I keep them constrained no matter which phone my user has?
I tried to constraint the three components to the margins and between each others but it's not enough because, in that case, XCode argues that for each component the height and the width are ambiguous. Therefore I tried to maintain also the Aspect Ratio for all the three components and it seems to work, but with iPhone X (like iPhone XS) I get a ugly bottom line, so the bottomContainer doesn't fill the whole screen.
I know that there should be a "Bottom Space to" to set up for my BottomContainer in order to solve this issue but apparently I have it not, as you can see on the right side of the following screenshot:
Do you have an idea of what I am doing wrong? Do you have an alternative way to proceed?
I would solve it with a UIStackView with two UIView (orange and red). The UIStackView is set to distribute Fill Proportionally.
The orange view is the size of your orange view plus the size of the white view.
Then I'd add the white view as a child to the orange view and constrain it to the bottom of that view and with a fixed height.
To get rid of the bottom gap, set the bottom constraint to Superview instead of Safe Area.
See the screenshot for details:
As per your comment, I think this is what you can do!
Align the "middleComponent" to the center vertically, to its superview.
Set the height to it, as you want to have a fixes height there.
Then pin the "topComponent"'s bottom to the top of "middleComponent".
Pin the top of your "topComponent" to the top of the superview.
Pin the top of your "bottomComponent" to the bottom of the "middleComponent"
Pin the bottom of your "bottomComponent" to the bottom of your superview.
All these views will have have their left and right pinned to the superview's left and right.
Hope this helps

Xcode 8.1 Auto Layout

Hi there I am currently trying to get the following Scene to scale correctly for any scene.
This is currently how it looks on a iPhone 7 Plus:
I managed to get it to scale the blue background correctly by adding the following constraints:
However, I don't know how to get the UIImageView, UITextField and UI Label to scale in the same way. I Want them to keep the same proportions as they have now on the iPhone 7 view. I have looked for youtube tutorials but none seem to show how to introduce a way to have these items scale as I want them to.
Any help is much appreciated, Thanks.
You can add constraints between UIImageViews, Labels, the window, etc. by holding control and clicking-and-dragging between two elements. For example,
UIImageView: add these constraints:
Vertical Spacing to Layout Guide (This constrains the top of the image to the top of the window)
Leading Space to Container Margin (Left side of image stays 'connected' to the left side of the window)
Trailing Space to Container Margin (Right side of image stays 'connected' to the right side of the window)
Vertical Spacing (vertical spacing between the image and the Label)
You can use this same idea to constrain the Label and Text Field to the left side of the window and to keep the vertical spacing between the UIImageView, Label, and Text Field consistent on all devices.

UILabel right next to UIImage using autolayout

How would I go about creating a layout like this using autolayout?
The icon is UIImage, text is UILabel.
The label text can vary in width, but will always be single-line. How do I force the label to scale with the text horizontally and UIImage to be immediately to the left of the label?
I have tried using attributedText. I also tried views as containers and a horizontal stack view, but failed to get the result I wanted. What are the other options?
That should be absolutely no problem - just put in the image, make layout constraints to the left and top of the view, then add the label right to it, and make layout constraints between the right side of the image and the left side of the text.
To restrict the label width you can add a constraint from the right side of the label to the right side of the view, if you want to make the label as small as possible with a greater-than sign.
EDIT
If the whole should be bound to the right border of the superview, put both in a view, align the view to the right border of the superview, and make a constraint from the right side of the label to the right side of the view. The view will resize accordingly when the label resizes.
I went for a solution where I added a third view as the leftmost element in a horizontal stackview and set the stackview's distribution as 'equal centering'. It actually fit well with the rest of the planned layout (all elements are used efficiently). Thank you for your help guys.

Align button with respect to background image in XCode

I have a background image and I need to put buttons in it. I have tried auto layout as well by fixing it's height and width (The button text was not part of the background, has been added manually), but it is not working for all screen sizes. I want two buttons equidistant from line that can be seen(like in iPhone 4 inch screenshot, line is part of the background). How can I go about doing that? Are there any other tools which might be helpful? I am using swift
Best way to do this is to add a hidden view which has a background color of clear. Add a constraint for this which centers it horizontally and a constraint which positions its top where you want it.
Make the width of this transparent view the space you wish between buttons or leave it as 1 wide if you wish and use offsets in the constraints described below instead. Make the height 1 so it takes up no space.
For the buttons align the top of the buttons with the bottom of the transparent view. This places the buttons vertically.
Finally pin the trailing edge of button 1 to the leading edge of the transparent view and pin the leading edge of button 2 to the trailing edge of the transparent view. Set the offset for the pins to be the distance you want the buttons from center if you gave your transparent view no width.
On all screen sizes, the buttons will now be relative to the center.
If you want to have them equally space out, you can add transparent views to the left and right of the buttons and pin them together so they act like spacers. So superview->spacer->button->spacer->button->spacer->superview.
Using the spacer approach, select the 3 transparent views and add a constraint for equal width. You buttons will now be spread apart equally.

Autolayout, retaining button spacing for larger screens

I have a setup like this in the interface builder:
(iphone5 size). I want the buttons to stay in that layout if the screen size increases i.e widens (but the buttons stay the same size). If I pin the top two buttons to their respective container edges when the screen is larger they will be too far apart from each other. I have the bottom button increasing its size fine. How can I do this? I tried putting a transparent UIView between each button and the container edge, but couldn't get it working this way. Could someone give me a pointer on how to do this please? thanks!
Assuming you already have the width, height and y-constraints in place, to create the correct x-constraints you can try something along the lines of this:
check the Horizontal Center in Container option
choose your button and double click the newly created constraint Align Center X to
change the Second Item from Center X to Trailing
enter a constant value to offset the position
Do this for both buttons. The constant value of the second button should be the negative of the first one AND its Second Item should be Leading.
Result
This method will result in equal spacing on all size classes.
The only drawback is that the spacing is no dynamic. for that purpose you would need some placeholder view in between.
I would say there are two approaches you could take:
Assumption is buttons have constraints for width and height.
1) Use a transparent view which you center horizontally within its containing view. Then pin the left buttons trailing edge to the transparent view and the right buttons leading edge to the center. You have a choice as to how to define their vertical position.
or
2) Add a transparent container view to your main view and then move your two buttons inside this view. Pin the two buttons apart the desired width and then pin the other button edges to the containing view at size 0pts. Finally center the new containing view horizontally in the view. You will need to define the height of this container view from the top or bottom.
The second is probably easier to execute within storyboard.

Resources