iOS中Google登录按钮显示异常（呈蓝色且无指定文字）求助

我编写了如下Swift代码实现AuthViewController，其中创建的Google登录按钮渲染后呈蓝色，且未显示预期的“Continue with Google”文字，请问问题出在哪里？

import UIKit

class AuthViewController: UIViewController {
    private let scrollView = UIScrollView()
    private let containerView = UIView()

    // MARK: - Login Form Elements
    private let titleLabel = UILabel()
    private let emailTextField = UITextField()
    private let passwordTextField = UITextField()
    private let loginButton = UIButton(type: .system)
    private let alreadyHaveAccountButton = UIButton(type: .system)
    private let forgotPasswordButton = UIButton(type: .system)
    private let loginWithAppleButton = UIButton(type: .system)

    // MARK: - Signup Form Elements
    private let firstNameTextField = UITextField()
    private let lastNameTextField = UITextField()
    private let signupEmailTextField = UITextField()
    private let signupPasswordTextField = UITextField()
    private let signupSubmitButton = UIButton(type: .system)

    private var isSignupFormVisible = false

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupScrollView()
        setupLoginForm()
        //setupSignupForm()
        // toggleSignupFormVisibility(show: false)
    }

    private func setupScrollView() {
        view.addSubview(scrollView)
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(containerView)
        containerView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),

            containerView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
    }

    private func setupLoginForm() {
        let stackView = UIStackView(arrangedSubviews: [
            titleLabel,
            createTextField(placeholder: "Email", textField: emailTextField),
            createTextField(placeholder: "Password", textField: passwordTextField, isSecure: true),
            loginButton,
            createGoogleSignInButton(),
            loginWithAppleButton,
            alreadyHaveAccountButton,
            forgotPasswordButton
        ])
        stackView.axis = .vertical
        stackView.spacing = 12
        stackView.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(stackView)

        titleLabel.text = "Login"
        titleLabel.textAlignment = .center
        titleLabel.font = UIFont(name: "Inter-Bold", size: 24)
        loginButton.setTitle("Login", for: .normal)
        loginButton.titleLabel?.font = UIFont(name: "Inter-Bold", size: 18)
        forgotPasswordButton.titleLabel?.font = UIFont(name: "Inter-Regular", size: 16)
        forgotPasswordButton.setTitle("Forgot Password?", for: .normal)
        loginWithAppleButton.titleLabel?.font = UIFont(name: "Inter-Regular", size: 16)
        loginWithAppleButton.setTitle("Login with Apple", for: .normal)
        alreadyHaveAccountButton.setTitle("Don't have an account? Sign Up", for: .normal)
        alreadyHaveAccountButton.titleLabel?.font = UIFont(name: "Inter-Regular", size: 16)

        alreadyHaveAccountButton.addTarget(self, action: #selector(switchToSignupForm), for: .touchUpInside)

        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.topAnchor, constant: 50),
            stackView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
            stackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -20)
        ])
    }

    private func setupSignupForm() {
        let stackView = UIStackView(arrangedSubviews: [
            titleLabel,
            createTextField(placeholder: "First Name", textField: firstNameTextField),
            createTextField(placeholder: "Last Name", textField: lastNameTextField),
            createTextField(placeholder: "Email", textField: signupEmailTextField),
            createTextField(placeholder: "Password", textField: signupPasswordTextField, isSecure: true),
            signupSubmitButton,
            loginWithAppleButton,
            createGoogleSignInButton(),
            alreadyHaveAccountButton
        ])
        stackView.axis = .vertical
        stackView.spacing = 12
        stackView.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(stackView)

        titleLabel.text = "Sign Up"
        titleLabel.textAlignment = .center
        titleLabel.font = UIFont(name: "Inter-Bold", size: 24)
        signupSubmitButton.setTitle("Sign Up", for: .normal)
        signupSubmitButton.titleLabel?.font = UIFont(name: "Inter-Bold", size: 18)
        alreadyHaveAccountButton.titleLabel?.font = UIFont(name: "Inter-Regular", size: 16)
        alreadyHaveAccountButton.setTitle("Already have an account? Login", for: .normal)
        loginWithAppleButton.setTitle("Sign Up with Apple", for: .normal)

        alreadyHaveAccountButton.addTarget(self, action: #selector(switchToLoginForm), for: .touchUpInside)

        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.topAnchor, constant: 50),
            stackView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
            stackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -20)
        ])
    }

    @objc private func switchToSignupForm() {
        for subview in containerView.subviews {
            subview.removeFromSuperview()
        }
        setupSignupForm()
    }

    @objc private func switchToLoginForm() {
        for subview in containerView.subviews {
            subview.removeFromSuperview()
        }
        setupLoginForm()
    }

    private func createTextField(placeholder: String, textField: UITextField, isSecure: Bool = false) -> UITextField {
        textField.placeholder = placeholder
        textField.borderStyle = .roundedRect
        textField.isSecureTextEntry = isSecure
        textField.translatesAutoresizingMaskIntoConstraints = false
        textField.heightAnchor.constraint(equalToConstant: 50).isActive = true
        textField.layer.borderWidth = 1
        textField.layer.borderColor = UIColor.black.cgColor
        return textField
    }
    
    private func createGoogleSignInButton() -> UIButton {
        let button = UIButton(type: .system)
        button.setImage(UIImage(named: "google"), for: .normal)
        button.imageView?.contentMode = .scaleAspectFit
        button.translatesAutoresizingMaskIntoConstraints = false
        button.heightAnchor.constraint(equalToConstant: 50).isActive = true
        button.widthAnchor.constraint(equalToConstant: 200).isActive = true
        return button
    }
}

