CODEWITHSUNDEEP
swiftswiftui
Cesare
Cesare

Reputation: 9419

How to build a horizontal chart in SwiftUI

I would like to build the following view and be able to control how much each view fills the outer rectangle:

enter image description here

This is what I have so far:

import SwiftUI

struct TestView: View {
    var body: some View {
        HStack(spacing: 0) {
            Rectangle().fill(Color.blue)
            Rectangle()
                    .fill(Color.yellow)
                Rectangle()
                    .fill(Color.pink)
         }
        .cornerRadius(8)
        .frame(maxHeight: 25)
    }
}

Since a HStack decides how to lay out the views on its own, I'm not sure if that's the right View to use. I've tried with a Capsule but it's just a rounded rectangle. What can I use to build the View above? Ideally, I would like to give a percentage to the view and then make it fill appropriately.

Upvotes: 0

Views: 780

Answers (1)

Asperi
Asperi

Reputation: 258621

Here is a demo of possible approach (tested with Xcode 12 / iOS 14)

demo

var body: some View {
    Color.clear    // << placeholder
        .frame(maxWidth: .infinity, maxHeight: 25)
        .overlay(GeometryReader { gp in
            // chart is here
            HStack(spacing: 0) {
                Rectangle().fill(Color.blue)
                    .frame(width: 0.6 * gp.size.width)
                Rectangle()
                    .fill(Color.yellow)
                    .frame(width: 0.1 * gp.size.width)
                Rectangle()
                    .fill(Color.pink)
                    .frame(width: 0.3 * gp.size.width)
            }
        })
        .clipShape(RoundedRectangle(cornerRadius: 8))
}

Upvotes: 2

Related Questions