[iOS] 로그인화면 만들기

doooly·2023년 6월 27일

목록 보기

1/8

[ 로그인 화면 만들기 ]

UILabel
UITextField
UIButton
UIView
extension

간단한 로그인 화면 뷰를 만드는 과정을 기록하려고 합니다 😊
사용되는 요소는 위와 같으며, 각각의 자세한 내용보다 뷰를 만드는 전체적인 느낌을 기록하려고 해요

만든 로그인 화면은 아래와 같습니다

1. UILabel 사용해 제목 만들기
2. UITextField 사용해 이메일 입력창 만들기
3. UITextField 사용해 비밀번호 입력창 만들기
4. UIButton 사용해 로그인 버튼 만들기
5. UIButton 사용해 비밀번호 찾는 뷰로 넘어가게 하기 (추후)
6. UITextField, UIView 사용해 간편로그인 명시하기
7. UIButton, UIImage 사용해 간편로그인 종류 만들기
8. UIButton 사용해 회원가입 버튼 만들기

1. 제목만들기

title.text를 "Login View"로 설정
textColor 설정
#colorLital(
누르시면

이런식으로 네모난 창이 떠서 아래 사진 처럼 색을 고를 수 있습니당

  let Title : UILabel = {
       let title = UILabel()
        title.text = "Login View"
        title.textColor = #colorLiteral(red: 0.9972829223, green: 0, blue: 0.4537630677, alpha: 1)
        title.font = UIFont.boldSystemFont(ofSize: 50)
        //두꺼운 폰트 사용
        return title
    }()

2. 이메일 입력창

placeholder 사용
cornerRadius 사용해 모서리 둥글게
UIButton의 clearButtonMode func를 사용해 글자를 초기화하는 버튼(x표시) 구현
-> editing때만 표시하도록

 let EmailButton : UITextField = {
        let emailBtn = UITextField()
        emailBtn.placeholder = "   이메일 주소"
        emailBtn.backgroundColor = .systemGray6
        emailBtn.layer.cornerRadius = 25
        //모서리 둥글게
        emailBtn.clearButtonMode = .whileEditing
        //clear모드 설정
        return emailBtn
    }()

3. 비밀번호 입력창

이메일 입력창과 동일하게

비밀번호 입력이므로 숫자가 보이지 않게
UIButton의 isSecureTextEntry 사용

    let PasswordButton : UITextField = {
        let passwordBtn = UITextField()
        passwordBtn.placeholder = "   비밀번호"
        passwordBtn.backgroundColor = .systemGray6
        passwordBtn.layer.cornerRadius = 25
        passwordBtn.clearButtonMode = .whileEditing
        passwordBtn.isSecureTextEntry = true
        return passwordBtn
    }()

4. 로그인 버튼

UIButton으로 2, 3번과 동일하게 구현

5. 비밀번호를 잊으셨나요?

extension으로 underLine 그리는 함수 정의
출처는 https://ios-development.tistory.com/742

   
    let ForgetPassword : UIButton = {
        let FpBtn =  UIButton()
       FpBtn.setTitle("비밀번호를 잊으셨나요?", for: .normal)
        FpBtn.setTitleColor(UIColor.systemGray, for: .normal)
        FpBtn.titleLabel?.font = UIFont.systemFont(ofSize: 15)
       
        FpBtn.setUnderLine()
        //setUnderLine extension으로 설정
        
        return FpBtn
    }()

6. 간편 로그인

5번과 동일하게 구현
UIView 두 개를 얇게 만들어 양쪽 선 구현

 let LoginGuide_1 : UIView = {
        let lineView = UIView()
        lineView.backgroundColor = .systemGray
        return lineView
    }()

7. 간편로그인 버튼

버튼 세 개 만들어 constraint 잡음
cornerRadius으로 둥근 모양 설정
.setImage를 통해 UIButton의 이미지 설정

 let ForKakaoBtn : UIButton = {
        let kakao = UIButton()
        kakao.layer.cornerRadius = 40
        //둥근 모양 설정
        
        kakao.backgroundColor = #colorLiteral(red: 0.9972829223, green: 0, blue: 0.4537630677, alpha: 1)
        kakao.setImage(Image.kakaoIMG, for: .normal)
        return kakao
    }()

