[iOS] TableView를 이용한 메모장 만들기

TableView란?

아래 화면처럼 목록이 있고 그 목록을 클릭할 수 있는 구성요소를 말한다.

 

[View구상]

1) 컴포넌트는 Label, button, Table View를 이용했고, 내부에 TableViewCell을 추가해서 구상을 했다.

메모장 기본 화면을 보면 하나의 셀에는 메모의 제목, 처음 내용, 시간이 나와있다. 셀 상단의 Label은 메모의 제목 (title), 하단의 왼쪽 Label은 시간, 오른쪽 Label은 처음 내용이 들어가있다.

2) View하단에는 몇개의 메모가 들어있는지와 새로운 메모를 작성하는 버튼을 추가했다. (버튼 기능은 아직 추가하지못했다,,,)

+ 버튼을 추가할때 Xcode에서 제공해주는 기본 이미지를 넣었는데, 크기 조정하는 방법을 잠깐 까먹었었다,,,

Configuration은 Point Size로 변경하면 크기 조정이가능하다!

https://jeong9216.tistory.com/99

[iOS/Swift] UIButton 이미지 크기 Point로 설정하기

 

[TableViewCell 코드]

우선 테이블셀에는 각각 메모의 제목, 내용, 시간을 정의해두었다.

//
//  TableViewCell.swift
//  standard4
//
//  Created by 김민경 on 2022/10/29.
//

import UIKit

class TableViewCell: UITableViewCell {

    
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var timeLabel: UILabel!
    @IBOutlet weak var contentLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

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

        // Configure the view for the selected state
    }

}

 

[ViewController 코드]

ViewController에는 UITableViewDelegate, UITableViewDataSource 프로토콜을 추가하고 해당 함수를 정의했다.

//
//  ViewController.swift
//  standard4
//
//  Created by 김민경 on 2022/10/29.
//

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var TableView: UITableView!
    @IBOutlet weak var cellCountLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        TableView.delegate=self
        TableView.dataSource=self
        
        TableView.layer.cornerRadius=10
        cellCountLabel.text = String(MemoData.count)
        // Do any additional setup after loading the view.
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return MemoData.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath) as? TableViewCell else {return UITableViewCell() }
        
        cell.titleLabel.text = MemoData[indexPath.row].title
        cell.contentLabel.text=MemoData[indexPath.row].content
        cell.timeLabel.text=MemoData[indexPath.row].time
                
        return cell // 테이블뷰에 넣을 셀
                
    }

    let MemoData: [MemoDataModel] = [
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
    ]
}

struct MemoDataModel {
    let title: String
    let content: String
    let time: String
}

 

코드를 하나하나 살펴보면,  우선 테이블뷰와 아래 cellCountLabel은 뷰 하단의 "Label개의 메모"에서 몇개의 메모가 있는지 셀의 개수를 세어 넣어주었다.

@IBOutlet weak var TableView: UITableView!
@IBOutlet weak var cellCountLabel: UILabel!

TableView를 사용할때 가장 중요한것은 바로 대리자 위임이다. 해당 코드를 적어주지않으면 화면에 테이블셀이 나오지않는다!. 

TableView.delegate=self
TableView.dataSource=self

 

테이블뷰 코너 부분이 살짝 둥글게 되어있으므로, conerRadius를 이용해 코너 부분을 둥글게 만들어주었고, 

TableView.layer.cornerRadius=10

해당 셀의 개수를 세어 라벨에 넣어주었다 (String형으로 변환해야한다! MemoData.count의 값은 Int값이므로!)

cellCountLabel.text = String(MemoData.count)

셀이 몇개인지 개수를 세어 리턴해주고,

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

indexPath를 활용하여 컴포넌트별로 Cell에 들어갈값을 지정해두었다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath) as? TableViewCell else {return UITableViewCell() }
        
        cell.titleLabel.text = MemoData[indexPath.row].title
        cell.contentLabel.text=MemoData[indexPath.row].content
        cell.timeLabel.text=MemoData[indexPath.row].time
                
        return cell // 테이블뷰에 넣을 셀
                
}

데이터를 저장할 구조체를 정의해주고, 

struct MemoDataModel {
    let title: String
    let content: String
    let time: String
}

구조체를 이용하여 데이터를 저장해준다.

let MemoData: [MemoDataModel] = [
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
        MemoDataModel (
            title:"계획",
            content:"10/29 토 거북이 밥주기",
            time: "오전 12:31"
        ),
        MemoDataModel (
            title:"UMC 3기 4주차 미션",
            content:"메모장 만들기, 재사용 큐 공부",
            time: "오후 1:41"
        ),
        MemoDataModel (
            title:"인수인계",
            content:"신규이사 모집 관련",
            time: "2022. 10. 15."
        ),
        MemoDataModel (
            title:"대학생활",
            content:"3학년 -UMC 3기, 코딩테스트 준비",
            time: "2022. 9. 17."
        ),
        MemoDataModel (
            title:"IDPW",
            content:"세종대 학사정보시스템",
            time: "2022. 4. 9."
        ),
    ]

 

[시연영상]

 

[Git]

- standard, challenge4 참고

https://github.com/Eunice991217/UMC_3rd-iOS

GitHub - Eunice991217/UMC_3rd-iOS: sejong UMC 3rd iOS-study

 

좋아요2

공유하기

통계

게시글 관리