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