Assets에 이미지 업로드 후 kakaoIMG로 저장

import UIKit
struct Image {
    static let kakaoIMG = UIImage(named: "kakaoIMG")
    }

Image struct를 따로 생성함
Assets에 있는 kakaoIMG라는 이미지를 struct에서 kakaoIMG라는 상수로 지정
-> 위의 ForKakaoBtn에서 kakao.setImage에 Image.kakaoIMG 사용함

8. 회원가입

위의 방식과 동일

Constraint, addSubview

constraint 함수 생성

func makeConstraint(){
    	Title.translatesAutoresizingMaskIntoConstraints = false
        EmailButton.translatesAutoresizingMaskIntoConstraints = false
        . . . 
        }

NSLayoutConstraint.activate([...])
를 이용해 간격 설정(임의)

makeSubview 함수 생성


	func makeSubview(){
    	addSubview(Title)
        addSubview(EmailButton)
        ...
        }

함수를 만들어 요소들을 view에 추가함

init()

init 함수 오버라이드해 호출
위에서 만든 makeSubview(), makeConstraint() 호출

 override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        makeSubView()
        makeConstraint()
    }
    
    required init?(coder _: NSCoder) {
        fatalError("Error")
    }

+ 해당 로그인 화면은 UIView로 만들었기 때문에, ViewController에서 해당 View의 인스턴스를 만들어 view로 지정해야 함

전체 코드 입니다 :)

import UIKit

class LoginView : UIView{
    
    let Title : UILabel = {
       let title = UILabel()
        title.text = "Login View"
        title.textColor = #colorLiteral(red: 0.9972829223, green: 0, blue: 0.4537630677, alpha: 1)
        title.font = UIFont.boldSystemFont(ofSize: 50)
        //두꺼운 폰트 사용
        
        return title
    }()
    
    let EmailButton : UITextField = {
        let emailBtn = UITextField()
        emailBtn.placeholder = "   이메일 주소"
        emailBtn.backgroundColor = .systemGray6
        emailBtn.layer.cornerRadius = 25
        //모서리 둥글게
        emailBtn.clearButtonMode = .whileEditing
        //clear모드 설정
        return emailBtn
    }()
    
    let PasswordButton : UITextField = {
        let passwordBtn = UITextField()
        passwordBtn.placeholder = "   비밀번호"
        passwordBtn.backgroundColor = .systemGray6
        passwordBtn.layer.cornerRadius = 25
        passwordBtn.clearButtonMode = .whileEditing
        passwordBtn.isSecureTextEntry = true
        return passwordBtn
    }()
    
    let LoginButton : UIButton={
        let loginBtn = UIButton()
        loginBtn.setTitle("로그인", for: .normal)
        loginBtn.backgroundColor = #colorLiteral(red: 0.9972829223, green: 0, blue: 0.4537630677, alpha: 1)
        loginBtn.layer.cornerRadius = 25
        return loginBtn
    }()
    
    let ForgetPassword : UIButton = {
        let FpBtn =  UIButton()
       FpBtn.setTitle("비밀번호를 잊으셨나요?", for: .normal)
        FpBtn.setTitleColor(UIColor.systemGray, for: .normal)
        FpBtn.titleLabel?.font = UIFont.systemFont(ofSize: 15)
       
        FpBtn.setUnderLine()
        //setUnderLine extension으로 설정
        
        return FpBtn
    }()
    
    let EasyLogin : UITextField = {
       let easylogin = UITextField()
        easylogin.text = "간편 로그인"
        easylogin.textColor = .systemGray
        easylogin.font = UIFont.systemFont(ofSize: 15)
        return easylogin
    }()
    
