Skip to content

Commit 7ad777e

Browse files
committed
Update README
1 parent 09c7778 commit 7ad777e

File tree

1 file changed

+79
-1
lines changed

1 file changed

+79
-1
lines changed

README.md

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,53 @@ myView.layout()
475475
// Height only (width flexible)
476476
myView.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

14351514
Layout 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

Comments
 (0)