SwiftUI: расположение кнопок входа в Google и Facebook - PullRequest
Новая
       132

SwiftUI: расположение кнопок входа в Google и Facebook

0 голосов
/ 09 мая 2020

Я использую Firebase Auth и у меня две кнопки. Один для Google и один для Facebook. Я пытаюсь установить высоту и ширину с помощью .frame(), но они не отвечают должным образом. Кроме того, кнопка входа в Google будет отображаться не в центре, а в правой части экрана.

Я пытался поместить их в VStack, но все равно то же самое. 

VStack(alignment: .center) {
    FacebookLoginButtonView()
        .frame(width: 100, height: 28) // duhet 28 fiks
        .border(Color.red)

    GoogleLoginButtonView()
        .frame(width: 100, height: 28)
        .border(Color.red)

}

Есть идеи, как расположить их в центре, а также, возможно, придать им одинаковую высоту? Установка .frame(width: 100, height: 28) для FB любой высоты, кроме 28, вызовет ошибку.

FacebookLoginButtonView 

struct FacebookLoginButtonView: UIViewRepresentable {
    @EnvironmentObject var userViewModel: UserViewModel
    func makeCoordinator() -> Coordinator {
        return Coordinator(userViewModel: userViewModel)
    }

    func makeUIView(context: UIViewRepresentableContext<FacebookLoginButtonView>) -> FBLoginButton {
        let button = FBLoginButton()
        button.permissions = ["public_profile", "email"]
        button.delegate = context.coordinator
        return button
    }

    func updateUIView(_ uiView: FBLoginButton, context: UIViewRepresentableContext<FacebookLoginButtonView>) {
        //
    }

    class Coordinator: NSObject, LoginButtonDelegate {
        var userViewModel: UserViewModel

        init(userViewModel: UserViewModel) {
            self.userViewModel = userViewModel
        }

        func loginButton(_ loginButton: FBLoginButton, didCompleteWith result: LoginManagerLoginResult?, error: Error?) {
            if error != nil {
                // print(error?.localizedDescription)
                return
            }

            if let currentAccessToken = AccessToken.current {
                let credential = FacebookAuthProvider.credential(withAccessToken: currentAccessToken.tokenString)
                Auth.auth().signIn(with: credential, completion: AuthService(userViewModel: userViewModel).registerHandler)
            }
        }

        func loginButtonDidLogOut(_ loginButton: FBLoginButton) {
            try? Auth.auth().signOut()
        }
    }
}

GoogleLoginButtonView 

struct GoogleLoginButtonView: UIViewRepresentable {
    @EnvironmentObject var userViewModel: UserViewModel
    func makeCoordinator() -> Coordinator {
        return Coordinator(userViewModel: userViewModel)
    }

    func makeUIView(context: UIViewRepresentableContext<GoogleLoginButtonView>) -> GIDSignInButton {
        let button = GIDSignInButton()
        button.style = .wide
        GIDSignIn.sharedInstance().clientID = FirebaseApp.app()?.options.clientID
        GIDSignIn.sharedInstance().delegate = context.coordinator
        GIDSignIn.sharedInstance()?.presentingViewController = UIApplication.shared.windows.first?.rootViewController
        return button
    }

    func updateUIView(_ uiView: GIDSignInButton, context: UIViewRepresentableContext<GoogleLoginButtonView>) {

    }

    class Coordinator: NSObject, GIDSignInDelegate {
        var userViewModel: UserViewModel

        init(userViewModel: UserViewModel) {
            self.userViewModel = userViewModel
        }

        func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error?) {
            // ...
            if let error = error {
                print(error.localizedDescription)
                return
            }

            guard let authentication = user.authentication else { return }
            let credential = GoogleAuthProvider.credential(withIDToken: authentication.idToken, accessToken: authentication.accessToken)

            Auth.auth().signIn(with: credential, completion: AuthService(userViewModel: userViewModel).registerHandler)
        }

        func sign(_ signIn: GIDSignIn!, didDisconnectWith user: GIDGoogleUser!, withError error: Error!) {
            // Perform any operations when the user disconnects from app here.
            // ...
        }
    }
}

enter image description here

1 Ответ

1 голос
/ 09 мая 2020

Вероятно, вы заметили, что ваши рамки слишком маленькие, а эти кнопки имеют жесткий размер, вы можете сделать их больше или, по крайней мере, для кнопки Google попробуйте использовать любой из других стилей , теперь вы используете button.style = .wide.

Другое решение - не использовать их, создать свои собственные представления для репликации каждой кнопки и вызова функций за кулисами.

Google: 

struct GoogleAuthButtonView: View {
    var body: some View {
        Button(action: {
        GIDSignIn.sharedInstance()?.presentingViewController = UIApplication.shared.windows.last?.rootViewController
        GIDSignIn.sharedInstance()?.signIn()
            //Any other function here
        }) {
            HStack {
                Image("icon-google").renderingMode(.original)
                    .accessibility(label: Text("Sign in with Google"))
                Spacer()
                Text("Sign in with Google")
                    .foregroundColor(.cGoogleAuthText).bold()
                Spacer()
            }
        }
        .padding()
        .cornerRadius(16)
        .background(Color.white)
        .shadow(color: Color.init(red: 0.0, green: 0.0, blue: 0.0, opacity: 0.06), radius: 8, x: 0, y: 4)
        .frame(width: 200, height: 28)
    }
}

Facebook - та же идея, но с изменением действия: 

Button(action: {
    LoginManager().logIn(permissions: ["public_profile", "email"], from: UIHostingController(rootView: self)) { (result, error) in
        //Do stuff here
    }
}) {
    Text("Continue with Facebook")
}

Надеюсь, это вам поможет!

...