Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1차 세미나 과제 해결 #2

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

1차 세미나 과제 해결 #2

wants to merge 9 commits into from

Conversation

timotheekim10
Copy link
Member

@timotheekim10 timotheekim10 commented Oct 11, 2023

✨ 해결한 이슈

#1

🛠️ 작업내용

  • Assets에 이미지(Logo, Mail, Key) 추가
  • UIImageView 추가
  • UIImage, UITextField extension (이미지 크기 조정, UITextField 왼쪽에 이미지 추가 메서드) 추가
  • 아이디/비밀번호 UITextField 에 clearButtonMode 적용
  • 비밀번호 텍스트 *로 표시
  • 이메일 UILabel 폰트 적용
  • 로그인/로그인 화면으로 돌아가기 UIButton cornerRadius 변경
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-10-11.at.19.10.01.mp4

🖥️ 주요 코드 설명

1. UIImage extension - 이미지 크기를 원하는대로 조정하는 메서드

extension UIImage {
    
    // 이미지를 원하는 크기로 조정하는 메서드
    func resizeImageTo(size: CGSize) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        self.draw(in: CGRect(origin: CGPoint.zero, size: size)) // 현재 이미지를 지정된 크기로 그림
        guard let resizedImage = UIGraphicsGetImageFromCurrentImageContext() else { // 이미지를 가져옴
            return nil  // 이미지를 가져오지 못한 경우 nil 반환
        }
        UIGraphicsEndImageContext()
        return resizedImage // 조정된 이미지 반환
    }
    
}

2. UITextField extension - UITextField 왼쪽에 이미지를 배치하는 메서드

extension UITextField {
    
    // 텍스트필드의 왼쪽에 이미지를 배치하는 메서드
    func addLeftImage(image: UIImage) {
        // 이미지를 표시할 UIImageView 생성
        let imageView = UIImageView(frame: CGRect(x: 10, y: 0, width: image.size.width, height: image.size.height))
        // 이미지를 감싸는 UIView를 생성하고 이미지뷰를 추가
        let view = UIView(frame: CGRect(x: 0, y: 0, width: image.size.width + 20, height: image.size.height))
        imageView.image = image
        view.addSubview(imageView)
        // 텍스트필드의 왼쪽 뷰로 설정하고 항상 보이도록 설정
        self.leftView = view
        self.leftViewMode = .always
    }
    
}

3. 사용 예시

func setViewStyle() {
    // idTextField에서 addLeftImage 메서드 사용, 이때 사용되는 UIImage 크기 조정은 resizeImageTo 메서드 사용
    idTextField.addLeftImage(image: (UIImage(named: "Mail")?.resizeImageTo(size: CGSize(width: 25, height: 25)))!)
    // passwordTextField에서 addLeftImage 메서드 사용, 이때 사용되는 UIImage 크기 조정은 resizeImageTo 메서드 사용
    passwordTextField.addLeftImage(image: (UIImage(named: "Key")?.resizeImageTo(size: CGSize(width: 25, height: 25)))!) }
    
override func viewDidLoad() {
    super.viewDidLoad()
    setViewStyle()
 }
이미지 설명

📌 리뷰 포인트

  • 뷰의 스타일을 커스텀하는 함수의 이름을 setViewStyle 로 지었는데 더 나은 함수명을 알고 계신다면 알려주세요!
  • 코드를 더 간결하게 작성할 수 있는 부분이 있다면 알려주세요!
  • 틀린 부분이 있다면 알려주세요!

✅ 체크리스트

  • Swift 코딩 컨벤션 지켰는지 확인

Copy link

@hyoring030 hyoring030 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다양한 함수에 주석으로 설명이 잘 되어 있어서 이해하기 쉬웠습니다!
많이 배워갑니당 수고하셨습니다! :)

Copy link

@Genesis2010 Genesis2010 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

정말로 고생 많으셨습니다!
코드 스타일이 너무 깔끔하네요!

Comment on lines +1 to +36
//
// Extension.swift
// sopt33-first-seminar
//
// Created by 티모시 킴 on 10/11/23.
//

import UIKit

extension UIImage {

// 이미지를 원하는 크기로 조정하는 메서드
func resizeImageTo(size: CGSize) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
self.draw(in: CGRect(origin: CGPoint.zero, size: size))
guard let resizedImage = UIGraphicsGetImageFromCurrentImageContext() else {
return nil
}
UIGraphicsEndImageContext()
return resizedImage
}

}

extension UITextField {

// 텍스트필드의 왼쪽에 이미지를 배치하는 메서드
func addLeftImage(image : UIImage){
let imageView = UIImageView(frame: CGRect(x: 10, y: 0, width: image.size.width, height: image.size.height))
let view = UIView(frame: CGRect(x: 0, y: 0, width: image.size.width + 20, height: image.size.height))
imageView.image = image
view.addSubview(imageView)
self.leftView = view
self.leftViewMode = .always
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extension 으로 구현해서 재사용 가능한점 너무 좋습니다!
지금은 2개이지만 갈수록 많아진다면 Extension 디렉토리에서 각각의 UIComponent 에 대해 구현하는 것이 좋은 방법이라 생각합니다!

Comment on lines +19 to +29
func setViewStyle() {
idTextField.addLeftImage(image: (UIImage(named: "Mail")?.resizeImageTo(size: CGSize(width: 25, height: 25)))!)
idTextField.clearButtonMode = .whileEditing

passwordTextField.addLeftImage(image: (UIImage(named: "Key")?.resizeImageTo(size: CGSize(width: 25, height: 25)))!)
passwordTextField.clearButtonMode = .whileEditing
passwordTextField.isSecureTextEntry = true

loginButton.layer.cornerRadius = 5
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

레아아웃에 대한 코드를 따로 함수로 구현하셨네요! 너무 좋은 방법입니다!!
움.. 저만의 생각입니다만! viewDidLoad 아래에 구현하면 더욱 일관성있어 보일거 같아요!

Copy link

@chaentopia chaentopia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extension도 사용하시고 너무너무 좋네요!! 코드리뷰 남겨두었습니다 확인해보세용
고생하셨습니다 🤩


}

extension UITextField {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extension을 파일로 따로 빼서 쓰는 경우
UIImage+.swift 파일과 UITextField+.swift 파일로 나누어서 작성해도 좋을 것 같아요~~
대체로 extension 파일의 경우
어쩌고+.swift 혹은 어쩌고+extension.swift 등의 파일명을 사용합니다!

@IBOutlet weak var passwordLabel: UILabel!
@IBOutlet weak var backButton: UIButton!

func setViewStyle() {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

가볍게 setStyle() 을 함수명으로 쓰기도 합니다!
저 같은 경우에는 레이아웃과 스타일을 잡는 메소드를 합쳐서 setUI()에 넣어요

func setUI() {
    setStyle()
    setLayout()
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그리고 setUI를 viewDidLoad() 안에 넣습니다

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants