Bartek
Reputation: 93
SwiftUI - Scale Buttons and tappable area
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.
Upvotes: 0
Views: 345
Answers (1)
Sergio Bost
Reputation: 3209
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()
}
}
Upvotes: 1
Related Questions
- SwiftUI: How can I increase the area in which a button can be triggered?
- How to make SwiftUI Buttons a fixed size?
- How to increase the size of a Button in SwiftUI? (Multiplatform project)
- Tappable area of Button and Image in SwiftUI
- Enlarged buttons and screen
- How to specify or change the clickable area of a button SwiftUI
- SwiftUI Touchable Area of a Button
- SwiftUI Button proportional width height
- Adjust button sizes based on screen size
- How do I increase button size as it is tapped in iOS?