custom UIView를 생성하는 방법

1. struct 구조체 활용

    struct commonTextField {
        let title, placeholder: String
        let leftView =  UILabel(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
        let textField = UITextField()
        
        init(title: String, placeholer: String) {
            self.title = title
            self.placeholder = placeholer
            leftView.attributedText = NSMutableAttributedString().regular(string: "\(self.title)   |   ", fontSize: 18)
            textField.attributedPlaceholder = NSMutableAttributedString()
                                              .regularBold(string: self.placeholder, fontSize: 20)
            textField.leftView = leftView
            textField.leftViewMode = .always
        }
    }

let textField1 = commonTextField(title: "닉네임", placeholer: "입력하시오오오오")

2. class 생성

//
//  commonTextFieldView.swift
//  SlacksFitYang
//
//  Created by YANG on 2023/02/15.
//

import UIKit
import SnapKit

class commonTextFieldView: UIView {
    var title, placeholderText: String

    let label = UILabel()
    let textField = UITextField()
    
    init(frame: CGRect, title: String, placeholderText:String) {
        self.title = title
        self.placeholderText = placeholderText

        label.attributedText = NSMutableAttributedString().regular(string: "\(self.title)   |   ", fontSize: 17)
        label.backgroundColor = .red

        textField.placeholder = self.placeholderText
        textField.leftView = label
        textField.leftViewMode = .always
        
        super.init(frame: frame)
        // auto layout
        self.addSubview(textField)
        textField.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

let textField = commonTextFieldView(frame: CGRect(x: 0, y: 0, width: 100, height: 10), title: "text", placeholderText: "textPlaceHolder")

 

 

 

** profileVC에서 수정 시 사용되는 textField의 경우.. 상하좌우에 모두 padding이 필요함 

- leftView / rightView 는 top, bottom에 패딩 불가

- textField.layer.sublayerTransform = CATransform3DMakeTranslation(5, 0, 0)

Core Animation Layer 를 사용해서도 padding처럼(?) 효과를 줄 수 있다.

장점: 한줄로 간단하게 효과를 줄 수 있지만 단점: 원하지 않게 다른 뷰들도 영향이 간다. 예를 들어 leftVIew, rightView도 함께 위치가 변경되어있다

- subClass를 만들어 textRect와 editingRect 메소드 오버라이딩

 

==> 상하좌우 padding을 위해 어쩔수 없이.. subClass를 생성 -> struct내에서 UITextField()가 아닌 새로 생성한

TextFieldWithPadding()를 호출

 

Use textRect(bounds:) -> CGRect to return the drawable area for the text in a UITextField.

Use editingRect(forBounds:) -> CGRect to return the area in the UITextField where editable text can be displayed.

import UIKit

class TextFieldWithPadding: UITextField {
    var textPadding = UIEdgeInsets(
        top: 10,
        left: 20,
        bottom: 10,
        right: 20
    )

    override func textRect(forBounds bounds: CGRect) -> CGRect {
        let rect = super.textRect(forBounds: bounds)
        return rect.inset(by: textPadding)
    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        let rect = super.editingRect(forBounds: bounds)
        return rect.inset(by: textPadding)
    }
}

    struct commonTextField {
        var edited: Bool = true
        let title, placeholder: String
        let leftView =  UILabel(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
        let textField = TextFieldWithPadding()
        
        init(title: String, placeholer: String, edited: Bool) {
            self.title = title
            self.placeholder = placeholer
            self.edited = edited
  
  (생략)