    let LoginGuide_1 : UIView = {
        let lineView = UIView()
        lineView.backgroundColor = .systemGray
        return lineView
    }()
    
    let LoginGuide_2 : UIView = {
        let lineView = UIView()
        lineView.backgroundColor = .systemGray
        return lineView
    }()
    
    
    
    let ForKakaoBtn : UIButton = {
        let kakao = UIButton()
        kakao.layer.cornerRadius = 40
        //둥근 모양 설정
        
        kakao.backgroundColor = #colorLiteral(red: 0.9972829223, green: 0, blue: 0.4537630677, alpha: 1)
        kakao.setImage(Image.kakaoIMG, for: .normal)
        return kakao
    }()
    
    let ForFaceBtn : UIButton = {
       let face = UIButton()
        face.layer.cornerRadius = 40
        face.backgroundColor = #colorLiteral(red: 0.9972829223, green: 0, blue: 0.4537630677, alpha: 1)
        face.setImage(Image.facebookIMG, for: .normal)
        return face
    }()
    
    let ForGoogleBtn : UIButton = {
        let google = UIButton()
        google.layer.cornerRadius = 40
        google.backgroundColor = #colorLiteral(red: 0.9972829223, green: 0, blue: 0.4537630677, alpha: 1)
        google.setImage(Image.googleIMG, for: .normal)
        return google
    }()
    
    let NotYet : UIButton = {
      let notyet = UIButton()
        notyet.setTitle("아직 회원이 아니신가요?", for: .normal)
        notyet.setTitleColor(.systemGray, for: .normal)
        notyet.titleLabel?.font = UIFont.systemFont(ofSize: 15)
        return notyet
    }()
    let EnterNew : UIButton = {
       let enternew = UIButton()
        enternew.setTitle("가입하기", for: .normal)
        enternew.setTitleColor(.systemGray, for: .normal)
        enternew.titleLabel?.font = UIFont.systemFont(ofSize: 15)
        enternew.setUnderLine()
        return enternew
    }()
    
