Autolayout | FrameLayoutKit |
23 | ![]() |
25 |
26 | ![]() |
28 |
Source | Result |
218 | 219 | ```swift 220 | let frameLayout = HStackLayout() 221 | frameLayout + VStackLayout { 222 | ($0 + earthImageView).alignment = (.top, .center) 223 | ($0 + 0).flexible() // add a flexible space 224 | ($0 + rocketImageView).alignment = (.center, .center) 225 | } 226 | frameLayout + VStackLayout { 227 | $0 + [nameLabel, dateLabel] // add an array of views 228 | $0 + 10 // add a space with a minimum of 10 pixels 229 | $0 + messageLabel // add a single view 230 | }.spacing(5.0) 231 | 232 | frameLayout 233 | .spacing(15) 234 | .padding(top: 15, left: 15, bottom: 15, right: 15) 235 | .debug(true) // show dashed lines to visualize the layout 236 | 237 | ```` 238 | | 239 |
240 | ![]() |
242 |
Source | Result |
249 | 250 | ```swift 251 | let frameLayout = VStackLayout { 252 | ($0 + imageView).flexible() 253 | $0 + VStackLayout { 254 | $0 + titleLabel 255 | $0 + ratingLabel 256 | } 257 | }.padding(top: 12, left: 12, bottom: 12, right: 12) 258 | .distribution(.bottom) 259 | .spacing(5) 260 | ```` 261 | 262 | | 263 |
264 | ![]() |
266 |
Source | Result |
273 | 274 | ```swift 275 | let posterSize = CGSize(width: 100, height: 150) 276 | let frameLayout = ZStackLayout() 277 | frameLayout + backdropImageView 278 | frameLayout + VStackLayout { 279 | $0 + HStackLayout { 280 | ($0 + posterImageView).fixedSize(posterSize) 281 | $0 + VStackLayout { 282 | $0 + titleLabel 283 | $0 + subtitleLabel 284 | }.padding(bottom: 5).flexible().distribution(.bottom) 285 | }.spacing(12).padding(top: 0, left: 12, bottom: 12, right: 12) 286 | }.distribution(.bottom) 287 | ``` 288 | 289 | | 290 |
291 | ![]() |
293 |
Source | Result |
300 | 301 | ```swift 302 | let buttonSize = CGSize(width: 45, height: 45) 303 | let cardView = VStackLayout() 304 | .spacing(10) 305 | .padding(top: 24, left: 24, bottom: 24, right: 24) 306 | 307 | cardView + titleLabel 308 | (cardView + emailField).minHeight = 50 309 | (cardView + passwordField).minHeight = 50 310 | (cardView + nextButton).fixedHeight = 45 311 | (cardView + separateLine) 312 | .fixedContentHeight(1) 313 | .padding(top: 4, left: 0, bottom: 4, right: 40) 314 | cardView + HStackLayout { 315 | ($0 + [facebookButton, googleButton, appleButton]) 316 | .forEach { $0.fixedContentSize(buttonSize) } 317 | }.distribution(.center).spacing(10) 318 | ``` 319 | 320 | | 321 |
322 | ![]() |
324 |