I have an app for musicians that works with Songs and Setlists. The logical structure is as follows:
A Setlist contains Songs.
A Song has Sections, which include Lines (chords & lyrics).
I want to view my Setlist in a "Page View," similar to a book where I can swipe through pages. In this view, the Song Sections are wrapped into columns to save screen space. I use a ColumnsLayout to calculate and render the columns, and then a SplitToPages modifier to divide these columns into pages.
Problem: The TabView sometimes behaves unexpectedly when a song spans multiple pages during rendering. This results in a transition that is either not smooth or stops between songs.
Is there a better way to implement this behavior? Any advice would be greatly appreciated.
struct TestPageView: View {
struct SongWithSections: Identifiable {
var id = UUID()
var title: String
var section: [String]
}
var songSetlistSample: [SongWithSections] {
var songs: [SongWithSections] = []
//songs
for i in 0...3 {
var sections: [String] = []
for _ in 0...20 {
sections.append(randomSection() + "\n\n")
}
songs.append(SongWithSections(title: "Song \(i)", section: sections))
}
return songs
}
func randomSection() -> String {
var randomSection = ""
for _ in 0...15 {
randomSection.append(String((0..<Int.random(in: 3..<10)).map{ _ in "abcdefghijklmnopqrstuvwxyz".randomElement()! }) + " ")
}
return randomSection
}
var body: some View {
GeometryReader {geo in
TabView {
ForEach(songSetlistSample, id:\.id) {song in
let columnWidth = geo.size.width / 2
//song
ColumnsLayout(columns: 2, columnWidth: columnWidth, height: geo.size.height) {
Text(song.title)
.font(.largeTitle)
ForEach(song.section, id:\.self) {section in
Text(section)
}
}
.modifier(SplitToPages(pageWidth: geo.size.width, id: song.id))
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}
}
}
public struct ColumnsLayout: Layout {
var columns: Int
let columnWidth: CGFloat
let height: CGFloat
let spacing: CGFloat = 10
public static var layoutProperties: LayoutProperties {
var properties = LayoutProperties()
properties.stackOrientation = .vertical
return properties
}
struct Column {
var elements: [(index: Int, size: CGSize, yOffset: CGFloat)] = []
var xOffset: CGFloat = .zero
var height: CGFloat = .zero
}
public func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) -> CGSize {
let columns = arrangeColumns(proposal: proposal, subviews: subviews, cache: &cache)
guard let maxHeight = columns.map({ $0.height}).max() else {return CGSize.zero}
let width = Double(columns.count) * self.columnWidth
return CGSize(width: width, height: maxHeight)
}
public func placeSubviews(in bounds: CGRect,
proposal: ProposedViewSize,
subviews: Subviews,
cache: inout Cache) {
let columns = arrangeColumns(proposal: proposal, subviews: subviews, cache: &cache)
for column in columns {
for element in column.elements {
let x: CGFloat = column.xOffset
let y: CGFloat = element.yOffset
let point = CGPoint(x: x + bounds.minX, y: y + bounds.minY)
let proposal = ProposedViewSize(width: self.columnWidth, height: proposal.height ?? 100)
subviews[element.index].place(at: point, anchor: .topLeading, proposal: proposal)
}
}
}
private func arrangeColumns(proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) -> [Column] {
var currentColumn = Column()
var columns = [Column]()
var colNumber = 0
var currentY = 0.0
for index in subviews.indices {
let proposal = ProposedViewSize(width: self.columnWidth, height: proposal.height ?? 100)
let size = subviews[index].sizeThatFits(proposal)
let spacing = size.height > 0 ? spacing : 0
if currentY + size.height > height {
currentColumn.height = currentY
columns.append(currentColumn)
colNumber += 1
currentColumn = Column()
currentColumn.xOffset = Double(colNumber) * (self.columnWidth)
currentY = 0.0
}
currentColumn.elements.append((index, size, currentY))
currentY += size.height + spacing
}
currentColumn.height = currentY
columns.append(currentColumn)
return columns
}
}
struct SplitToPages: ViewModifier {
let pageWidth: CGFloat
let id: UUID
@State private var pages = 1
func body(content: Content) -> some View {
let contentWithGeometry = content
.background(
GeometryReader { geometryProxy in
Color.clear
.onChange(of: geometryProxy.size) {newSize in
guard newSize.width > 0, pageWidth > 0 else {return}
pages = Int(ceil(newSize.width / pageWidth))
}
.onAppear {
guard geometryProxy.size.width > 0, pageWidth > 0 else {return}
pages = Int(ceil(geometryProxy.size.width / pageWidth))
}
})
Group {
ForEach(0..<pages, id:\.self) {p in
ZStack(alignment: .topLeading) {
contentWithGeometry
.offset(x: -Double(p) * pageWidth, y: 0)
.frame(width: pageWidth, alignment: .leading)
VStack {
Spacer()
HStack {
Spacer()
Text("\(p + 1) of \(pages)")
.padding([.leading, .trailing])
}
}
}
.id(id.description + p.description)
}
}
}
}
