Need guide/resource/help on creating this UI on Swift with UIKit

Question

Hi there, just like what the title says, I am in need of guidance/help on how to achieve similar UI design style as what's embedded above. I understand using UIKit could be harder as opposed to SwiftUI, but I am told to use UIKit as part of my study. Any help is much appreciated.

Edit: We could start from the top, IE: maybe it's a custom collectionView? or static tableview?

Is the "variation" tab a collectionview inside a tableview cell? How to achieve the "buy" and 'sell" section?

score 1 · Answer 1 · answered Apr 14 '20 at 07:48

1

I always use UIStackView for multiple views like this, it's easy to setup, to configure and to update.

orange views are vertical UIStackView, play with spacing, distribution and other properties of UIStackView to get it fit.

Also if you think height of views get bigger of user screen, simply drop root stackView to UIScrollView, find out more how to have scrollable UIStackView

answered Apr 14 '20 at 07:48

zzmasoud

164
1
8

Thank you so much! Will definitely give this a shot! – Kevin Apr 14 '20 at 08:51

score 1 · Answer 2 · answered Apr 14 '20 at 07:54

1

Masoud provided a great answer regarding the layout of the screen.

as for the question "How to achieve the "buy" and 'sell" section?", You might be interested in the UITextField's .layer.cornerRadius property.

answered Apr 14 '20 at 07:54

Sparklebeard

808
6
15

Yep, just read through the documentation - seems like a solid start. Thanks! – Kevin Apr 14 '20 at 08:51

Need guide/resource/help on creating this UI on Swift with UIKit

2 Answers2