iOS 포켓몬 연락처 앱 트러블 슈팅
1. 전화번호 포맷팅 구현
구현 방법
extension AddNumberViewController: UITextFieldDelegate {
func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
if textField == phoneTextField {
let fullString = (textField.text ?? "") + string
let cleanNumber = fullString.components(separatedBy: CharacterSet.decimalDigits.inverted).joined()
if string.isEmpty {
textField.text = formatPhoneNumber(String(cleanNumber.dropLast()))
return false
}
if !string.isEmpty && !CharacterSet.decimalDigits.isSuperset(of: CharacterSet(charactersIn: string)) {
return false
}
if cleanNumber.count > 11 {
return false
}
textField.text = formatPhoneNumber(cleanNumber)
return false
}
return true
}
private func formatPhoneNumber(_ number: String) -> String {
let cleanNumber = number.components(separatedBy: CharacterSet.decimalDigits.inverted).joined()
if cleanNumber.count <= 3 {
return cleanNumber
}
if cleanNumber.count <= 7 {
let index = cleanNumber.index(cleanNumber.startIndex, offsetBy: 3)
return String(format: "%@-%@",
String(cleanNumber[..<index]),
String(cleanNumber[index...]))
}
let prefix = String(cleanNumber.prefix(3))
let middle = String(cleanNumber[cleanNumber.index(cleanNumber.startIndex, offsetBy: 3)..<cleanNumber.index(cleanNumber.startIndex, offsetBy: 7)])
let end = String(cleanNumber[cleanNumber.index(cleanNumber.startIndex, offsetBy: 7)...])
return String(format: "%@-%@-%@", prefix, middle, end)
}
}
동작 방식
- UITextField의 델리게이트 메서드를 활용
- 입력된 문자열을 실시간으로 포맷팅
- 백스페이스, 숫자 입력 제한 등 처리
2. 테이블뷰 구분선 정렬
해결 방법
private func setupTableView() {
tableView.delegate = self
tableView.dataSource = self
tableView.register(ContactCell.self, forCellReuseIdentifier: "ContactCell")
tableView.rowHeight = 80
tableView.separatorStyle = .singleLine
tableView.separatorInset = UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 40)
}
UIEdgeInsets 설명
top
: 구분선의 위쪽 여백
left
: 구분선의 왼쪽 여백
bottom
: 구분선의 아래쪽 여백
right
: 구분선의 오른쪽 여백
3. 테이블뷰 셀 레이아웃 조정
private func setupCell() {
profileImageView.backgroundColor = .lightGray
profileImageView.layer.cornerRadius = 25
profileImageView.clipsToBounds = true
profileImageView.snp.makeConstraints { make in
make.centerY.equalToSuperview()
make.leading.equalToSuperview().offset(40)
make.width.height.equalTo(50)
}
nameLabel.snp.makeConstraints { make in
make.centerY.equalToSuperview()
make.leading.equalTo(profileImageView.snp.trailing).offset(40)
}
phoneLabel.snp.makeConstraints { make in
make.centerY.equalToSuperview()
make.leading.equalTo(nameLabel.snp.trailing).offset(40)
make.trailing.equalToSuperview().offset(-40)
}
}
레이아웃 조정 포인트
- 프로필 이미지: 좌측 여백 40, 크기 50x50
- 이름 레이블: 이미지 우측 40 여백
- 전화번호 레이블: 이름 레이블 우측 40 여백, 우측 끝 40 여백
- 모든 요소 수직 중앙 정렬
결과
- 전화번호 자동 포맷팅 (XXX-XXXX-XXXX)
- 테이블뷰 구분선 좌우 여백 통일
- 셀 내부 요소들의 정렬된 배치
확인해야할 부분
- coredata 사용시 테이블 내에 저장되는 데이터들 확인필요
- 테이블뷰와 ios 관련 공부 필요