[Swift-TIL] NavigationController가 있는 맛보기 앱 만들어보기

간단하게 지금까지 배운 내용으로만으로

네비게이션이 있는 앱 하나를 만들어보려고 한다.

 

기초적으로 이런 앱을 만들기 위해서는

기본적 디자인이라는게 필요한데,

개발단위에서는 디자인을 구상하기보단

우선적으로 무엇을 어떻게 왜를 구상을 해야한다.

 

목적과 방향성 그리고 이런게 있으면 좋겠다~ 라는

그런 일반적인 흥미를 열어두고

간단하게 기획이라는 것을 해보면,

일단, 필자는 탭을 3개는 가지고 가고 싶다는 생각이 있다.

이렇게 탭바 3개를 연결해서 만들어 두었다.

대강 위에서 아래로 첫번째부터

Todo리스트탭 / 홈탭 / 프로필 탭

이렇게 만들어볼 예정이다.

으음... 대충..

위 / 양옆을 20씩 여백을 설정해주면

이렇게 위치가 정확하게 잡힌다.

이미지뷰도 대충 가운데 두고

위 / 양옆으로 여백을 잡아주겠다.

이렇게 뜰텐데 빨간색으로 표시가 되면

안되는건데 왜 뜨는가?

이유는 저 이미지의 높이가 얼마인지 모르기 때문이다.

그러면 맞게 해주도록 하겠다.

대강 이런식으로 좌/우 여백을

위에 레이블과 동일하게 설정했고

높이를 지정해주어 빨간색으로 떳던 부분을

뷰어영역에서 벗어나지 않게 고정된 값을 주어서

빨간색 영역이 더이상 뜨지 않게 해준 상태다.

대충 응용해서 이렇게 만들었다.

이미지는 준비된게 없기 때문에 일단

Xcode 내부에 있는 이미지를 넣었고

텍스트는 텍스트뷰를 넣어주었다.

 

어.. 근데 이거 Home버튼에 있어야 하는건데...

이럴땐 당황하지 말고 옮기면 된다..

아직 초기니까 옮기는 작업은 어렵지 않으니....

그런데.. 간혹..

이렇게 제약을 줘도 얘가

지 멋대로 안 먹히는 경우가 있다.

 

사실 이런경우는..

Xcode의 스토리보드상에서의 고질병이다..

그래서 최근 iOS 개발자들 사이에서는

스토리보드를 쓰지 말자는

이야기가 나오고 있는 추세다.

 

뭐... 그건 그렇다치고

이런건 어떻게 처리하는가?

 

그냥 때려맞춰야한다..

대충 이런식으로..

대강 원래 형태대로 잡아두었다.

이렇게 뷰를 그리고

이제 Todo 뷰를 그려주겠다.

리스트 이기 때문에 테이블뷰를 사용하겠다.

좌/우/위/아래 전부 0으로 여백을 주고

셀까지 넣어주면 구조는 완성.

웹개발을 공부했었던 필자는 이걸 HTML과 동일한,

구조를 만들어가는 과정이라고 설명하고싶다.

 

프로필 뷰어도 테이블뷰를 사용할 예정이니까

프로필 뷰에도 테이블뷰 구조를 만들어 두었다.

지금보니.. 테이블뷰의 셀이 2개나 들어가므로..

셀 이름도 변경 하였다.

 

이제 또 뭘해보냐면..

프로필에서 네비게이션이 있으면 좋을 것 같아서

프로필에 네비게이션을 연결하고

새 뷰어로 랜딩 되도록 하였다.

 

뭐... 외우기 보단 익히는게 중요하니까..

이렇게가 필자가 만든 하나의 앱이 되었다.

일반 스위프트UI와는 구조잡는게 다르지만..

필자는 조심스럽게 한마디 하겠다.

스토리보드는 너무 싫다.

 

다음 스탭으로 이제 코딩의 시간이다.

일단은 테이블뷰 부터 코딩을 시작하겠다.

뷰컨트롤러 파일을 만들어 주고,

해당 스토리보드를 해당 컨트롤러와

연결해준다.

UIKit은 반드시 이 연결이라는게

잘 되어 있는가를 살펴 보아야 한다.

 

잘연결이 되었는지 확인하려면,

백그라운드 컬러를 넣고 시작하면 된다.

이렇게 나오면 정상이다.

연결이 되었다는걸 봤으니,

다음스탭으로 넘어가보자.

 

먼저 이 테이블 뷰에 들어갈게 뭔지 구상해보자.

직장, 직업/나이/정보, 좋아하는 장소 등등

뭐 이런 내용의 데이터가 들어갔으면 좋겠다.

 

그러면 우선 테이블뷰를 연결 해주고,

델리게이트, 데이터소스 등등 만들어주었다.

대강 이런식으로 정의해주고

스토리보드로 네비게이션을 지정해줘야한다.

그리고

세그의 아이덴티파이어도 바꿔주고

레이블도 하나 넣겠다.

그러고 보니 디테일 뷰 컨트롤러가 없다..

빠르게 만들어주자

먼저 디테일뷰컨트롤러를 연결해주고,

입력 받아서 전달받을 수 있도록 코딩을 해줬다.

//
//  ProfileViewController.swift
//  MyUIKit
//

import UIKit

class ProfileViewController: UIViewController {
    @IBOutlet weak var profileTableView: UITableView!
    
    var profileData = ["직장", "나이/직업/종교", "좋아하는 장소"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        profileTableView.dataSource = self
        profileTableView.delegate = self
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "profileSegue" {
            let vc = segue.destination as! ProfileDetailViewController
            vc.inputText = "Noel"
        }
    }
}

extension ProfileViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return profileData.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = profileTableView.dequeueReusableCell(withIdentifier: "profileCell", for: indexPath)
        
        cell.textLabel?.text = profileData[indexPath.row]
        
        return cell
        
    }
}

코드를 따로 분석하진 않겠다.

https://stayjun.tistory.com/270/#comment26414078

[Swift-TIL] segue로 데이터 전달해보기

이전에 다 해봤던 내용으로 진행한것이므로...

굳이 언급하지는 않겠다.

//
//  ProfileDetailViewController.swift
//  MyUIKit
//

import UIKit

class ProfileDetailViewController: UIViewController {
    @IBOutlet weak var textLabel: UILabel!
    var inputText: String = ""
    override func viewDidLoad() {
        super.viewDidLoad()
        
        textLabel.text = inputText
    }
    
}

코드작성은 이렇게 해줬고

결과는 아래와 같이 되었다.

여기까지 구조를 만들어보고 코드로 세그 구성까지 해봤는데,

지금까지 배운것들을 종합한 결과다.

 

중간중간 앱이 죽는 부분도 있었는데,

이유야 간단했다, 내가 연결을 해두고

내가 멋대로 이름을 바꾸는 바람에

연결된 부분을 살펴보니 처음 생성했던 이름으로

연결이 되어 있는 상황... 흔히 격는 상황이니..

따로 딥하게 언급하지는 않겠다.