SwiftUI - How to vertically align a Text view with another Text view to make something similar to a Table with proper alignment?

user_16845586 0
Viewed 944

So I basically need to make a table similar to this in SwiftUI:

Image

As you can see on the screenshot, Im having a hard time aligning the fields to their corresponding columns, as in "John" should be exactly centered to "Name" and "EUR" should be centered to "Currency", etc. As you can see on the code, Im currently eye-balling it with the stacks spacing parameter, but thats just plain awful and doesnt even work on all devices plus data is dynamic and comes from an API call so it just wont work. How can I align this on SwiftUI? I need to support iOS 13.

Current code:

   struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            ZStack {
                TitleBackground()
                Text("Clients")
                    .foregroundColor(.white)
            }
            HStack(spacing: 30) {
                Text("Name")
                Text("Balance")
                Text("Currency")
                Spacer()
            }
            .foregroundColor(Color(#colorLiteral(red: 0.4783782363, green: 0.4784628153, blue: 0.4783664346, alpha: 1)))
            .frame(maxWidth:.infinity)
            .padding(12)
            .background(Color(#colorLiteral(red: 0.9332349896, green: 0.9333916306, blue: 0.9332130551, alpha: 1)))
            RowView()
            RowView()
            RowView()
            RowView()
        }
    }
}


struct RowView : View {
    var body: some View {
        HStack(spacing: 30) {
            Text("John")
            Text("$5300")
            Text("EUR")
            Spacer()
        }
        .padding(12)
    }
}

struct TitleBackground: View {
    var body: some View {
            ZStack(alignment: .bottom){
                Rectangle()
                    .frame(maxWidth: .infinity, maxHeight: 60)
                    .foregroundColor(.red)
                    .cornerRadius(15)
                //We only need the top corners rounded, so we embed another rectangle to the bottom.
                Rectangle()
                    .frame(maxWidth: .infinity, maxHeight: 15)
                    .foregroundColor(.red)
            }
    }
}
swiftui swift ios
2 Answers

I see that Yrb posted a similar answer before me, but I'm going to post this anyway as my solution is a bit more modular/composable than theirs.

You want this layout:

table with columns sized to fit content

We're going to implement an API so that we can get your layout with this code for the table view:

enum ColumnId: Hashable {
    case name
    case balance
    case currency
}

struct TableView: View {
    var body: some View {
        WidthPreferenceDomain {
            VStack(spacing: 0) {
                HStack(spacing: 30) {
                    Text("Name")
                        .widthPreference(ColumnId.name)
                    Text("Balance")
                        .widthPreference(ColumnId.balance)
                    Text("Currency")
                        .widthPreference(ColumnId.currency)
                    Spacer()
                }
                .frame(maxWidth:.infinity)
                .padding(12)
                .background(Color(#colorLiteral(red: 0.9332349896, green: 0.9333916306, blue: 0.9332130551, alpha: 1)))
                ForEach(0 ..< 4) { _ in
                    RowView()
                }
            }
        }
    }
}

In the code above:

  • I've defined a ColumnId type to identify each table column.
  • I've inserted a WidthPreferenceDomain container view, which we will implement below.
  • I've added a widthPreference modifier to each table row, which we will implement below.

We also need to use the widthPreference modifier in RowView like this:

struct RowView : View {
    var body: some View {
        HStack(spacing: 30) {
            Text("John")
                .widthPreference(ColumnId.name)
            Text("$5300")
                .widthPreference(ColumnId.balance)
            Text("EUR")
                .widthPreference(ColumnId.currency)
            Spacer()
        }
        .padding(12)
    }
}

I've placed the full code for this answer in a gist for easy copying.

So, how do we implement WidthPreferenceDomain and widthPreference?

We need to measure the width of all the items in the Name column, including the Name title itself, so that we can then set all of the Name column's items to have the same width. We need to repeat the procedure for the Balance and Currency columns.

To measure the items, we can use GeometryReader. Because GeometryReader is a greedy view that expands to fill as much space as its parent offers, we don't want to wrap any table items in a GeometryReader. Instead, we want to put a GeometryReader in a background on each table item. A background view is given the same frame as its parent.

To collect the measured widths, we can use a “preference“ by defining a type conforming to the PreferenceKey protocol. Since we want to collect the widths of all the columns, we'll store the widths in a Dictionary, keyed by a column id. To merge two widths for the same column, we take the maximum of the widths, so that each column expands to fit all its items.

fileprivate struct WidthPreferenceKey: PreferenceKey {
    static var defaultValue: [AnyHashable: CGFloat] { [:] }

    static func reduce(value: inout [AnyHashable : CGFloat], nextValue: () -> [AnyHashable : CGFloat]) {
        value.merge(nextValue(), uniquingKeysWith: { max($0, $1) })
    }
}

To distribute the collected widths back down to the table items, we can use the “environment” by defining a type conforming to the EnvironmentKey protocol. EnvironmentKey only has one requirement, a static var defaultValue property, which matches the PreferenceKey's defaultValue property, so we can re-use the WidthPreferenceKey type we already defined:

extension WidthPreferenceKey: EnvironmentKey { }

To use the environment, we also need to add a property to EnvironmentValues:

extension EnvironmentValues {
    fileprivate var widthPreference: WidthPreferenceKey.Value {
        get { self[WidthPreferenceKey.self] }
        set { self[WidthPreferenceKey.self] = newValue }
    }
}

Now we can define the widthPreference modifier:

extension View {
    public func widthPreference<Domain: Hashable>(_ key: Domain) -> some View {
        return self.modifier(WidthPreferenceModifier(key: key))
    }
}

fileprivate struct WidthPreferenceModifier: ViewModifier {
    @Environment(\.widthPreference) var widthPreference
    var key: AnyHashable

    func body(content: Content) -> some View {
        content
            .fixedSize(horizontal: true, vertical: false)
            .background(GeometryReader { proxy in
                Color.clear
                    .preference(key: WidthPreferenceKey.self, value: [key: proxy.size.width])
            })
            .frame(width: widthPreference[key])
    }
}

This modifier measures the modified view's width using a background GeometryReader and stores it in the preference. It also sets the view's width, if the widthPreference from the environment has a width for it. Note that widthPreference[key] will be nil on the first layout pass, but that's okay, because frame(width: nil) is an “inert” modifier; it has no effect.

And now we can implement WidthPreferenceDomain. It needs to receive the preference and store it in the environment:

public struct WidthPreferenceDomain<Content: View>: View {
    @State private var widthPreference: WidthPreferenceKey.Value = [:]
    private var content: Content

    public init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    public var body: some View {
        content
            .environment(\.widthPreference, widthPreference)
            .onPreferenceChange(WidthPreferenceKey.self) { widthPreference = $0 }
    }
}
user_775670

There are two ways you could solve this. First, you could use two LazyVGrids with the same column set up, but you would have to fix some of your sizes. The second way isYou can solve this with with PreferenceKeys.

LazyVGrid:

struct LazyVGridView: View {
    let columns = [
        GridItem(.fixed(100)),
        GridItem(.fixed(100)),
        GridItem(.adaptive(minimum: 180))
    ]

    var body: some View {
        VStack {
            LazyVGrid(columns: columns) {
                Text("Name")
                    .padding()
                Text("Balance")
                    .padding()
                Text("Currency")
                    .padding()
            }
            .foregroundColor(Color(#colorLiteral(red: 0.4783782363, green: 0.4784628153, blue: 0.4783664346, alpha: 1)))
            .background(Color(#colorLiteral(red: 0.9332349896, green: 0.9333916306, blue: 0.9332130551, alpha: 1)))

            LazyVGrid(columns: columns) {
                ForEach(clients) { client in
                    Text(client.name)
                        .padding()
                    Text(client.balance.description)
                        .padding()
                    Text(client.currency)
                        .padding()
                }
            }

        }
    }
}
`PreferenceKeys`: 
struct PrefKeyAlignmentView: View {
    
    let clients: [ClientInfo] = [
        ClientInfo(name: "John", balance: 300, currency: "EUR"),
        ClientInfo(name: "Jennifer", balance: 53000, currency: "EUR"),
        ClientInfo(name: "Jo", balance: 30, currency: "EUR"),
        ClientInfo(name: "Jill", balance: 530000, currency: "EUR")
    ]
    
    @State private var col1Width: CGFloat = 100
    @State private var col2Width: CGFloat = 100
    @State private var col3Width: CGFloat = 110
    
    var body: some View {
        VStack {
            HStack() {
                Text("Name")
                    .padding()
                    // The background view takes on the size of the Text + the padding, and the GeometryReader reads that size
                    .background(GeometryReader { geometry in
                        Color.clear.preference(
                            //This sets the preference key value with the width of the background view
                            key: Col1WidthPrefKey.self,
                            value: geometry.size.width)
                    })
                    // This set the frame to the column width variable defined above
                    .frame(width: col1Width)
                Text("Balance")
                    .padding()
                    .background(GeometryReader { geometry in
                        Color.clear.preference(
                            key: Col2WidthPrefKey.self,
                            value: geometry.size.width)
                    })
                    .frame(width: col2Width)

                Text("Currency")
                    .padding()
                    .background(GeometryReader { geometry in
                        Color.clear.preference(
                            key: Col3WidthPrefKey.self,
                            value: geometry.size.width)
                    })
                    .frame(width: col3Width)
                
                Spacer()
            }
            
            ForEach(clients) { client in
                HStack {
                    Text(client.name)
                        .padding()
                        .background(GeometryReader { geometry in
                            Color.clear.preference(
                                key: Col1WidthPrefKey.self,
                                value: geometry.size.width)
                        })
                        .frame(width: col1Width)
                    Text(client.balance.description)
                        .padding()
                        .background(GeometryReader { geometry in
                            Color.clear.preference(
                                key: Col2WidthPrefKey.self,
                                value: geometry.size.width)
                        })
                        .frame(width: col2Width)

                    Text(client.currency)
                        .padding()
                        .background(GeometryReader { geometry in
                            Color.clear.preference(
                                key: Col3WidthPrefKey.self,
                                value: geometry.size.width)
                        })
                        .frame(width: col3Width)
                    Spacer()
                }
            }
        }
        //This sets the various column widths whenever a new entry as found.
        //It keeps the larger of the new item's width, or the last largest width.
        .onPreferenceChange(Col1WidthPrefKey.self) {
            col1Width = max($0,col1Width)
        }
        .onPreferenceChange(Col2WidthPrefKey.self) {
            col2Width = max($0,col2Width)
       }
        .onPreferenceChange(Col3WidthPrefKey.self) {
            col3Width = max($0,col3Width)
        }
    }
}

struct ClientInfo: Identifiable {
    let id = UUID()
    let name: String
    let balance: Int
    let currency: String
}

private extension PrefKeyAlignmentView {
    struct Col1WidthPrefKey: PreferenceKey {
        static let defaultValue: CGFloat = 0
        
        static func reduce(value: inout CGFloat,
                           nextValue: () -> CGFloat) {
            value = max(value, nextValue())
        }
    }
    
    struct Col2WidthPrefKey: PreferenceKey {
        static let defaultValue: CGFloat = 0
        
        static func reduce(value: inout CGFloat,
                           nextValue: () -> CGFloat) {
            value = max(value, nextValue())
        }
    }
    
    struct Col3WidthPrefKey: PreferenceKey {
        static let defaultValue: CGFloat = 0
        
        static func reduce(value: inout CGFloat,
                           nextValue: () -> CGFloat) {
            value = max(value, nextValue())
        }
    }
}

I don't think using alignmentGuides would work as you would have to handle multiple views, and alignment guides only align one set of views, and not the views internally.

Both of these solutions will work. The PreferenceKeys will automatically adapt everything, but theoretically could push past the bounds of the screen with too much information. The LazyVGrid is more rigid, but could cause truncation/wrapping if the data is too long. I don't think you could use an adaptive layout for the LazyVGrid for all columns, if you have two different grids. It may be possible to mix both and set the LazyVGrid widths with PreferenceKeys, but I haven't personally tried it.

DataSource for both for testing:

struct ClientInfo: Identifiable {
    let id = UUID()
    let name: String
    let balance: Int
    let currency: String
}

let clients: [ClientInfo] = [
    ClientInfo(name: "John", balance: 300, currency: "EUR"),
    ClientInfo(name: "Jennifer", balance: 53000, currency: "EUR"),
    ClientInfo(name: "Jo", balance: 30, currency: "EUR"),
    ClientInfo(name: "Jill", balance: 530000, currency: "EUR")
]

Edit: While working on the answer, I forgot you were restricted to iOS 13. LazyVGrids aren't available. I left the LazyVGrid answer up as you could use if #available(os:) if you wanted to use it for later OS's, or for someone else looking for a more current solution.

Second Edit: I was thinking about how this view could be made more reusable, and I came up with a third way that is also iOS 13 compatible, and only uses one PreferenceKey to help set the background color on the headers. This also allows unlimited columns. I think this is the simplest way of the bunch:

struct TableView: View {
    
    let headers: [String]
    let tableData: [String:[String]]
    let dataAlignment: [String:HorizontalAlignment]
    let headerColor: Color
    
    @State var headerHeight: CGFloat = 30
    
    init(headers: [String], headerColor: Color = Color.clear, columnData: [[String]], alignment: [HorizontalAlignment]) {
        self.headers = headers
        self.headerColor = headerColor
        if headers.count == columnData.count,
           headers.count == alignment.count {
            var data: [String:[String]] = [:]
            var align: [String:HorizontalAlignment] = [:]
            for i in 0..<headers.count {
                let key = headers[i]
                let value = columnData[i]
                data[key] = value
                align[key] = alignment[i]
            }
            dataAlignment = align
            tableData = data
        } else {
            tableData = [:]
            dataAlignment = [:]
        }
    }
    
    var body: some View {
        ScrollView {
            HStack(spacing: 30) {
                ForEach(headers, id: \.self) { header in
                    VStack {
                        Text(header)
                            .padding()
                            .background( GeometryReader { geometry in
                                Color.clear.preference(
                                    key: HeaderHeightPrefKey.self,
                                    value: geometry.size.height)
                            })
                        VStack(alignment: dataAlignment[header] ?? .center) {
                            ForEach(tableData[header] ?? [], id: \.self) { entry in
                                Text(entry)
                            }
                        }
                    }
                }
            }
            .background(
                VStack {
                Rectangle()
                    .fill(headerColor)
                    .frame(height: headerHeight, alignment: .top)
                    Spacer()
                }
            )
            .onPreferenceChange(HeaderHeightPrefKey.self) {
                headerHeight = max($0,headerHeight)
            }
        }
    }
}
private extension TableView {
    struct HeaderHeightPrefKey: PreferenceKey {
        static let defaultValue: CGFloat = 0
        
        static func reduce(value: inout CGFloat,
                           nextValue: () -> CGFloat) {
            value = max(value, nextValue())
        }
    }
}

And it is used like this:

    TableView(headers: ["Name", "Balance", "Currency"], headerColor: Color(uiColor: .systemGray5), columnData: [
        ["John", "Jennifer", "Jo", "Jill"],
        ["300", "53000", "30", "530000"],
        ["EUR", "EUR", "EUR", "EUR"]
    ], alignment: [.center, .trailing, .center])

and produces this: enter image description here

user_71293180
Related