@@ -475,6 +475,53 @@ myView.layout()
475475// Height only (width flexible)
476476myView.layout ()
477477 .size (height : 50 )
478+
479+ // Percentage-based size
480+ myView.layout ()
481+ .size (width : 90 % , height : 100 )
482+
483+ // Mixed fixed and percentage
484+ myView.layout ()
485+ .size (width : 80 % , height : 50 )
486+
487+ // Percentage syntax with postfix operator
488+ let width: Percent = 80 % // Using postfix % operator
489+ myView.layout ()
490+ .size (width : width, height : 100 )
491+ ```
492+
493+ ** Percentage-based Sizing:**
494+
495+ Layout supports percentage-based sizing using the ` % ` postfix operator:
496+
497+ ``` swift
498+ // Direct percentage syntax
499+ myView.layout ()
500+ .size (width : 90 % , height : 100 )
501+
502+ // Percentage is calculated relative to parent container's size
503+ VStack (alignment : .center , spacing : 16 ) {
504+ headerView.layout ()
505+ .size (width : 90 % , height : 60 ) // 90% of VStack's width
506+
507+ contentView.layout ()
508+ .size (width : 80 % , height : 200 ) // 80% of VStack's width
509+ }
510+
511+ // Mix percentage and fixed sizes
512+ cardView.layout ()
513+ .size (width : 50 % , height : 140 ) // 50% width, fixed 140pt height
514+ ```
515+
516+ ** Edge Positioning with Percentages:**
517+
518+ ``` swift
519+ // Position views using percentage offsets
520+ myView.layout ()
521+ .size (width : 100 , height : 100 )
522+ .top (10 % ) // 10% from top
523+ .leading (20 % ) // 20% from leading edge
524+ .centerX () // Center horizontally
478525```
479526
480527### Padding
@@ -1430,12 +1477,43 @@ class MyViewController: BaseViewController, Layout {
14301477
14311478---
14321479
1480+ ## 🆕 Recent Updates
1481+
1482+ ### Percentage-Based Sizing
1483+
1484+ Layout now supports percentage-based sizing and positioning:
1485+
1486+ - ** Postfix ` % ` Operator** : Use ` 80% ` syntax for intuitive percentage values
1487+ - ** Mixed Types** : Combine percentage and fixed sizes (e.g., ` size(width: 80%, height: 50) ` )
1488+ - ** Edge Positioning** : Position views using percentage offsets (e.g., ` .top(10%) ` , ` .leading(20%) ` )
1489+ - ** Responsive Layouts** : Automatically adapts to screen rotation and size changes
1490+
1491+ ``` swift
1492+ // Simple percentage syntax
1493+ myView.layout ()
1494+ .size (width : 90 % , height : 100 )
1495+ .centerX ()
1496+
1497+ // Mixed fixed and percentage
1498+ cardView.layout ()
1499+ .size (width : 50 % , height : 140 )
1500+ ```
1501+
1502+ ### DSL-First Approach
1503+
1504+ Example app components have been refactored to use DSL syntax instead of imperative methods:
1505+
1506+ - ** Before** : UIView creation with manual frame calculations
1507+ - ** After** : Declarative VStack/HStack with percentage-based sizing
1508+ - ** Benefits** : Better readability, automatic layout updates, responsive design
1509+
1510+ ---
1511+
14331512## 🙏 Inspiration
14341513
14351514Layout is inspired by:
14361515
14371516- [ SwiftUI] ( https://developer.apple.com/xcode/swiftui/ ) - Declarative syntax and result builders
1438- - [ PinLayout] ( https://github.com/layoutBox/PinLayout ) - Performance-first philosophy
14391517- [ Yoga] ( https://yogalayout.com/ ) - Flexbox layout concepts
14401518- [ ComponentKit] ( https://componentkit.org/ ) - Declarative UI for iOS
14411519
0 commit comments