MosaicGrid
MosaicGrid是一个SwiftUI库，它提供了水平和垂直的拼贴网格视图，并提供了用于自定义视图网格大小和位置的实用函数。这些组件允许您以视觉上吸引人的网格布局安排多个项目。
示例
要运行示例项目，请克隆仓库，然后首先从示例目录中运行pod install
要求
- Swift 5.5或更高版本
- iOS 16.0或更高版本
- MacOS 13.0或更高版本
- TVOS 16.0或更高版本
- WatchOS 8.0或更高版本
- Xcode 14或更高版本
安装
CocoaPods
您可以通过CocoaPods轻松安装MosaicGrid。请将以下行添加到您的Podfile中
pod 'MosaicGrid', '~> 1.0'Swift Package Manager (Xcode)
使用Xcode的Swift Package Manager安装时，请按照以下步骤操作
- 转到文件 > Swift 包 > 添加包依赖
- 输入URL：https://github.com/hainayanda/MosaicGrid.git
- 将版本规则选择为向上至下一个主要版本并设置版本为1.0.0。
- 点击“下一步”并等待包被检索。
Swift Package Manager (Package.swift)
如果您愿意使用Package.swift，请在您的Package.swift文件中将MosaicGrid作为依赖项添加
dependencies: [
.package(url: "https://github.com/hainayanda/MosaicGrid.git", .upToNextMajor(from: "1.0.0"))
]然后在您的目标中包含它
.target(
name: "MyModule",
dependencies: ["MosaicGrid"]
)使用
马赛克网格布局
MosaicGrid 与 UICollectionView 类似，但提供了更多的灵活性。 MosaicGrid 将视图分割成网格（如果有间隔的话）并允许你用它进行视图位置的控制。
布局的具体方式将取决于你使用的 MosaicGrid 类型，是 VMosaicGrid 还是 HMosaicGrid。你可以使用 tileSized(w:h:) 来控制每个视图使用的砖块数量。这样，使用网格布局来安排 UI 将变得非常容易！
就像这个相册示例，或者这种类似抽象的艺术 😜
VMosaicGrid
VMosaicGrid 是一个垂直马赛克网格视图。它会尝试填充水平网格，然后向下继续并使视图延伸到最下面。
VMosaicGrid(hGridCount: 3, spacing: 2) {
ForEach(models) { model in
MyView(from: model)
.tileSize(w: model.width, h: model.height)
}
}布局将会遵循以下模式
你可以通过使用这些三个不同的 init 来自定义网格尺寸的计算方式
public init(hGridCount: Int, spacing: MosaicGridSpacing = .zero, gridAspectRatio: Double = 1, @ViewBuilder content: @escaping () -> Content) { ... }public init(hGridCount: Int, spacing: MosaicGridSpacing = .zero, gridHeight: CGFloat, @ViewBuilder content: @escaping () -> Content) { ... }public init(gridSize: CGSize, minimumSpacing: MosaicGridSpacing = .zero, @ViewBuilder content: @escaping () -> Content) { ... }HMosaicGrid
HMosaicGrid 是一个水平马赛克网格视图。它会尝试填充垂直网格，然后向右继续并使视图延伸到最右边。
HMosaicGrid(vGridCount: 3, spacing: 2) {
ForEach(models) { model in
MyView(from: model)
.tileSize(w: model.width, h: model.height)
}
}布局将会遵循以下模式
你可以通过使用这些三个不同的 init 来自定义网格尺寸的计算方式
public init(vGridCount: Int, spacing: MosaicGridSpacing = .zero, gridAspectRatio: Double = 1, @ViewBuilder content: @escaping () -> Content) { ... } public init(vGridCount: Int, spacing: MosaicGridSpacing = .zero, gridWidth: CGFloat, @ViewBuilder content: @escaping () -> Content) { ... } public init(gridSize: CGSize, minimumSpacing: MosaicGridSpacing = .zero, @ViewBuilder content: @escaping () -> Content) { ... }SpacerTile
SpacerTile 是一个创建给定尺寸的清晰矩形的实用函数。如果您想要确保某些网格不占用视图，则可以使用该函数。
VMosaicGrid(hGridCount: 3, spacing: 2) {
ForEach(models) { model in
MyView(from: model)
.tileSize(w: model.width, h: model.height)
// spacer that fills grid 3x1
SpacerTile(w: 3, h: 1)
}
}MosaicGridSpacing
MosaicGridSpacing 是一个代表马赛克网格水平和垂直间距的结构体。它是创建马赛克网格时传递的对象，以表示间距。通常，我们可以直接使用 Double 字面量，因为此结构体实现了 ExpressibleByFloatLiteral 和 ExpressibleByIntegerLiteral。
// Using Integer literal
VMosaicGrid(hGridCount: 3, spacing: 2) { ... }// Using Double literal
VMosaicGrid(hGridCount: 3, spacing: 2.0) { ... }// Using MosaicGridSpacing. h is horizontal spacing, v is vertical spacing
VMosaicGrid(hGridCount: 3, spacing: .init(h: 2, v: 2)) { ... }Contributing
欢迎贡献！请遵循 CONTRIBUTING.md 文件中的指导方针。
License
MosaicGrid 使用 MIT 许可证。有关更多信息，请参阅 LICENSE 文件。
贡献者
本项目管理者：Nayanda Haberty。