Home>

I'm a Swift beginner. I have a question about Swift UI.
I want to resize the layout in response to changes in the iPhone device.
I want to change the frame size, but I'm in trouble because I don't know how to do it.
If anyone knows, please teach me.

import SwiftUI
import SwiftUI
struct ContentView: View {
    @State var inputEmail: String = ""
    @State var inputPassword: String = ""
    @State private var isLoginChecked = false
    var body: some View {
        ZStack {
            if (! isLoginChecked) {
                VStack (alignment: .center, spacing: 12.0) {
                    Text ("login")
                        .font (.system (size: 48,
                                      weight: .heavy)))
                    VStack (spacing: 30) {
                        TextField ("ID", text: $inputEmail)
                            .textFieldStyle (RoundedBorderTextFieldStyle ())
                            .frame (maxWidth: 280)
                        SecureField ("Password", text: $inputPassword)
                            .textFieldStyle (RoundedBorderTextFieldStyle ())
                            .frame (maxWidth: 280)
                    }
                    .frame (height: 200.0)
                    Button (action: {
                       print ("Login processing")
                        self.isLoginChecked.toggle ()
                    },
                    label: {
                        Text ("Login")
                            .fontWeight (.medium)
                            .frame (minWidth: 160)
                            .foregroundColor (.white)
                            .padding (12)
                            .background (Color.accentColor)
                            .cornerRadius (8)
                    })
                }
            }
            else {
                LoginView ()
            }
        }
    }
}
  • Answer # 1

    let screen: CGSize = UIScreen.main.bounds

    You can use this to get the size of the screen, so

    TextField ("ID", text: $inputEmail)
        .textFieldStyle (RoundedBorderTextFieldStyle ())
        .frame (maxWidth: screen.width --30)


    Subtract from the width of the device,

    TextField ("ID", text: $inputEmail)
        .textFieldStyle (RoundedBorderTextFieldStyle ())
        .frame (maxWidth: screen.width/1.1)


    It would be a good idea to set the size relatively as the width of the screen ÷ 1.1.