-
Notifications
You must be signed in to change notification settings - Fork 45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add priority to allow adjusting how extra space in a run/row in a Flow layout should be used #498
Open
kyleve
wants to merge
1
commit into
main
Choose a base branch
from
kve/add-priority-to-flow
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -116,6 +116,25 @@ extension Flow { | |
case bottom | ||
} | ||
|
||
/// When there is extra space in a run, how the extra space should be used. | ||
public enum Priority { | ||
|
||
public static let `default` = Self.fixed | ||
|
||
/// The item will take up only the space it asked for. | ||
case fixed | ||
|
||
/// The item will be stretched to fill any extra space in each run. | ||
case grows | ||
|
||
var scales: Bool { | ||
switch self { | ||
case .fixed: false | ||
case .grows: true | ||
} | ||
} | ||
} | ||
|
||
/// A child placed within the flow layout. | ||
public struct Child: ElementBuilderChild { | ||
|
||
|
@@ -136,22 +155,33 @@ extension Flow { | |
} | ||
|
||
/// Creates a new child item with the given element. | ||
public init(_ element: Element, key: AnyHashable? = nil) { | ||
public init(_ element: Element, key: AnyHashable? = nil, priority: Priority = .default) { | ||
self.key = key | ||
traits = .init() | ||
self.element = element | ||
|
||
traits = .init(priority: priority) | ||
} | ||
|
||
public struct Traits {} | ||
public struct Traits { | ||
|
||
public var priority: Priority | ||
|
||
public init(priority: Flow.Priority = .default) { | ||
self.priority = priority | ||
} | ||
} | ||
} | ||
} | ||
|
||
|
||
extension Element { | ||
|
||
/// Wraps the element in a `Flow.Child` to allow customizing the item in the flow layout. | ||
public func flowChild(key: AnyHashable? = nil) -> Flow.Child { | ||
.init(self, key: key) | ||
public func flowChild( | ||
priority: Flow.Priority = .default, | ||
key: AnyHashable? = nil | ||
) -> Flow.Child { | ||
.init(self, key: key, priority: priority) | ||
} | ||
} | ||
|
||
|
@@ -178,7 +208,12 @@ extension Flow { | |
cache: inout () | ||
) -> CGSize { | ||
size( | ||
for: subelements.map { $0.sizeThatFits(_:) }, | ||
for: subelements.map { | ||
.init( | ||
traits: $0.traits(forLayoutType: Self.self), | ||
size: $0.sizeThatFits(_:) | ||
) | ||
}, | ||
in: proposal | ||
) | ||
} | ||
|
@@ -191,7 +226,12 @@ extension Flow { | |
) { | ||
zip( | ||
frames( | ||
for: subelements.map { $0.sizeThatFits(_:) }, | ||
for: subelements.map { | ||
.init( | ||
traits: $0.traits(forLayoutType: Self.self), | ||
size: $0.sizeThatFits(_:) | ||
) | ||
}, | ||
in: .init(size) | ||
), | ||
subelements | ||
|
@@ -200,10 +240,17 @@ extension Flow { | |
} | ||
} | ||
|
||
typealias ElementSize = (SizeConstraint) -> CGSize | ||
|
||
/// Shim type. Once legacy layout is removed, we can remove this shim and just use `Child` directly. | ||
private struct FlowChild { | ||
typealias ElementSize = (SizeConstraint) -> CGSize | ||
|
||
var traits: Traits | ||
var size: ElementSize | ||
} | ||
|
||
private func frames( | ||
for elements: [ElementSize], | ||
for elements: [FlowChild], | ||
in constraint: SizeConstraint | ||
) -> [CGRect] { | ||
|
||
|
@@ -217,7 +264,7 @@ extension Flow { | |
for element in elements { | ||
|
||
let elementSize: CGSize = { | ||
let size = element(constraint) | ||
let size = element.size(constraint) | ||
|
||
return CGSize( | ||
width: min(size.width, constraint.width.maximum), | ||
|
@@ -237,14 +284,19 @@ extension Flow { | |
) | ||
} | ||
|
||
row.addItem(of: elementSize) | ||
row.add( | ||
.init( | ||
size: elementSize, | ||
traits: element.traits | ||
) | ||
) | ||
} | ||
|
||
return frames + row.itemFrames() | ||
} | ||
|
||
private func size( | ||
for elements: [ElementSize], | ||
for elements: [FlowChild], | ||
in constraint: SizeConstraint | ||
) -> CGSize { | ||
frames( | ||
|
@@ -268,7 +320,12 @@ extension Flow { | |
)] | ||
) -> CGSize { | ||
size( | ||
for: items.map { $0.content.measure(in:) }, | ||
for: items.map { | ||
.init( | ||
traits: $0.traits, | ||
size: $0.content.measure(in:) | ||
) | ||
}, | ||
in: constraint | ||
) | ||
} | ||
|
@@ -281,7 +338,12 @@ extension Flow { | |
)] | ||
) -> [LayoutAttributes] { | ||
frames( | ||
for: items.map { $0.content.measure(in:) }, | ||
for: items.map { | ||
.init( | ||
traits: $0.traits, | ||
size: $0.content.measure(in:) | ||
) | ||
}, | ||
in: .init(size) | ||
).map(LayoutAttributes.init(frame:)) | ||
} | ||
|
@@ -336,7 +398,7 @@ extension Flow.Layout { | |
|
||
struct Item { | ||
let size: CGSize | ||
let xOffset: CGFloat | ||
let traits: Flow.Layout.Traits | ||
} | ||
|
||
/// `True` if we can fit an item of the given size in the row. | ||
|
@@ -347,32 +409,58 @@ extension Flow.Layout { | |
} | ||
|
||
/// Adds item of given size to the row layout. | ||
mutating func addItem(of size: CGSize) { | ||
items.append( | ||
.init( | ||
size: size, | ||
xOffset: totalItemWidth + itemSpacing * CGFloat(items.count) | ||
) | ||
) | ||
totalItemWidth += size.width | ||
height = max(size.height, height) | ||
mutating func add(_ item: Item) { | ||
items.append(item) | ||
|
||
totalItemWidth += item.size.width | ||
height = max(item.size.height, height) | ||
} | ||
|
||
/// Compute frames for the items in the row layout. | ||
func itemFrames() -> [CGRect] { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
let totalSpacing = (CGFloat(items.count) - 1) * itemSpacing | ||
|
||
let scalingConstant: CGFloat = items | ||
.map { | ||
switch $0.traits.priority { | ||
case .fixed: 0.0 | ||
case .grows: 1.0 | ||
} | ||
} | ||
.reduce(0, +) | ||
|
||
let scalableWidth = items | ||
.filter(\.traits.priority.scales) | ||
.map(\.size.width) | ||
.reduce(0, +) | ||
|
||
let hasScalingItems = scalingConstant > 0.0 | ||
|
||
let extraWidth = maxWidth - totalItemWidth - totalSpacing | ||
let firstItemX: CGFloat = { | ||
|
||
let firstItemX: CGFloat = if hasScalingItems { | ||
0.0 | ||
} else { | ||
switch lineAlignment { | ||
case .center: extraWidth / 2.0 | ||
case .trailing: extraWidth | ||
case .leading: 0.0 | ||
} | ||
}() | ||
} | ||
|
||
var xOrigin: CGFloat = firstItemX | ||
|
||
return items.map { item in | ||
.init( | ||
x: firstItemX + item.xOffset, | ||
let percentOfScalableWidth = item.size.width / scalableWidth | ||
|
||
let width = if item.traits.priority.scales { | ||
item.size.width + (extraWidth * percentOfScalableWidth) | ||
} else { | ||
item.size.width | ||
} | ||
|
||
let frame = CGRect( | ||
x: xOrigin, | ||
y: { | ||
switch itemAlignment { | ||
case .fill: origin | ||
|
@@ -381,14 +469,18 @@ extension Flow.Layout { | |
case .bottom: origin + (height - item.size.height) | ||
} | ||
}(), | ||
width: item.size.width, | ||
width: width, | ||
height: { | ||
switch itemAlignment { | ||
case .fill: height | ||
case .top, .center, .bottom: item.size.height | ||
} | ||
}() | ||
) | ||
|
||
xOrigin = frame.maxX + itemSpacing | ||
|
||
return frame | ||
} | ||
} | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+963 Bytes
...ources/Resources/ReferenceImages/FlowTests/test_priority_one-scaling_iOS-15.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+951 Bytes
...ources/Resources/ReferenceImages/FlowTests/test_priority_one-scaling_iOS-16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.01 KB
...ources/Resources/ReferenceImages/FlowTests/test_priority_one-scaling_iOS-17.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+911 Bytes
...s/Resources/ReferenceImages/FlowTests/test_priority_two-even-scaling_iOS-15.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+899 Bytes
...s/Resources/ReferenceImages/FlowTests/test_priority_two-even-scaling_iOS-16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+984 Bytes
...s/Resources/ReferenceImages/FlowTests/test_priority_two-even-scaling_iOS-17.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+904 Bytes
...ources/Resources/ReferenceImages/FlowTests/test_priority_two-scaling_iOS-15.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+892 Bytes
...ources/Resources/ReferenceImages/FlowTests/test_priority_two-scaling_iOS-16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+977 Bytes
...ources/Resources/ReferenceImages/FlowTests/test_priority_two-scaling_iOS-17.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 | |
|
||
### Added | ||
|
||
- `Flow` children now support a layout `priority`, to specify if they should grow to use the extra space in a row. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
### Removed | ||
|
||
### Changed | ||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we may add a vertical version in the future, I'm calling it a "run" instead of a "row".