MO

Mara Okafor

@mara.fog

Landscape photographer chasing fog along the Pacific Northwest coast. Film when it's slow, digital when it isn't.

248Posts

12.4KFollowers

311Following

Constraints

Active set: compact width. Hover or focus a view to highlight it. Dimmed rows belong to the other size class.

layoutMarginsGuide

margins.leading = safeArea.leading + 16
margins.trailing = safeArea.trailing − 16

cover UIImageView

cover.top = superview.top
cover.leading = superview.leading
cover.trailing = superview.trailing
cover.height = 0.333 × cover.width + safeArea.top
cover.height = 0.2 × cover.width + safeArea.top

avatar UIImageView

avatar.centerX = superview.centerX
avatar.leading = margins.leading
avatar.centerY = cover.bottom
avatar.width = 0.3 × superview.width @750
avatar.width = 0.12 × superview.width @750
avatar.width ≤ 132 @1000
avatar.height = 1.0 × avatar.width 1:1

nameLabel UILabel

name.centerX = avatar.centerX
name.top = avatar.bottom + 8 standard
name.leading = avatar.trailing + 16
name.top = cover.bottom + 12

verifiedBadge UIImageView

badge.leading = name.trailing + 4
badge.firstBaseline = name.firstBaseline

handleLabel UILabel

handle.top = name.bottom + 8 standard
handle.centerX = name.centerX
handle.leading = name.leading

column UILayoutGuide

column.leading = margins.leading
column.width = 1.0 × margins.width
column.width = 0.36 × margins.width

bioLabel UILabel, lines = 0

bio.top = handle.bottom + 12
bio.top = handle.bottom + 16
bio.leading = column.leading
bio.trailing = column.trailing

statsStack UIStackView .fillEqually

stats.top = bio.bottom + 16
stats.leading = column.leading
stats.trailing = column.trailing
stats.height = 60

stat[0…2] arranged subviews

stat[i].width = 0.333 × stats.width
stat[i].top = stats.top, .bottom = stats.bottom
stat[0].leading = stats.leading
stat[i].leading = stat[i−1].trailing

divider hairline

divider.leading = stat[i].leading
divider.width = 1 ÷ displayScale
divider.top = stat.top + 14, .bottom = stat.bottom − 14

followButton UIButton

follow.top = stats.bottom + 16
follow.leading = column.leading
follow.width = 0.5 × stats.width − 4

messageButton UIButton

message.leading = follow.trailing + 8 standard
message.width = 1.0 × follow.width equal
message.height = 1.0 × follow.height
message.top = follow.top

photoGrid UILayoutGuide

grid.top = follow.bottom + 24
grid.leading = superview.leading
grid.trailing = superview.trailing
grid.top = cover.bottom + 20
grid.leading = column.trailing + 24
grid.trailing = margins.trailing

cell[0…11] 3 across

cell.width = 0.333 × grid.width − 1.33
cell.height = 1.0 × cell.width 1:1
cell[n].leading = cell[n−1].trailing + 2
cell[n+3].top = cell[n].bottom + 2