问题原因及修复方案 #

1. 未设置按钮标题，导致文字不显示

在createGoogleSignInButton方法中，仅给按钮添加了图标，但没有调用setTitle方法设置“Continue with Google”文字，因此按钮不会显示预期文本。

2. 使用系统类型按钮，默认带蓝色样式

创建按钮时使用了.system类型，这种按钮默认会应用系统的tint颜色（通常为蓝色），且背景会随按钮状态呈现蓝色调，不符合Google登录按钮的样式预期。

修复后的createGoogleSignInButton方法 #

private func createGoogleSignInButton() -> UIButton {
    // 使用.custom类型按钮，避免系统默认样式干扰
    let button = UIButton(type: .custom)
    // 设置按钮标题
    button.setTitle("Continue with Google", for: .normal)
    // 设置标题颜色为黑色
    button.setTitleColor(.black, for: .normal)
    // 设置Google图标
    button.setImage(UIImage(named: "google"), for: .normal)
    button.imageView?.contentMode = .scaleAspectFit
    // 调整图标与文字的间距，优化布局
    button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 8)
    button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.heightAnchor.constraint(equalToConstant: 50).isActive = true
    // 移除固定宽度约束，让按钮自适应内容或与其他控件对齐
    // button.widthAnchor.constraint(equalToConstant: 200).isActive = true
    // 添加圆角和边框，模拟官方Google登录按钮样式
    button.layer.cornerRadius = 8
    button.layer.borderWidth = 1
    button.layer.borderColor = UIColor.lightGray.cgColor
    button.backgroundColor = .white
    return button
}

替代方案（保留.system类型按钮） #

如果需要保留.system类型按钮，可通过调整属性去掉蓝色背景：

private func createGoogleSignInButton() -> UIButton {
    let button = UIButton(type: .system)
    button.setTitle("Continue with Google", for: .normal)
    button.setImage(UIImage(named: "google"), for: .normal)
    button.imageView?.contentMode = .scaleAspectFit
    // 修改tint颜色为黑色，覆盖系统默认蓝色
    button.tintColor = .black
    // 设置白色背景
    button.backgroundColor = .white
    // 添加边框和圆角
    button.layer.cornerRadius = 8
    button.layer.borderWidth = 1
    button.layer.borderColor = UIColor.lightGray.cgColor
    button.translatesAutoresizingMaskIntoConstraints = false
    button.heightAnchor.constraint(equalToConstant: 50).isActive = true
    return button
}

内容的提问来源于stack exchange，提问作者Chris Hansen