[iOS/Swift] #1-1 나의 첫 토이프로젝트

'공간기록' 이라는 토이프로젝트 끝내며 그것에 대한 기록이다.
안젤라쌤의 강의를 듣다가 도저히 답답해서 그냥 무작정 만들어보자며 시작했다.
swift랑 조금이라도 친해지려는 나의 노력,,,을 까먹지 않기위해서 적어본다.
이 프로젝트에선 다음과 같은것들을 다룬다.

1. 뷰컨트롤러랑 친해지기
2. UIImagePickerController를 이용한 사진첨부
3. CoreData라는 Framework를 사용한 CRUD구현
4. TableView, TableViewCell, 커스텀 셀이랑 어떻게든 친해지기

1. 뷰 컨트롤러랑 친해지기

Figma로 ui디자인

먼저 figma라는 디자인툴로 앱의 생김새를 만들었다.

구현하지 못한것들도 있다. 검색하는거라던가...검색하는거라던가...

ui 어떻게짜지,,아이패드에 대충 그려야하나 하던중에  유튜브 보다가 우연히 알게됐는데, 이거라면 나도 쓸수 있겠다 싶었다.
그래서 그날 밤새서 만들어 보았다.
이미지소스는 Figma에서 이것저것 검색하면 구할수있다.( https://www.figma.com/community 에서 검색하면 편하다.)
하도 여기저기서 가져왔더니 열린탭이 엄청 많아서 가관이었다....

런치스크린

먼저 런치스크린에 공간기록부터 띄운다.
figma에서 이미지를 따온다. 우측 하단의 export에서 3x (아이폰x는 3x) 로 저장.

이미지뷰 만들어서 이미지 넣어주고 오토레이아웃 적용한 뒤에 AppDelegate에서 런치스크린 띄울 시간을 조정했다.

 

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        Thread.sleep(forTimeInterval: 0.7) //초단위
        return true
    }

 

메인 페이지

스토리보드에서 이미지뷰 만들어서 뚝딱뚝딱 적용한다. 오토레이아웃은 적당히 적당히,,

이제 뷰 하나를 더 만들어서 MainViewController랑 WriteViewController랑 연결한다.
간단하다. 뷰하나 만들고 UIViewController를 상속받는 swift 클래스를 만들어서 WriteViewController에 적용시킨 후에
WriteViewController에 ID를 주고 MainViewController에 연결시켜주는 코드를 짜주면 끝.
+버튼이 뷰를 호출할거다.

저걸로 swift파일 만들어주고

Identity inspector에서 클래스를 연결해주자.

이제 뷰를 연결할건데, 뷰를 연결하는 방법은 여러가지가 있지만 그중 코드를 통한 연결을 할거다.
세그로 연결하면 스토리보드에 화살표도 생기고 이뻐지지만, 애니메이션 변경을 모르고 값 넘겨주고 받고 하기 힘들것같기 때문에,,
뷰에 부여한 ID가 필요하다.
내가 부여한 ID는 WriteView 이고, 풀스크린으로 띄울것이며 코드는 다음과 같다.
(이쪽에서 뷰와 뷰를 연결시키는 방법들에 대해서 알려준다. 뷰 전환 애니메이션등도 알 수 있음)

    @IBAction func writeBtnPressed(_ sender: Any) {
        guard let wvc = self.storyboard?.instantiateViewController(withIdentifier: "WriteView") else {
            return
        }
        
        wvc.modalPresentationStyle = .fullScreen
        
        self.present(wvc, animated: true)
    }

연결됐다는걸 알 수 있다.

 

작성 페이지

버튼이랑 텍스트필드, 라벨을 배치한다. 
작성페이지에 진입하면 제일먼저 장소를 입력하게 만들것이기 때문에, viewDidLoad에 그렇게 지정한다.
입력을 완료하면 장소입력칸은 비활성화되고, 라벨의 플레이스홀더가 이미지 첨부를 안내한다.
엔터를 입력할때 코드는 다음과 같다.

    override func viewDidLoad() {
        super.viewDidLoad()
        .....
        PlaceNameField.delegate = self //자신의 텍스트필드로 입력해주자.
        .....
        }
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
            if textField == self.PlaceNameField {
            //to do....
            }
        return true
        }

2. UIImagePickerController를 이용한 사진첨부

하단에 앨범/카메라 버튼바를 만들어주자.
앨범 버튼을 누르면 앨범에서, 카메라 버튼을 누르면 카메라에서 사진을 따올것이다. 각각의 코드는 아래와 같다.
(이쪽에서 이미지 첨부에 대한 설명을 볼 수 있음)

    @IBAction func albumBtn(_ sender: Any) {
        self.imagePickerContoller.sourceType = .photoLibrary
        self.present(self.imagePickerContoller, animated: true, completion: nil)
    }//앨범 버튼 누르면 사진 첨부 실행
    
    @IBAction func cameraBtn(_ sender: Any) {
        self.imagePickerContoller.sourceType = .camera
        self.present(self.imagePickerContoller, animated: true, completion: nil)
    }//카메라 버튼 누르면 사진 찍고 첨부 실행

그리고 extension해서 imagePickerController 함수를 달아주자.

extension WriteViewController{
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let picFromInfo = info[UIImagePickerController.InfoKey.originalImage] as? UIImage
        {
            dismiss(animated: true, completion: nil)
            self.picture.image = picFromInfo
        }
    }
} //이미지 첨부 동작 관련 WriteViewController 추가동작

 

3. CoreData라는 Framework를 사용한 CRUD구현 부분부터는 다음 포스트에!