    func makeConstraint(){
        Title.translatesAutoresizingMaskIntoConstraints = false
        EmailButton.translatesAutoresizingMaskIntoConstraints = false
        LoginButton.translatesAutoresizingMaskIntoConstraints = false
        PasswordButton.translatesAutoresizingMaskIntoConstraints = false
        ForgetPassword.translatesAutoresizingMaskIntoConstraints = false
        ForKakaoBtn.translatesAutoresizingMaskIntoConstraints = false
        ForFaceBtn.translatesAutoresizingMaskIntoConstraints = false
        ForGoogleBtn.translatesAutoresizingMaskIntoConstraints = false
        EasyLogin.translatesAutoresizingMaskIntoConstraints = false
        LoginGuide_1.translatesAutoresizingMaskIntoConstraints = false
        LoginGuide_2.translatesAutoresizingMaskIntoConstraints = false
        NotYet.translatesAutoresizingMaskIntoConstraints = false
        EnterNew.translatesAutoresizingMaskIntoConstraints = false
        
        
        NSLayoutConstraint.activate([
            Title.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor, constant: 90),
            Title.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor),
            Title.heightAnchor.constraint(equalToConstant: 80),
            
            EmailButton.topAnchor.constraint(equalTo: Title.bottomAnchor, constant: 60),
            EmailButton.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor),
            EmailButton.widthAnchor.constraint(equalToConstant: 330),
            EmailButton.heightAnchor.constraint(equalToConstant: 50),
            PasswordButton.topAnchor.constraint(equalTo: EmailButton.bottomAnchor, constant: 10),
            PasswordButton.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor),
            PasswordButton.widthAnchor.constraint(equalToConstant: 330),
            PasswordButton.heightAnchor.constraint(equalToConstant: 50),
            LoginButton.topAnchor.constraint(equalTo: PasswordButton.bottomAnchor, constant: 20),
            LoginButton.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor),
            LoginButton.widthAnchor.constraint(equalToConstant: 330),
            LoginButton.heightAnchor.constraint(equalToConstant: 50),
            ForgetPassword.topAnchor.constraint(equalTo: LoginButton.bottomAnchor, constant: 20),
            ForgetPassword.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor),
            ForgetPassword.widthAnchor.constraint(equalToConstant: 180),
            ForgetPassword.heightAnchor.constraint(equalToConstant: 20),
            
            
            ForFaceBtn.topAnchor.constraint(equalTo: ForgetPassword.bottomAnchor, constant: 155),
            ForFaceBtn.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor),
            ForFaceBtn.widthAnchor.constraint(equalToConstant: 80),
            ForFaceBtn.heightAnchor.constraint(equalToConstant: 80),

            ForKakaoBtn.topAnchor.constraint(equalTo: ForgetPassword.bottomAnchor, constant: 155),
            ForKakaoBtn.trailingAnchor.constraint(equalTo: ForFaceBtn.leadingAnchor, constant: -20),
            ForKakaoBtn.widthAnchor.constraint(equalToConstant: 80),
            ForKakaoBtn.heightAnchor.constraint(equalToConstant: 80),

            ForGoogleBtn.topAnchor.constraint(equalTo: ForgetPassword.bottomAnchor, constant: 155),
          ForGoogleBtn.leadingAnchor.constraint(equalTo: ForFaceBtn.trailingAnchor, constant: 20),
            ForGoogleBtn.widthAnchor.constraint(equalToConstant: 80),
            ForGoogleBtn.heightAnchor.constraint(equalToConstant: 80),
            
            
            EasyLogin.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor),
            EasyLogin.topAnchor.constraint(equalTo: ForgetPassword.bottomAnchor, constant: 110),
            LoginGuide_1.trailingAnchor.constraint(equalTo: EasyLogin.leadingAnchor, constant: -20),
            LoginGuide_1.topAnchor.constraint(equalTo: ForgetPassword.bottomAnchor, constant: 120),
            LoginGuide_1.heightAnchor.constraint(equalToConstant: 1),
            LoginGuide_1.widthAnchor.constraint(equalToConstant: 105),
            LoginGuide_2.leadingAnchor.constraint(equalTo: EasyLogin.trailingAnchor, constant: 20),
            LoginGuide_2.topAnchor.constraint(equalTo: ForgetPassword.bottomAnchor, constant: 120),
            LoginGuide_2.heightAnchor.constraint(equalToConstant: 1),
            LoginGuide_2.widthAnchor.constraint(equalToConstant: 105),
            
            
            NotYet.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: 90),
            NotYet.topAnchor.constraint(equalTo: ForFaceBtn.bottomAnchor, constant: 55),
            EnterNew.topAnchor.constraint(equalTo: ForFaceBtn.bottomAnchor, constant: 55),
            EnterNew.leadingAnchor.constraint(equalTo: NotYet.trailingAnchor, constant: 5),
            EnterNew.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -90)
        ])
        
        
    }
    func makeSubView(){
        addSubview(Title)
        
        addSubview(EmailButton)
        addSubview(PasswordButton)
        addSubview(LoginButton)
        addSubview(ForgetPassword)
        
        addSubview(ForKakaoBtn)
        addSubview(ForFaceBtn)
        addSubview(ForGoogleBtn)
        
        addSubview(EasyLogin)
        addSubview(LoginGuide_1)
        addSubview(LoginGuide_2)
        
        addSubview(NotYet)
        addSubview(EnterNew)
    }
    
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        makeSubView()
        makeConstraint()
    }
    
    required init?(coder _: NSCoder) {
        fatalError("Error")
    }
    
}
    
    extension UIButton {
       func setUnderLine(){
         	  guard let title = title(for: .normal) else { return }
                    let attributedString = NSMutableAttributedString(string: title)
                       attributedString.addAttribute(.underlineStyle,
                                                     value: NSUnderlineStyle.single.rawValue,
                                                     range: NSRange(location: 0, length: title.count)
                       )
                       setAttributedTitle(attributedString, for: .normal)
           }
       }