How to: Layout in Swift UI using ZStack, VStack, HStack - ios

Question

I am trying to achieve this layout https://gyazo.com/9714f8f1bff98edb3365338563b28fe8 in Swift UI using V and H Stacks. So far I have achieved this https://gyazo.com/fec9ae229e59a41add6542c9a8ad31af. I haven't found the right approach just yet on what to do here for more manipulation. What properties would help me achieve the desired layout?
Update! Here is what I have figured out so far... Almost there.
UPDATED CODE AND CANVAS HERE: https://gyazo.com/d12b9a831f50c25f8f854dc2143c93dc
import SwiftUI
struct CustomBlock: View {
var leading: String
var trailing: String
var body: some View {
VStack {
HStack (alignment: .firstTextBaseline, spacing: 18){
Button(action: {}){
Text(leading)
.bold()
.font(Font.custom("Helvetica Neue", size: 21.0))
.padding(25)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.multilineTextAlignment(.center)
.fixedSize()
.frame(width: 150, height: 50, alignment: .center)
}
Button(action: {}){
Text(trailing)
.bold()
.font(Font.custom("Helvetica Neue", size: 21.0))
.padding(25)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.multilineTextAlignment(.center)
.fixedSize()
.frame(width: 150, height: 50, alignment: .center)
}
}
}.padding()
}
}
struct ContentView: View {
var body: some View {
ZStack {
Color.init(hue: 0.2722, saturation: 0.89, brightness: 0.29, opacity: 1.0) .edgesIgnoringSafeArea(.all)
VStack {
HStack {
StrokeText(text: "Dividend Chaser", width: 0.5, color: .black)
.foregroundColor(.white)
.font(.system(size: 45, weight: .bold))
}
ZStack {
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill( Color.init(red: 0.33, green: 0.56, blue: 0.27))
.frame(width: 350, height: 240)
}
CustomBlock(leading: "Today's List", trailing: "Tomorrow's List").lineLimit(2)
CustomBlock(leading: "This Month", trailing: "Next Month").lineLimit(2)
CustomBlock(leading: "3% Yeild Or Higher", trailing: "5% Yeild Or Higher").lineLimit(2)
CustomBlock(leading: "App Help", trailing: "More Apps").lineLimit(2)
}
}
}
}

Answer 1

Here is a demo of approach. Tested with Xcode 12 / iOS 14.
struct DemoButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.foregroundColor(.white).font(Font.body.bold())
.frame(maxWidth: .infinity).padding(.vertical, 10)
.background(RoundedRectangle(cornerRadius: 8).fill(Color.green))
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity)
}
}
struct TestButtonsGridLayout: View {
var body: some View {
VStack(spacing: 1) {
HStack(spacing: 1) {
Button("Today's\nList") {}
Button("Tomorrow's\nList") {}
}
HStack(spacing: 1) {
Button("This\nMonth") {}
.overlay(RoundedRectangle(cornerRadius: 8)
.stroke(lineWidth: 4).foregroundColor(.white).padding(2))
Button("Next\nMonth") {}
}
// .. other same here
}.buttonStyle(DemoButtonStyle())
}
}
Note: a) button style can be applied per-button b) show overlay selection can be also moved in style and activated by some state variable.