I have several tappable buttons and two groups. I want that the "Main Hiragana" group is scaled to fit the first two columns and the "Ten-Ten / Maru" group is only scaled to the third column.
I have now the following situation:
I want to get this situation:
I tried scaling with Geometry Reader but it didn't quite work, especially with the tappable area.
I have now the following code:
import SwiftUI
struct testfile: View {
var body: some View {
VStack {
HStack {
//Button one
Button(action: {
print("Test")
}){
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("Main")
Text("Hiragana")
}
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.foregroundColor(Color("BackgroundInverse"))
.scaleEffect(x: 0.8, y: 0.8)
}
}
//Button two
Button(action: {
print("Test2")
})
{
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("Ten-Ten")
Text("Maru")
}
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.foregroundColor(Color("BackgroundInverse"))
.scaleEffect(x: 0.8, y: 0.8)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
}.padding()
}
}
How can I change the code to scale the first button and the tappable area to the first two columns below and the second button to only one column.
Adding a GeometryReader as the parent and then setting the width on the said Button will give you this look
But be cautious, you'll have to also use the geo to set the width of the buttons below to properly scale on any device.
import SwiftUI
struct testfile: View {
var body: some View {
GeometryReader { geo in
VStack {
HStack {
//Button one
Group {
Button(action: {
print("Test")
}){
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("Main")
Text("Hiragana")
}
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.foregroundColor(Color("BackgroundInverse"))
.scaleEffect(x: 0.8, y: 0.8)
}
}
}
.frame(width: geo.size.width * 0.625)
//Button two
Group {
Button(action: {
print("Test2")
})
{
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("Ten-Ten")
Text("Maru")
}
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.foregroundColor(Color("BackgroundInverse"))
.scaleEffect(x: 0.8, y: 0.8)
}
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
}.padding()
}
}
}
struct test_previews: PreviewProvider {
static var previews: some View {
testfile()
}
}
Related
I have exerciseName first and below Set 1
VStack {
Text("\(self.exerciseName)")
.font(.system(size: 27))
.fontWeight(.regular)
.foregroundColor(.white)
.frame(maxWidth: .infinity, minHeight: 60, maxHeight: 60, alignment: .leading)
.padding(.leading, 20)
.background(Color(red: 0, green: 0.32, blue: 0.575, opacity: 1))
}
.cornerRadius(15, corners: .allCorners)
.padding(.horizontal, 10)
HStack(spacing: 30) {
Text("Set \(self.set)")
.font(.system(size: 27))
.fontWeight(.medium)
.foregroundColor(.white)
.frame(maxWidth: .infinity)
TextField("Weight", text: self.$weight)
.keyboardType(.decimalPad)
.multilineTextAlignment(.center)
.frame(minWidth: 90, maxWidth: .infinity, minHeight: 60, maxHeight: 60)
.font(.system(size: 23))
.background()
.cornerRadius(15, corners: .allCorners)
TextField("Reps", text: self.$reps)
.keyboardType(.decimalPad)
.multilineTextAlignment(.center)
.frame(minWidth: 90, maxWidth: .infinity, minHeight: 60, maxHeight: 60)
.font(.system(size: 23))
.background()
.cornerRadius(15, corners: .allCorners)
}
.padding(.horizontal, 10)
and I need pressing button "Add another set" duplicate the same HStack (Set 1) with the new name "Set 2" under Set 1.
HStack(spacing: 30) {
Text("Add another set")
.font(.system(size: 14)).foregroundColor(.white)
Button {
} label: {
Image("plus")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(minWidth: 10, maxWidth: 30, minHeight: 10, maxHeight: 30 )
.foregroundColor(.white)
}
}
.padding()
How could I do that?
my project on git:
https://github.com/kulikmark/FitnessPad
I am new to swift and I am trying to wrap my view in Scrollview. The issue is that, when I wrap the content in the scrollview, the contents shrink. I have the images below.
sample code:
ScrollView(.vertical) {
GeometryReader { metrics in
HStack{
Button(action:{
isVisible = true
}, label: {
VStack(alignment: .center, spacing: 10){
Image(systemName: "book.fill")
.resizable()
.frame(width: 28, height: 22)
.padding(EdgeInsets(top: 15, leading: 0, bottom: 0, trailing: 0))
.foregroundColor(CustomColor.primaryColor)
Text("Daily Reading")
.padding(EdgeInsets(top: 0, leading: 0, bottom: 15, trailing: 0))
.foregroundColor(CustomColor.primaryColor)
}.frame(maxWidth: metrics.size.width/2.3, maxHeight: .infinity)
.background(RoundedRectangle(cornerRadius: 15)
.fill(Color.white)
.shadow(color: .gray, radius: 2, x: 0, y: 2))
})
Spacer()
Button(action: {
}, label: {
VStack(alignment: .center, spacing: 10){
Image("church")
.resizable()
.frame(maxWidth: 28, maxHeight: 22)
.padding(EdgeInsets(top: 15, leading: 0, bottom: 0, trailing: 0))
.foregroundColor(CustomColor.primaryColor)
Text("Church Prayers")
.padding(EdgeInsets(top: 0, leading: 0, bottom: 15, trailing: 0))
.foregroundColor(CustomColor.primaryColor)
}.frame(maxWidth: metrics.size.width/2.3, maxHeight: .infinity)
.background(RoundedRectangle(cornerRadius: 15)
.fill(Color.white)
.shadow(color: .gray, radius: 2, x: 0, y: 2))
})
}.frame(maxHeight: metrics.size.width/2)
.padding(.horizontal, 15)
.padding(.vertical, 7.5)
}
}
I have tried removing the GeometryReader but I am still getting the same result and I can't seem to find any helpful solution online. Thanks
on the HStack{...}, try replacing .frame(maxHeight: metrics.size.width/2) with .frame(height: metrics.size.width/2)
In my application I want to get simple round buttons based on SF Symbols of the same size. However, the same approach results in different image sizes depending on the symbol.
For example, an image with a plus sign is larger than a minus sign.
To solve this problem, I use the ZStack trick in which I put a transparent plus under the minus. But I think this is not the best solution. Are there any better solutions?
HStack{
Image(systemName: "plus")
.padding()
.overlay(
Circle()
.stroke(Color.primary,
lineWidth:1))
Image(systemName: "minus")
.padding()
.overlay(
Circle()
.stroke(Color.primary,
lineWidth:1))
//my solution
ZStack {
Image(systemName: "plus")
.padding()
.opacity(0.0)
.overlay(
Circle()
.stroke(Color.primary,
lineWidth:1))
Image(systemName: "minus")
}
}
"minus" in the center has a smaller size than "plus", "minus" on the right - my solution:
You can use ViewModifier or if are buttons ButtonStyle
ViewModifier
#available(iOS 13.0, *)
struct fillButtonCircle: ViewModifier {
var foregroundColor: Color = .white
var backgroundColor: Color = .green
var dimension: CGFloat = 10
func body(content: Content) -> some View {
content
.foregroundColor(foregroundColor)
.padding(dimension)
.background(backgroundColor)
.clipShape(Circle())
.frame(width: dimension, height: dimension)
.overlay(
Circle()
.stroke(Color.primary,
lineWidth:1))
}
}
ButtonStyle
#available(iOS 13.0, *)
struct CircleScaleButton: ButtonStyle {
var color: Color = .blue
var maxHeight: CGFloat = 35
public func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: maxHeight, alignment: .center)
.foregroundColor(.black)
.background(RoundedRectangle(cornerRadius: 35/2.0).fill(self.color))
.compositingGroup()
.clipShape(Circle())
.overlay(
Circle()
.stroke(Color.primary,
lineWidth:1))
.opacity(configuration.isPressed ? 0.8 : 1.0)
.scaleEffect(configuration.isPressed ? 0.9 : 1.0)
}
}
Example
struct SwiftUIViewTest: View {
var body: some View {
VStack {
Text("Button")
HStack {
Button(action: {}, label: {
Image(systemName: "plus")
})
.buttonStyle(CircleScaleButton(color: .clear, maxHeight: 45))
Button(action: {}, label: {
Image(systemName: "minus")
})
.buttonStyle(CircleScaleButton(color: .clear, maxHeight: 45))
}
Spacer()
.frame(height: 50)
Text("Image")
HStack {
Image(systemName: "plus")
.modifier(fillButtonCircle(foregroundColor: .black, backgroundColor: .clear, dimension: 40))
Image(systemName: "minus")
.modifier(fillButtonCircle(foregroundColor: .black, backgroundColor: .clear, dimension: 40))
}
}
}
}
use .circle
import SwiftUI
struct ContentView: View {
var body: some View {
HStack {
Image(systemName: "plus.circle")
.resizable()
.frame(width: 50, height: 50, alignment: .center)
Image(systemName: "minus.circle")
.resizable()
.frame(width: 50, height: 50, alignment: .center)
}
}
}
In my code, I have a value which counts calls from Navigation Links. This works fine but I want that if this count is over 1, the ContentView updates and add a cell. At the moment, I have to restart the app and then I have the new cell, but I want, that it updates directly. Is this possible? This is my code:
struct Website : Identifiable, Hashable, Comparable{
static func < (lhs: Website, rhs: Website) -> Bool {
lhs.name < rhs.name
}
var id = UUID()
var url : String
var name : String
var image : String
var calls : Int
}
struct websiteCallsCell : View{
var website : Website
#State var press = false
#State var tap = false
#State var isPresented = false
var body: some View{
NavigationLink(destination: WebView(website: website, url: URL(string: website.url)), label: {
Text(website.name)
.font(.system(size: 20, weight: .semibold, design: .rounded))
.frame(width: UIScreen.main.bounds.width*0.85, height: 60)
.background(
ZStack {
Color(press ? colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) : colorLiteral(red: 0.7608050108, green: 0.8164883852, blue: 0.9259157777, alpha: 1))
RoundedRectangle(cornerRadius: 16, style: .continuous)
.foregroundColor(Color(press ? colorLiteral(red: 0.7608050108, green: 0.8164883852, blue: 0.9259157777, alpha: 1) : colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)))
.blur(radius: 4)
.offset(x: -8, y: -8)
RoundedRectangle(cornerRadius: 16, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color( colorLiteral(red: 0.9019607843, green: 0.9294117647, blue: 0.9882352941, alpha: 1)), Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
)
.padding(2)
.blur(radius: 2)
}
)
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.overlay(
HStack {
AnimatedImage(url: URL(string: website.image))
.font(.system(size: 24, weight: .light))
.foregroundColor(Color.white.opacity(press ? 0 : 1))
.frame(width: press ? 220 : 54, height: press ? 4 : 50)
.background(Color( colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1)))
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.shadow(color: Color( colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1)).opacity(0.3), radius: 10, x: 10, y: 10)
.offset(x: press ? 70 : -10, y: press ? 16 : 0)
Spacer()
}
)
.shadow(color: Color(press ? colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) : colorLiteral(red: 0.7608050108, green: 0.8164883852, blue: 0.9259157777, alpha: 1)), radius: 20, x: 20, y: 20)
.shadow(color: Color(press ? colorLiteral(red: 0.7608050108, green: 0.8164883852, blue: 0.9259157777, alpha: 1) : colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)), radius: 20, x: -20, y: -20)
.scaleEffect(tap ? 1.2 : 1)
})
}
}
List{
ForEach(websites){ website in
if UserDefaults.standard.integer(forKey: "calls\(website.name)") > 0 && (UserDefaults.standard.integer(forKey: "lastCallsCount") < 8) {
VStack{
websiteCallsCell(website: website)
lineSpacing(20)
Spacer(minLength: 5)
}
}
}
}
You are checking on UserDefaults , Which is not a publisher
I have two solutions fir that :
1- use #Environmentobject with a #Published var for clicks count , then check on it , in your ContentView
2- pass the State variable to the navigation link , and in the navigation link destination declare #Binding variable , and change it in each press , then check on it in your ContentView
struct websiteCallsCell : View {
var website : Website
#Binding var pressCount : Int
// other code
}
//
struct ContentView : View {
#State var pressCount = 0
}
//
List{
ForEach(websites){ website in
if pressCount > 0 && pressCount< 8 {
VStack{
websiteCallsCell(website: website, pressCount: self.$pressCount)
lineSpacing(20)
Spacer(minLength: 5)
}
}
}
}
I am trying to create a basic lazyHGrid but after looking at a couple of different tutorials online I still can't manage to build it properly. I am trying to make a grid that is filled with rectangles with symbols and text inside those rectangles. See image below:
If I make this in a HStack all the rectangles are presented correctly, but as soon as I put it into a LazyHGrid I get this problem. Any ideas?
let rows = [
GridItem(.fixed(200)),
GridItem(.fixed(200)),
]
var product: ProductModel
var body: some View {
LazyHGrid(rows: rows, alignment: .center) {
ForEach(0..<product.imageStack01Image.count, id: \.self) { item in
ZStack(alignment: .top){
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(Color.white)
.frame(width: 200, height: 200)
.shadow(color: Color.black.opacity(0.08), radius: 20, x: 0, y: 5)
VStack(alignment: .leading) {
Image(systemName:product.imageStack01Image[item])
.font(.system(size: 40.0))
.frame(height: 40)
.foregroundColor(.red)
.padding(.top, 40)
.padding(.leading, 10)
Text(product.imageStack01Text[item])
.font(.title2)
.fontWeight(.medium)
.multilineTextAlignment(.trailing)
.padding(10)
}
}
}
}
}
As far as I understood your try to put image and text into rectangle, so try to use overlay instead of ZStack
ForEach(0..<product.imageStack01Image.count, id: \.self) { item in
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(Color.white)
.frame(width: 200, height: 200)
.shadow(color: Color.black.opacity(0.08), radius: 20, x: 0, y: 5)
.overlay(
VStack(alignment: .leading) {
Image(systemName:product.imageStack01Image[item])
.font(.system(size: 40.0))
.frame(height: 40)
.foregroundColor(.red)
.padding(.top, 40)
.padding(.leading, 10)
Text(product.imageStack01Text[item])
.font(.title2)
.fontWeight(.medium)
.multilineTextAlignment(.trailing)
.padding(10)
})
}
}
It might have to do with the hardcoded frame in your square. Try using aspectRatio if you just want a square or frame each layer of the ZStack or frame the ZStack depending on what you want to achieve.
import SwiftUI
struct LazyGridSample: View {
///Sample Products to reproduce
#State var products = ["0xxxxxxxxxx0xxxxxxxxxx","1xxxxxxxxxx0xxxxxxxxxx","2xxxxxxxxxx0xxxxxxxxxx","3xxxxxxxxxx0xxxxxxxxxx","4xxxxxxxxxx0xxxxxxxxxx","5xxxxxxxxxx0xxxxxxxxxx","6xxxxxxxxxx0xxxxxxxxxx","7xxxxxxxxxx0xxxxxxxxxx","8xxxxxxxxxx0xxxxxxxxxx","9xxxxxxxxxx0xxxxxxxxxx"]
let rows = [
GridItem(.fixed(200)),
GridItem(.fixed(200)),
]
let squareSize: CGSize = CGSize(width: 200, height: 200)
var body: some View {
//ScrollView(.horizontal){
LazyHGrid(rows: rows, alignment: .center) {
//HStack{
ForEach(0..<products.count, id: \.self) { idx in
ZStack(alignment: .top){
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(Color.white)
//.frame(width: squareSize.width, height: squareSize.height)
//.aspectRatio(1, contentMode: .fill)
.shadow(color: Color.black.opacity(0.08), radius: 20, x: 0, y: 5)
VStack(alignment: .leading) {
//Removed Image
Text(products[idx].description)
.font(.title2)
.fontWeight(.medium)
.multilineTextAlignment(.trailing)
.padding(10)
}//.frame(width: squareSize.width, height: squareSize.height, alignment: .center)
//.aspectRatio(1, contentMode: .fill)
}//Adjusts the the entire ZStack
//.frame(width: squareSize.width, height: squareSize.height, alignment: .center)
.aspectRatio(1, contentMode: .fill)
}
}
//}//ScrollView
}
}
struct LazyGridSample_Previews: PreviewProvider {
static var previews: some View {
LazyGridSample()
}
}