swift 실습 - 3.2 : Setting App Clone

오늘은 어제 했던 아이폰 설정 기본 앱을 클론하는 것을 완성하였다. 

어제 했던 양보다 오늘 한게 훨씬 많아서 어디서부터 정리해야 할지 모르겠다... 

꼼꼼하게 다 정리하고 싶은데 그러기엔 

강의 듣기 & 필기 & 실습 따라하기 & 블로그 글 정리 4가지를 한꺼번에 해야돼서 불가^^

 

일단 기억나는대로 적어봐야지.. (구현 순서에 상관 X)

 

 

1. Navigation Controller 추가

 

먼저 원래 설정 앱에서 네비게이션바 부분을 보면

 

저렇게 스크롤을 올리면 "설정"이라고 적혀있는 부분이 큰 타이틀에서 네비게이션 바 안쪽 타이틀로 넘어가는 것을 볼 수 있다.

 

내가 클론할 앱에서도 마찬가지로 저 기능을 구현하고자 했다.

 

 

그럴려면 먼저 이렇게 스토리보드에 네비게이션 컨트롤러를 추가해서 연결해놓는다.

 

이렇게 하면 ViewController에서 접근해서 title을 마음대로 수정할 수 있다.

 

override func viewDidLoad() {
        super.viewDidLoad()
        
        // .. 생략
        
        self.title = "Settings"
  }

이렇게 ViewController의 viewDidLoad() 함수에 타이틀을 지정해 놓으면 된다.

 

근데 이렇게만 하면 맨 처음에 큰 글씨로 나오는 LargeTitle이 나오지 않고 그냥 네비게이션 바 중앙에 작게 타이틀만 표시된다.

 

맨 처음 움짤처럼 처음엔 큰 타이틀이 나왔다가 스크롤하면 작은 타이틀로 사라졌다가 다시 나타났다가 그렇게 하려면

다른 코드 작업이 필요하다.

 

 override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        self.navigationController?.navigationBar.prefersLargeTitles = true

    }

viewWillAppear() 이라는 함수는 뷰가 나타날 때마다 호출되는 함수이다.

(didLoad는 메인 화면의 경우 한번 호출되고나면 끝)

 

여기에 위의 코드를 추가해서 prefersLargeTitles 값을 true로 만들어주면 뷰가 실행될 때마다 큰 타이틀이 보여진다.

 

완성된 모습

 

 

2. Model 생성 및 뷰리스트 내용 추가

 

어제 만들었던 모습에는 label에 아무 내용도 들어가 있지가 않았었다. 

거기에 내용을 채워야 하는데 이를 위해 먼저 Model을 만들었다.

 

일반 swift파일로 SettingModel.swift를 아래와 같이 구현했다.

 

import Foundation

struct SettingModel {
    var leftImageName: String = ""
    var menuTitle: String = ""
    var subTitle: String?
    var rightImageName: String?
    
}

 

그냥 단순한 struct로 각각 이미지 부분과 레이블부분에 대한 값을 저장할 String들을 만들었다.

 

 

그리고 ViewController에서 아래와 같이 구현한다.

 

var settingModel = [[SettingModel]]() //2중 배열
    
    @IBOutlet weak var settingTableView: UITableView!
    
    func makeData() {
        settingModel.append([SettingModel(leftImageName: "person.circle", menuTitle: "Sign in to your iPhone", subTitle: "Set up iCloud, the App Store, and more.", rightImageName: nil)])
        
        
        settingModel.append([SettingModel(leftImageName: "gear", menuTitle: "General", subTitle: nil, rightImageName: "chevron.right"),
                SettingModel(leftImageName: "person.fill", menuTitle: "Accessibility", subTitle: nil, rightImageName: "chevron.right"),
                SettingModel(leftImageName: "hand.raised.fill", menuTitle: "Privacy", subTitle: nil, rightImageName: "chevron.right")])
        
        
    }

 

설정 화면에서 보이는 바와 같이 각각 요소들이 섹션이 나뉘어져 있다. 

첫번째 섹션에는 1가지 cell, 두번째 섹션에는 3가지 cell들이 있다. 

그래서 2중 배열을 하나 만들어서 거기에 요소들을 넣는다.

 

여기서 이미지 파일들은 apple 시스템에서 제공하는 SF Symbols에 있는 시스템 이름이다. 

 

이렇게 하고 Delegate에서 함수를 수정한다.

 

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return settingModel[section].count
    }
    
 func numberOfSections(in tableView: UITableView) -> Int {
        return settingModel.count
    }

 

