[개인과제] 연락처 앱 만들기 2️⃣

 

오늘은 연락처앱 두번째 페이지(연락처 추가) UI 구현과 등록하는 것 까지 해볼 계획

 

---

06.  네비게이션바 버튼 생성

먼저 버튼을 눌렀을 때 이동할 페이지를 간단하게 파일만 만들어준다 (1컨트롤러=1페이지)

그리고 컨트롤러 파일이 늘어나서 나중에 헷갈릴 것 같아 원래 파일 이름에 Main을 넣어줌

새로 만든 컨트롤러 파일

간단하게 추가해준 내용

 

 

그리고 다시 원래 작업하던 메인 컨트롤러 페이지로 돌아가서 네비게이션바에 우측 버튼을 생성해준다

(해당 버튼은 view가 load되는 시점부터 생성되어야 하므로 viewDidLoad에 넣어준다)

(대신 실제 작동하는 메서드는 하단으로 뺄 것)

 

지금은 #selector() 내부 navigationButton 메서드가 활성화 되어있는데,

처음에 해당 코드를 먼저 넣게되면 메서드가 아직 없으므로 당연히 오류가 뜬다 섹렉터 내부 비워두고 시작했다

 

그리고 해당 메서드는 추후 건들일이 없을 것 같아 가장 눈에 안띄는 하단으로 숨겨버림

 

🌈 실제 작동 확인

 

---

07.  연락처 추가 Controller UI 구현

연락처를 추가하기 위해 만들어놓은 페이지에 UI를 구현하기 위해 

만들어놓은 Controller와 추가로 UI 값들을 세팅해줄 View 파일을 추가 생성해 주었다

 

그래도 두번째 만드니까 좀 할만한 듯 ㅎ...ㅎㅎ.....

import UIKit
import SnapKit

class AddView: UIView {
  
  lazy var profileImage = {
    let pI = UIImageView()
    pI.layer.cornerRadius = 100
    pI.layer.borderWidth = 2
    pI.clipsToBounds = true
    pI.layer.borderColor = UIColor.lightGray.cgColor
//    pI.contentMode = .scaleAspectFill // 이미지 비율 유지하며 채우기
    return pI
  }()
  
  lazy var randomButton = {
    let rB = UIButton()
    rB.backgroundColor = .white
    rB.setTitleColor(.darkGray, for: .normal)
    rB.setTitleColor(.systemPink, for: .selected)
    rB.setTitle("랜덤 이미지 생성", for: .normal)
    rB.titleLabel?.font = UIFont.systemFont(ofSize: 12)
    return rB
  }()

 

AddView 클래스를 생성하고 기본으로 들어갈 프로필 이미지뷰와 랜덤이미지 버튼을 생성했다

물론 이것 만으로는 당연히 화면에 안 뜨고, 서브뷰에 추가한 다음 레이아웃 걸어주고 뷰 컨트롤러에 가져와서 추가해줄 것

 

+ view 파일에서 각 이미지뷰, 버튼 등 레이아웃 걸었더라도

    뷰 컨트롤러 파일에서 view 파일에 대한 제약조건을 통으로 다시 한 번 걸어줘야 하는 것 같다

 

++ 추후 관리가 어려워서(레이아웃이 자꾸 일그러짐) 그냥 컨트롤러의 View 자체를 교체해 주었다

      (self.view = addView)

 

 

이뿌게 잘 뜸

근데 사실 버튼으로 안 만들고 레이블로 만들었다가 일 두번 했다 ㅎㅎ✌🏻

 

---

08.  랜덤이미지 API 추가

API 이미지만 가져올 수 있는 Kingfisher 라는 좋은 서브파티 툴이 있다고 한다

스냅킷과 동일하게 추가해준 후 import Kingfisher해준다

 

아래 깃에서 클론 URL 따온 다음에 

https://github.com/onevcat/Kingfisher

GitHub - onevcat/Kingfisher: A lightweight, pure-Swift library for downloading and caching images from the web.

 

objc 메서드 선언해 준다

그리고 API 주소 가져오고, 랜덤하게 이미지가 나와야 하니 랜덤함수를 통해 이미지 주소를 가져와준다

 

 

만들어둔 버튼에도 메서드를 불러올 addTarget 코드 추가해줌

 

 

그럼 아래처럼 랜덤이미지가 잘 불러와진다!

 

 

 

만약 imageView 바깥으로 이미지가 넘친다면 아래 코드를 추가해 준다

 

 

---

09.  Data를 입력받을 textView 추가하기

랜덤 이미지 생성 뷰와 버튼을 만들어 주었으니, 이제 정보를 입력받을 텍스트뷰를 추가할 차례다

 

아래 코드처럼 이름과 연락처를 입력 받을 UITextView를 만들어 주었고

아무것도 입력하지 않았을 경우에 표시할 "~~을 입력하세요" 텍스트도 넣어 주었다

 

그리고 약간 디테일을 추가하기 위해 두 가지 이벤트를 넣어주었다

 

첫 번째는 텍스트 입력 시 기본으로 설정해둔 메세지 "~~을 입력해 주세요"의 컬러와

사용자가 입력하는 텍스트의 컬러를 다르게 하기 위해 만들어주었다

 

텍스트뷰 클릭 시 nil값이 되고 nil값이 되는 기준으로 후에 입력한 텍스트는 색이 어둡게 바뀌게된다

 

두번째 메서드는 사용자가 입력한 값이 지워졌을 때 기본 메세지 "~~를 입력해주세요" 를 다시 띄워주기 위해 만들어 주었다

위에서 생성한 텍스트뷰를 보면 tag 값이 할당되어 있을텐데 여기서 그 tag 값을 이용해서 각각 다시 띄워줄 메세지를 작성해 준다

즉 동일한 텍스트지만 다른 메서드이다

 

아래 GIF를 확인하면 잘 적용된 것을 확인할 수 있음