1

Following is the screenshot showing the design I want to implement.

enter image description here

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.

enter image description here

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?

RajeshKumar R
  • 15,445
  • 2
  • 38
  • 70
Sujal
  • 1,447
  • 19
  • 34

2 Answers2

1

You can accomplish this with a tableView , but if you have a few items then

enter image description here

setting a spacing for the main stackview and every inner stackView should give the needed padding

enter image description here enter image description here

for Full look check the demo

https://github.com/ShKhan9/stackV

Shehata Gamal
  • 98,760
  • 8
  • 65
  • 87
  • The solution works but one thing that I wonder is that if we are setting the image width and height, then does not this prevent image scaling (1x, 2x, 3x images) for differently sized devices? – Sujal May 23 '19 at 08:53
  • no,it'll not prevent it and it's up to you to increase that width/height – Shehata Gamal May 23 '19 at 13:34
1

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.

enter image description here

PGDev
  • 23,751
  • 6
  • 34
  • 88
  • Can this be done without defining image height and width (Step 3) [Please refer to my comment under Sh_Khan's answer]? And Step 4 does not seem to be required. – Sujal May 23 '19 at 08:57
  • If you have the image of small size you won't need that. Setting imageView's contentMode to scaleAspectFit will work. And ya Sept-4 won't be needed. Added that by mistake. – PGDev May 23 '19 at 09:01