첫번째 함수는 numberOfRowsInSection으로 각 섹션에 몇개의 행이 있는지 반환해주는 함수고

두번째 함수는 섹션의 수가 몇갠지 반환해준다.

 

그리고 각각의 cell에 들어갈 내용들을 전달하기 위한 함수이다.

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        if indexPath.section == 0 {
            
            let cell = tableView.dequeueReusableCell(withIdentifier: "ProfileCell", for: indexPath) as! ProfileCell
            
            cell.topTitle.text = settingModel[indexPath.section][indexPath.row].menuTitle
            cell.profileImageView.image = UIImage(systemName: settingModel[indexPath.section][indexPath.row].leftImageName)
            cell.bottomDescription.text = settingModel[indexPath.section][indexPath.row].subTitle
            
            return cell
        }
        
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "MenuCell", for: indexPath) as! MenuCell
        
        cell.leftImageView.image = UIImage(systemName: settingModel[indexPath.section][indexPath.row].leftImageName)
        
        cell.middleTitle.text = settingModel[indexPath.section][indexPath.row].menuTitle
        
        cell.rightImageView.image = UIImage(systemName: settingModel[indexPath.section][indexPath.row].rightImageName ?? "")
        
        cell.rightImageView.tintColor = .lightGray
        
        
        return cell
     
    }

첫번째 행에 나오는 profile은 밑에 다른 cell들과 다른 모습이기 때문에 if 문으로 섹션을 나누어서 각각 설정해주고

필요하다면 색상도 설정해준다.

 

 

3. General 설정 

(하 다 날라갔다.. ㅁㅊ... 거의 다써서 완료만 누르면 됐었는데... 두시간 동안 썼는데.. 다시..써야지...)

 

이제 처음 보이는 화면에 대한 구성은 마쳤고, General(일반) 설정 셀을 눌렀을 때 나오는 화면에 대한 구성을 했다.

 

 

 

 

 

 

 

이렇게 보면 일반을 눌렀을 때 다른 테이블뷰 화면으로 넘어가는 것을 볼 수 있다.

 

일반 설정 테이블 뷰의 셀들은 레이블 한개와 이미지 뷰 한개로 구성돼있고,

똑같이 네비게이션 바가 있다.

 

보이는 거랑 똑같이 만들어봤다.

 

 

 

 

 

 

 

근데 이번엔 다른 때와 같이 Cell, Struct(Model), Controller의 파일들을 따로 구성하지 않고 

GeneralViewController에서 다같이 한꺼번에 코딩했다.

이렇게 하면 유지보수를 하거나, 코드가 길어지고 복잡해지면 좋지 않은 방법인데

지금은 엄청 단순하기도 하고 코드가 길지도 않아서 이 방법도 강의에서 가르쳐줬다.

 

 

 

 

 

 

 

 

 

 

일단 스토리보드에서 보면 이렇게 생겼다.

Cell을 따로 지정하지 않고 

테이블 뷰 위에 Table View Cell 오브젝트를 직접 넣어서 만들었다.

뷰 이름은 GeneralViewController 이다.

 

 

 

 

 

 

 

 

GeneralViewController.swift의 코드를 보면

import UIKit

class GeneralCell: UITableViewCell {
    @IBOutlet weak var leftLabel: UILabel!
    @IBOutlet weak var rightImageView: UIImageView! {
        didSet{
            rightImageView.image = UIImage.init(systemName: "chevron.right")
        }
    }
    
}
struct GeneralModel {
    var leftTitle: String = ""
}

 

먼저 TableView에 대한 클래스 GeneralCell을 선언하고 그 안에 구성요소들을 아웃렛으로 가져온다.

여기서 rightImageView는 모두 동일하게 오른쪽 방향 꺾쇠 아이콘이므로 didSet을 이용하여 미리 설정을 해 놓는다.

 

그리고 struct로 모델을 선언한다.

rightImageView에 대한 설정은 이미 마쳤으므로 나머지 구성요소인 leftLabel에 대해 요소를 선언한다.

 

class GeneralViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    var model = [[GeneralModel]]()
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return model[section].count
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return model.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "GeneralCell", for: indexPath) as! GeneralCell
        
        cell.leftLabel.text = model[indexPath.section][indexPath.row].leftTitle
        
        cell.rightImageView.tintColor = .lightGray
        
        return cell
    }

 그 다음으로 TableView에 대한 클래스를 선언한다.

