swift 실습 - 3.1 : Setting App Clone

첫번째 앱 개발 실습으로 setting app을 clone하는 것을 해보았다.

 

여기서 주로 배우는 내용은 table view의 사용이다. 

 

먼저 클론 할 iphone setting app과 오늘까지 완성한 클론 앱의 모습이다.

(아직 좀 많이 다름)

 

 

 

 

먼저 메인 스토리보드의 모습을 보면

main.storyboard

이렇게 생겼다. 저렇게 table view를 한 화면 가득차게 먼저 생성을 해 놓고,

그 안에 table view cell 이라고 하는 요소를 넣는거다.

 

저 안에서 직접 cell들을 생성해서 넣을 수도 있지만, 

그럼 통일성도 떨어지고 똑같은 구조의 cell들을 사용한다면 미리 틀을 만들어 놓는 것이 낫기 때문에

MenuCell, ProfileCell의 이름으로 두가지 구조의 cell을 만든다.

 

(왼)ProfileCell, (오)MenuCell

 

setting app 원본의 구조를 보면 맨 처음에 나와있는 cell은 프로필 사진이 있는 이미지뷰 하나와 텍스트 레이블 두개가 있는 것을 볼 수 있고 그 아래로 매뉴들은 전부다 아이콘 이미지, 레이블, 화살표 아이콘 이렇게 세가지의 구성요소로 되어있다.

 

그래서 그 구조를 똑같이 맞춰서 두가지 cell과 각 cell view에 대한 controller.swift를 생성한다.

 

ProfileCell.swift 랑 MenuCell.swift 안의 코드들은 딱히 볼 필요 없고,

중요한건 메인 스토리보드와 연결된 ViewController.swift이다.

 

import UIKit

class ViewController: UIViewController{
    

    @IBOutlet weak var settingTableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        settingTableView.delegate = self
        settingTableView.dataSource = self
        
        settingTableView.register(UINib(nibName: "ProfileCell", bundle: nil), forCellReuseIdentifier: "ProfileCell")
        
        settingTableView.register(UINib(nibName: "MenuCell", bundle: nil), forCellReuseIdentifier: "MenuCell")
    }

}

먼저 첫번째 블록부터 보면

일단 settingTableView라는 이름으로 테이블뷰를 가져오고

 

viewDidLoad함수에서 아까 따로 따로 만들었던 ProfileCell, MenuCell을 settingTableView에 등록한다.

 

여기서, 이렇게 등록해서 사용하려면 이 테이블뷰가 UITableViewDelegate, UITableViewDataSource 이 두가지의 프로토콜을

따라야 하므로 관련 코드도 작성해주고, 프로토톨 구현부는 밑에 작성했다.

 

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        if indexPath.row == 0 {
            
            let cell = tableView.dequeueReusableCell(withIdentifier: "ProfileCell", for: indexPath)
            
            return cell
        }
        
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "MenuCell", for: indexPath)
        
        return cell
     
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.row == 0 {
            return UITableView.automaticDimension
        }
        
        return 60
        
    }

}

 

총 3가지의 구현돼야할 함수가 있다.

 

1.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }

총 몇개의 테이블뷰 cell을 보여줄건지 정하는 부분이다. 나는 총 5개로 했다.

 

 

2. 

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        if indexPath.row == 0 {
            
            let cell = tableView.dequeueReusableCell(withIdentifier: "ProfileCell", for: indexPath)
            
            return cell
        }
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "MenuCell", for: indexPath)
        
        return cell
     }

 

그 5개의 테이블뷰 cell에 어떤 모양의 cell을 보여줄 건지 정하는 부분이다.

여기서 조건문으로 index 0번 (첫번째) cell에는 profile cell을, 나머지 부분에는 menu cell을 보여주도록 만든다.

 

 

3.

 func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.row == 0 {
            return UITableView.automaticDimension
        }
        return 60   
    }

여기서는 테이블뷰의 사이즈를 임의로 정하는 부분이다.

뭐 굳이 안해줘도 되는데 일관성을 위해

첫번째 cell (Profile cell)은 스토리보드에서 설정한대로 자동적으로 설정되게 했고

 

나머지는 높이 60으로 고정해놨다.

 

그렇게 해서 완성된 모습이 이거다.

 

 

+) 여기서 ProfileCell.swift에 UI요소들의 편집을 코드로 한 부분이 있다.

import UIKit

class ProfileCell: UITableViewCell {

    @IBOutlet weak var topTitle: UILabel!
    @IBOutlet weak var bottomDescription: UILabel!
    @IBOutlet weak var profileImageView: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        let profileHeight : CGFloat = 55
        profileImageView.layer.cornerRadius = profileHeight / 2
        
        topTitle.textColor = .blue
        topTitle.font = UIFont.systemFont(ofSize: 20)
        
        bottomDescription.textColor = .darkGray
        bottomDescription.font = UIFont.systemFont(ofSize: 16)
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    
}

이미지뷰, 두가지의 레이블을 각각 가져와서

 

먼저 profileImageView는 layer.cornerRadius를 사용하여 height의 반 크기로 끝을 잘라 원이되게 만들었고,

나머지 레이블들은 폰트 크기와 색을 바꿔 주는 작업을 했다.

 

 

 

이후에는 각각 뷰와 레이블에 데이터를 넣어서 더 다듬어진 클론 앱을 만들고자 한다.