'지구 온도계' 프로젝트(3)
한 달만에 돌아온 프로젝트
이번에는 두 달이 아니라 한 달이 좀 안돼서 프로젝트 포스팅으로 돌아왔습니다.
12월 안에는 기능 구현을 마무리하고 돌아온다고 했는데 어느새 1월이네요.. 그래도 기능 구현은 많이 마무리되어, 어느새 프로젝트의 끝이 보이고 있습니다.
'피그마'를 통해 디자인한 초안과 많이 비슷해진 것을 볼 수 있죠?
오늘은 그동안 추가한 기능들을 몇 가지 정리해 보겠습니다.
추가된 기능들
평균기온 비교
10일간의 일기예보에서 평균기온을 간단하게 눈으로 비교할 수 있도록 평균기온을 나타내는 bar를 추가하였습니다.
어떤 식으로 기능을 구현할지 고민을 하던 차에 xcode 라이브러리에 UIProgressView가 제가 생각한 디자인과 비슷해서 ProgressView를 사용해서 간단하게 구현하였습니다.
class WeekWeatherTableViewCell: UITableViewCell {
//주간 날씨 테이블뷰 UI
@IBOutlet weak var tempProgressView: UIProgressView!
}
extension ViewController: UITableViewDataSource, UITableViewDelegate {
//테이블뷰 셀의 숫자
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
//테이블뷰 셀 설정
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = weekWeatherTableView.dequeueReusableCell(withIdentifier: "WeekWeatherTableViewCell", for: indexPath) as! WeekWeatherTableViewCell
//프로그래스뷰 설정
cell.tempProgressView.progress = 0.5 + Float((self.weekWeatherMaxTempArray[indexPath.row] + self.weekWeatherMinTempArray[indexPath.row])) / 100.0
return cell
}
}원래라면 진행 상황이나 로딩 화면을 bar 형태로 보여주는 라이브러리지만 bar의 progress를 상수로도 설정할 수 있어서 평균기온값을 넣어, 날마다 바뀌는 평균기온을 눈으로 간단히 비교할 수 있는 기능을 추가했습니다.
상세 날씨
첫 화면에 보이는 날씨 뷰를 터치하면 상세 날씨를 볼 수 있도록 페이지를 추가하였습니다.
//NextVC로 데이터 전송
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "showNextVC" {
guard let vc = segue.destination as? NextVC else { return }
vc.temp = self.temp
vc.symbol = self.symbol
}
}WeatherKit을 통해 받은 데이터를 NextVC로 전송하여, NextVC에서는 받은 데이터를 보여주는 방식으로 상세 날씨 페이지를 만들었습니다.
지역 추가 및 삭제
WeatherKit 이후로 가장 시간을 많이 투자한 기능인 것 같네요.
'지역 추가 및 삭제'는 PageViewController, Notification으로 나눠 설명하겠습니다.
PageViewController
ViewController로 이루어진 배열을 PageViewController를 이용해 보여주는 방식으로 기능을 구현하였습니다.
class CustomPageViewController: UIPageViewController, UIPageViewControllerDelegate {
//UIViewcontroller로 이루어진 배열
var pageViewControllerList = [UIViewController]()
override func viewDidLoad() {
super.viewDidLoad()
//델리게이트 설정
self.delegate = self
//배열을 보여주는 함수 세팅
weatherCard()
}
// 현재 날씨 카드
func weatherCard() {
//기본 ViewController추가
pageViewControllerList.append(WeatherCardViewController.getInstance())
setViewControllers([individualPageViewControllerList[1]], direction: .forward, animated: true, completion: nil)
}위 코드 이외에도 설정해 주어야 하는 코드가 많지만 첫 화면을 세팅하는 코드만 가져왔습니다.
pageViewControllerList라는 배열을 만들고 배열에 WeatherCardViewController라는 ViewController를 추가함으로써 화면이 불러질 때 WeatherCardViewController가 보이도록 구현하였습니다.
Notification
우선 Notification에 대해 간단하게 설명하겠습니다.
NotificationCenter에 추가한 post를 앱 전체에 발송되면 Observer가 이를 관찰하고 NSNotification.Name을 key로 이벤트를 수행합니다.
//추가버튼
@IBAction func addButtonTapped(_ sender: UIButton) {
//NotificationCenter에 post추가
NotificationCenter.default.post(name: Notification.Name("addVC"), object: mapItemArray)
self.dismiss(animated: true)
}새로운 지역의 추가를 위해 추가 버튼 내에 위와 같이 Notification post를 추가합니다.
object에 필요한 데이터를 함께 보낼 수 있으며, 저는 날씨를 추가하는데 필요한 지역 정보를 담은 배열을 보냈습니다.
//날씨카드 추가 NotificationCenter에 옵저버 추가
private func addNotiObserver() {
NotificationCenter.default.addObserver(self, selector: #selector(addVC), name: NSNotification.Name("addVC"), object: nil)
}
//추가 함수
@objc func addVC(notification: NSNotification) {
if let mapItemArray = notification.object as? [String] {
pageViewControllerList.append(WeatherCardViewController.getInstance(locality: mapItemArray[0], country: mapItemArray[1], latitude: mapItemArray[2], longitude: mapItemArray[3]))
setViewControllers([pageViewControllerList[0]], direction: .forward, animated: false)
}
}이젠 지역 추가를 실제 수행하는 CustomPageViewController 내에 Notification Observer를 추가하고, Observer의 name과 post의 name이 같다면 이벤트가 실행됩니다.
실행되는 함수에서 post에서 받아온 object를 이용해 새로운 WeatherCardViewController를 추가하는 것으로 기능을 구현하였습니다.
삭제는 추가 기능과 같이 NotificationCenter에서 "delVC"라는 post를 보내면 pageViewControllerList의 요소를 삭제하는 것으로 구현하였습니다.
마치며
이젠 몇 주 안에 프로젝트가 마무리될 것 같습니다.
첫 프로젝트부터 넣고 싶은 기능을 다 넣다 보니 시행착오가 많았던 것 같습니다. 그래도 그만큼 더 성장하고, 어떤 방식으로 공부해야 할지 조금은 길이 보는 것 같기도 하네요..😅
프로젝트를 마무리하고 1월 안에 다시 찾아오겠습니다.