Model로 2중 배열을 만들고 각 위치에 대해 설정한다.

 

@IBOutlet weak var generalTableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        generalTableView.delegate = self
        generalTableView.dataSource = self
        
        self.title = "General"
        self.navigationController?.navigationBar.prefersLargeTitles = false
        
        model.append([GeneralModel(leftTitle: "About")])
        
        model.append([GeneralModel(leftTitle: "Keyboard"),
        GeneralModel(leftTitle: "Game Controller"),
        GeneralModel(leftTitle: "Fonts"),
        GeneralModel(leftTitle: "Language & Region"),
        GeneralModel(leftTitle: "Dictionary")])
        
        model.append([GeneralModel(leftTitle: "Reset")])
        
        self.view.backgroundColor = UIColor(white: 245/255, alpha: 1)
        generalTableView.backgroundColor = UIColor(white: 245/255, alpha: 1)
    }
}

마지막으로 viewDidLoad에서 Model에 요소들의 내용을 저장해주고 배열에 저장한다.

또, 네비게이션바의 타이틀등을 설정해준다.

 

이제 ViewController에서 아래와 같이 네비게이션 컨트롤러까지 해서 연결해주면

if indexPath.section == 1 && indexPath.row == 0 {
   if let generalVC = UIStoryboard(name: "GeneralViewController", bundle: nil).instantiateViewController(withIdentifier: "GeneralViewController") as? GeneralViewController {
      self.navigationController?.pushViewController(generalVC, animated: true)
   }
 }

 

이렇게 완성!!

 

 

4. Profile 설정

 

 

 

 

프로파일 부분은 이렇게 만드는 것이 목표이다.

고려해야할 사항은

 

1. 테이블뷰가 아니다.

2. 화면이 아래에서 위로 올라온다.

3. 이메일을 입력하지 않았을때는 Next(다음) 버튼이 활성화 되지않는다.

 

정도이다.

 

 

 

 

 

 

먼저 MyIDViewController라는 이름으로 swift와 xib파일을 만들고

스토리보드에서 열심히 뷰의 모습을 카피한다.

 

그리고 MyIDViewController.swift에서 뷰의 구성요소들을 아웃렛으로 가져오거나 액션으로 가져와서

일을 수행할 수 있도록 코딩한다.

 

import UIKit

class MyIDViewController: UIViewController {

    @IBOutlet weak var nextBtn: UIButton!{
        didSet{
            nextBtn.isEnabled = false
        }
    }
    @IBOutlet weak var emailTextField: UITextField!
    
    @IBAction func doCancel(_ sender: Any) {
        self.dismiss(animated: true, completion: nil)
    }
    
    @IBOutlet weak var cancelBtn: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        emailTextField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
        
//        textFieldDidChange(sender: emailTextField)
    }

    @objc func textFieldDidChange(sender: UITextField){
       
        if sender.text?.isEmpty == true {
            nextBtn.isEnabled = false
        } else {
            nextBtn.isEnabled = true
        }
        
    }
}

가져올 요소는 총 세가지이다.

Cancel 버튼, Next 버튼, Email입력 텍스트 필드.

 

Cancel 버튼은 눌리면 dismiss 되도록 설정하고,

EmailTextField와 Next 버튼에 대해서는 이메일 필드 안에 글자가 있을 때 Next 버튼을 활성화 시키고, 없으면 비활성화 시키는 액션을 수행하도록 한다. 그에 대한 함수가 textFieldDidChange함수이다.

 

그리고 이제 마찬가지로 ViewController에서 프로파일 부분을 눌렀을 때 화면이 넘어가도록 

연결해주어야 한다.

 

if indexPath.section == 0 && indexPath.row == 0 {
    let myidVC = MyIDViewController(nibName: "MyIDViewController", bundle: nil)
            
    self.present(myidVC, animated: true, completion: nil)      
 }

이렇게 연결했다. 

여기서 주의할 점이 있다.

 

다른 화면들은 오른쪽에서 왼쪽으로 화면이 나타났는데 이번에는 모달처럼 아래에서 위로 나타나게 해야한다.

그래서 present라는 메소드를 이용해서 화면이 넘어가게 하고 있다.

 

완성된 모습이다.

 

 

 

이렇게 해서 아이폰 setting app clone 실습이 끝났다 ^_^

 

 

---

Reference

 

https://www.inflearn.com/course/uikit-ios14/dashboard

UIKit - iOS14 실무 가이드 <iOS앱 진짜 개발자 되기> - 인프런 | 강의