Creating a Registration Page

Top stack View에 만들었던 settingsbutton에 addTarget 함수를 이용해 handle 함수를 추가

topStackView.settingsButton.addTarget(self, action: #selector(handleSettings), for: .touchUpInside)

새로운 viewController file 생성 (as Cocoa Touch Class)

		let registrationController = RegistrationController()
        present(registrationController, animated: true)

present를 사용하여 다른 controller를 호출한다.

AppDelegate.swift

change rootViewController to reduce testing time

	func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        window = UIWindow()         // window를 수동으로 설정한다.
        window?.makeKeyAndVisible() // window를 볼 수 있게 해준다.
        window?.rootViewController = RegistrationController()
        
        return true
    }

Let’s make UI!

UIButton과 UITextField들을 만들어보자

    let selectPhotoButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("Select Photo", for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 32, weight: .heavy)
        button.setTitleColor(.black, for: .normal)
        button.backgroundColor = .white
        button.layer.cornerRadius = 15
        button.heightAnchor.constraint(equalToConstant: 275).isActive = true
        return button
    }()
    
    let fullNameTextField: UITextField = {
        let tf = UITextField()
        tf.placeholder = "Enter full name"
        tf.blackgroundColor = .white
        tf.heightAnchor.constraint(equalToConstant: 275).isActive = true
        return tf
    }()
    
    let emailTextField: UITextField = {
        let tf = UITextField()
        tf.placeholder = "Enter email"
        tf.keyboardType = .emailAddress
		tf.blackgroundColor = .white
        tf.heightAnchor.constraint(equalToConstant: 275).isActive = true
        return tf
    }()
    
    let passwordTextField: UITextField = {
        let tf = UITextField()
        tf.placeholder = "Enter password"
        tf.blackgroundColor = .white
        tf.isSecureTextEntry = true
        tf.heightAnchor.constraint(equalToConstant: 275).isActive = true
        return tf
    }()

stackView에서 centerXAnchor는 굳이 설정하지 않아도 되는 것 같다. stackView는 정말 많이 쓰고 유용한 것 같다!!

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .red
        
        let stackView = UIStackView(arrangedSubviews: [
            selectPhotoButton,
            fullNameTextField,
            emailTextField,
            passwordTextField
            ])
        
        view.addSubview(stackView)
        stackView.spacing = 8
        stackView.axis = .vertical
        stackView.anchor(top: nil, leading: view.leadingAnchor, bottom: nil, trailing: view.trailingAnchor, padding: .init(top: 0, left: 50, bottom: 0, right: 50))
        stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }

여기서 UITextField의 반복되는 공통 작업들을 없애기 위해서 새로운 class를 만든다.

class CustomTextField: UITextField {
        override var intrinsicContentSize: CGSize {
            return .init(width: 0, height: 50)
        }
        
        override init(frame: CGRect) {
            super.init(frame: .zero)
            self.backgroundColor = .white
            self.layer.cornerRadius = 25
        }
        
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }

intrinsicContentSize Apple document -> The natural size for the receiving view, considering only properties of the view itself.

intrinsic: 고유한, 본래의

관련 블로그

사용하는 이유는 anchor 코드들을 가릴 수 있기 때문이다. 아마 anchor 코드가 복잡하고 실수하기 쉬워서 그런 것 같다.

give Padding to TextField

editrect, textrect으로 호출하면 쉽다

textRect(forBounds:)

Returns the drawing rectangle for the text field’s text.

        override func textRect(forBounds bounds: CGRect) -> CGRect {
            return bounds.insetBy(dx: 16, dy: 0)
        }
        
        override func editingRect(forBounds bounds: CGRect) -> CGRect {
            return bounds.insetBy(dx: 16, dy: 0)
        }

editingRect는 편집 중인 상태, textRect는 normal에 적용해주는 것이여서 둘다 꼭 해준다.

		init(padding: CGFloat) {
            self.padding = padding
            super.init(frame: .zero)
            self.backgroundColor = .white
            self.layer.cornerRadius = 25
        }

원래는 기본적으로 override init을 하는데 여기서 인자를 바꿔줬기 때문에 init을 override하지 않고 사용한다. init인자를 default override인 (frame: CGRect)가 아니기 때문에 선언할 때 인자를 넣어줘야한다.

super.init(frame: .zero)은 잊지 말기!

Gradient Layer

Gradient는 항상 Layer이며 색깔과 위치를 array로 준다. Color Literal로 손쉽게 색깔을 정할 수 있다.

	fileprivate func setupGradientLayer() {
        let gradientLayer = CAGradientLayer()
        let topColor = #colorLiteral(red: 0.9921568627, green: 0.3568627451, blue: 0.3725490196, alpha: 1)
        let bottomColor = #colorLiteral(red: 0.8980392157, green: 0, blue: 0.4470588235, alpha: 1)
        // make sure to use cgColor
        gradientLayer.colors = [topColor.cgColor, bottomColor.cgColor]
        gradientLayer.locations = [0, 1]
        view.layer.addSublayer(gradientLayer)
        gradientLayer.frame = view.bounds
    }

cgColor 쓰는 것 잊지 말기!

UIColor와 cgColor 차이점

너무나 깔끔하게 설명해주시는 Zedd님 블로그

+HW Register Button 추가

	let registerButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("Register", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 18, weight: .bold)
        button.backgroundColor = #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1)
        button.layer.cornerRadius = 25
        button.heightAnchor.constraint(equalToConstant: 50).isActive = true
        return button
    }()

태그:

카테고리:

업데이트:

댓글남기기