I'm starting with iOS app and creating a table view. In my table I have a cell like this.
Now I need to center the horizontal stackview with stars vertically and horizontally. This stackview has fixed width and height.
It have to look like this.
For this I put it in another horizontal stackview. I tried to add the same constraints to it as you see for the label
The problem is that this external stackview does not stretch like a label. I also see that it's width and height are greyed out, I cannot change them. Why?
There are many ways to autolayout this.
I think you should gain a better understanding of StackViews for future usage.
I recommend reading on these resources:
https://developer.apple.com/documentation/uikit/uistackview
https://www.raywenderlich.com/160646/uistackview-tutorial-introducing-stack-views-2
In order to achieve what you need:
Use only 1 horizontal StackView containing the stars. Constraint the stackview to the label by center horizontally.
Use 2 StackViews and keep your constraints. Outer stackview, change it to vertical axis and center alignment.
Method 2 Image in Attributes Inspector (cmd + option + 4):
Related
So i created a simple UIView. I added two UIButtons. I have added them in a StackView. I have put the Alignment of the stackview to fill in xcode attributes inspector and the distribution to fill equally and the spacing to 50. Then i added a height constraint of 300 to the stackview and i added a custom font as well to the buttons as well as three constraints. One for the stackview bottom as you see at the screenshot, one for the trailing and one for the leading constraint. I haven't put a top constraint yet. When i change to different devices through xcode the buttons are not centered. I added the top constraint but i guess because of the height constraint at the stackview there is an issue and all constraint become red when i change to another device than the initial i created the stackview. If i move for example to Iphone SE the buttons move to the top side i guess because of the bottom constraint... So is there a way to center the stackview with the buttons as i change to different devices? Any help appreciated.
For a stack view to be centered you needs leading, trailing and vertical centering constraints, stack view will have automatic height based on buttons heights and vertical spacing, no need for bottom constraint
Following is the screenshot showing the design I want to implement.
For this, I am using a vertical stackview that encompasses four other horizontal stackviews. Then each horizontal stackview includes an image and a label as indicated below.
I set the alignment of the horizontal stackviews fill and tried changing the Distribution. However, I am not able to get the desired result.
What alignment/distribution combination could generate the desired effect?
Or should I eliminate horizontal stackviews and populate views inside the vertical stackview?
You can accomplish this with a tableView , but if you have a few items then
setting a spacing for the main stackview and every inner stackView should give the needed padding
for Full look check the demo
https://github.com/ShKhan9/stackV
Follow the steps,
1. Add a vertical stackView with top, leading and trailing constraints to the view.
Alignment - Fill
Distribution - Fill
Spacing - 20
2. Add 1 horizontal stackView to the vertical stackView
Alignment - Fill
Distribution - Fill
Spacing - 20
3. Add imageView with height and width constraints set to 30 in the above horizontal stackView.
4. Duplicate the horizontal stackView in vertical stackView the number of times as per your requirement.
I have a cell in which I place four buttons and four labels. Each button gets assigned a picture with width 50 and height 50. Furthermore, all buttons have a corresponding label describing what they're intended for.
My objective is to have the buttons and labels resize to keep the buttons' and labels' aspect ration intact while the screen dimension changes on different devices. I have been playing with auto layout changing the hugging and compression to achieve this but haven't been successful yet. Any help would be much appreciated...
I think you should take a look at a UIStackView, because this seems exactly as a use case for stack. Just put each pair button/label in a stack, and then all four pairs into a horizontal stack, which you constraint to the cell itself. You should be able to handle all you need just by configuring the stack’s properties (axis, distribution, alignment, spacing).
Embed your button and label into a view. Set the width of this view equal widths to content view and change the multiplier value to 1:4. This will adjust the widths of the views according to superview. Also, set the top and bottom constraint to 0 for this view.
Provide center align y-axis constraint to button after setting the width and height constraint to 50. Set its top constraint to a value you deem fit.
Set labels's leading and trailing constraint to a value like 8. Choose center alignment for text. Also, provide top constraint to buttona nd bottom to its superview.
Copy the view and paste to create the three views and provide them equal widths constraint to the first view. Also, provide their leading, trailing, top and bottom constraints.
Here are a fast tutorial in how to achieve that:
1-
2- completion of the first Gif:
Note you can achieve the same output using a UIStackView
In UITableViewCell, I create a vertical stackView.
I add horizontal stackView in the vertical stackView(consists of one UILabel(A) and UIImageView) and a UILabel(B).
I set the spacing is 6 points to all stackViews.
But if the width of UILabel(B) is longer than that of UILabel(A) of horizontal one,
the space expends more than 6 points in horizontal stackView.
How can I solve this problem.
In picture,
above one has a problem that I want to solve(See mute icon is arranged to right to the end of UILabel),
and the bottom one is on correct way.
Take Another Horizontal StackView Add UILable(A) and UILable(B).
Set Alignment and Distribution Property Fill.
Give UILable(B) constraint to trailing space right side.
If problem not solved send storyboard screen shot.
I am desperatly trying to get to grips with Autolayout and need advice on how best to approach handling the following scenario. I am working with an existing design that I need to lay out appropriately so it will function on any iPhone screen size.
For each screen, I have identified a section of the app that should partially expand/collapse to compensate for the difference in screen height. I have illustrated this in the image below. Primarily, is this the best way to approach the problem?
Assuming this is the best way to approach the problem, how should constraints be added to fix the positioning and heights of views 1,2 & 4, while allowing view 2 and it's content to flex in accordance with the device view height?
I have experimented profusely with constraits and have been unable to achieve the illustrated outcome.
Here is how I would have done it.
All views:
Align the leading and trailing space to the superview
View 1:
Align the top to the superview or top layout guide
Add a fixed height
View 4:
Align the bottom to the superview or bottom layout guide
Add a fixed height
View 3:
Align the bottom to view 4 (using vertical spacing)
Add a fixed height
View 2:
Align the top to view 1
Align the bottom to view 3
If you want the result in your pictures, here is how to do it. You can choose to use wAny|hAny size class.
From top to bottom, set vertical spacing between each adjacent views to be 0.
Set height constraint for view1 and view3 and view4 to be a static value.
Then the height of view2 should vary on different screen sizes.
Looking from your picture, your view1 occupies almost half of the screen space. So my suggestion is to make its height to be proportional, you can set view1 and its superview to be equal width, then modify this equal width constraint's ratio to be 0.5. You can do the same for other views in your picture.
In addition to other answers, with the visual format, it should look like smth like this
V:|[view1(HIGHTV1)][view2][HIGHT3(HIGHTV3)][view4(HIGHTV4)]|
Repalce HIGHTVX with the static sizes