[iOS] 현재 위치 날씨 & 24시간 & 7일 데이터 띄우기 - 2(Current Location Get weather 24 hours a day, 2 week)

안녕하세요 Foma 입니다!

 

저번 시간에 날씨 데이터를 받아오는 과정을 했었는데요.

 

(혹시 못보신 분들은 여기 로 이동해서 먼저 보고와주세요!)

 

이번에는 받아온 날씨 데이터를 이용해서 화면에 띄워보도록 하겠습니다!

---

WeatherView

 

먼저 WeatherView로 이동해서 현재,24시간,주간 날씨를 담을 변수들을 만들어줍니다.

   var currentWeather:CurrentWeather!
   var hourlyWeathers:[HourlyWeather] = []
   var weeklyWeathers:[WeeklyWeather] = []

먼저 현재 날씨 데이터를 각 레이블에 맞게 세팅해줍니다.

  func setupCurrentWeather() {
        self.cityLabel.text = currentWeather.city
        self.dateLabel.text = "Today, \(currentWeather.date)"
        self.tempLabel.text = "\(currentWeather.temp)"
        self.weatherInfoLabel.text = currentWeather.weatherInfo
    }

그 다음으로 테이블뷰에 테이블뷰셀을 등록해주시고 dataSource를 self로 해줍니다.

   func setupTableView() {
        weeklyTableView.register(UINib(nibName: "WeeklyTableViewCell", bundle: Bundle.main), forCellReuseIdentifier: "Cell")
        weeklyTableView.dataSource = self
    }

컬렉션뷰도 테이블뷰와 마찬가지로 세팅해줍니다.

   func setupCollectionView(){
        hourlyCollectionView.register(UINib(nibName: "HourlyCollectionViewCell", bundle: Bundle.main), forCellWithReuseIdentifier: "Cell")
        hourlyCollectionView.dataSource = self
    }

---

HourlyCollectionViewCell

 

컬렉션뷰에 받아온 데이터를 넣기 위해서 컬렉션뷰셀로 이동해줍니다.

 

아래와 같이 받아온 데이터를 각 레이블과 아미지에 맞게 세팅해줍니다.

 

(여기서 getWeatherIconFor는 저번 시간에 Helpers안에 아이콘의 이름을 이미지로 바꿔주는 함수를 만들어서 적용한 것입니다.)

class HourlyCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var tempLabel: UILabel!
    @IBOutlet weak var weatherImage: UIImageView!
    @IBOutlet weak var timeLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        
    }
    
    func generateCell(hourlyWeahter:HourlyWeather){
        tempLabel.text = "\(hourlyWeahter.temp)"
        timeLabel.text = hourlyWeahter.date
        weatherImage.image = getWeatherIconFor(hourlyWeahter.weatherIcon)
    }
}

---

WeeklyTableViewCell

 

테이블뷰셀도 마찬가지로 세팅해주세요!

class WeeklyTableViewCell: UITableViewCell {

    @IBOutlet weak var weekLabel: UILabel!
    @IBOutlet weak var weatherImage: UIImageView!
    @IBOutlet weak var tempLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    
    func generateCell(weather:WeeklyWeather) {
        weekLabel.text = weather.date
        weatherImage.image = getWeatherIconFor(weather.weatherIcon)
        tempLabel.text = "\(weather.temp)"
    }
}

WeatherView

 

다시 WeatherView로 돌아와서

 

아래와 같이 DataSource를 extension으로 확장해서 테이블뷰 데이터소스를 세팅해줍니다.

 

위에서 만들어놓은 generateCell함수의 파라미터로 weeklyWeathers에 담겨있는 WeeklyWeather을 넣어줍니다.

extension WeatherView:UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        weeklyWeathers.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell") as! WeeklyTableViewCell
        cell.generateCell(weather: weeklyWeathers[indexPath.row])
        return cell
    }
}

콜렉션뷰도 마찬가지로 세팅해줍니다.

 

콜렉션뷰도 마찬가지로 위에서 만들어놓은 generateCell함수의 파라미터로 hourlyWeathers에 담겨있는 HourlyWeather을 넣어줍니다.

extension WeatherView:UICollectionViewDelegate,UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
        return hourlyWeathers.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as!
            HourlyCollectionViewCell
        cell.generateCell(hourlyWeahter: hourlyWeathers[indexPath.item])
        return cell
    }
}

이렇게 모든 작업을 하고 마지막으로 모든 작업을 실행할 함수를 만들어줍니다.

  func setupAll() {
        setupCurrentWeather()
        setupCollectionView()
        setupTableView()
    }

 

여기까지 WeatherView 세팅이 끝났구요.

 

이제부터는 WeatherViewController에 WeatherView를 세팅하는법에 대해서 다뤄보겠습니다.

---

WeatherViewController

 

가장 먼저 WeatherView를 세팅해줘야겠죠?

 

아래와 같이 xib로 만든 nib을 WeatherView로 만들어줍니다.

 

weatherView의 프레임을 현재 뷰와 맞게 조정해주시구요.

 

view에 addSubview로 weatherView를 만들어줍니다.(getCurrentWeather,getHourlyWeather,getWeeklyWeather은 아래서 설명할게요!)

    private func setupWeatherView() {
        let weatherView = Bundle.main.loadNibNamed("WeatherView", owner: self, options: nil)?.first as! WeatherView
        weatherView.frame = CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height)
        getCurrentWeather(weatherView: weatherView)
        getHourlyWeather(weatherView: weatherView)
        getWeeklyWeather(weatherView: weatherView)
        self.view.addSubview(weatherView)
    }

 

먼저 현재 날씨를 세팅해보겠습니다.

 

먼저 WeatherView를 파라미터로 받는 getCurrentWeather을 만들어줍니다.

 

위에서 우리는 WeatherView안에 currentWeather 변수를 만들어놓았죠?

 

여기서 WeatherView안에 currentWeather을 새로운 CurrentWeather 인스턴스로 만들어준 뒤

 

CurrentWeather 안에 있는 메소드인 getCurrentWeather을 실행시켜준 뒤에 

 

WeatherView의 setupAll을 해주어 모든 세팅을 해줍니다.

  private func getCurrentWeather(weatherView:WeatherView) {
        weatherView.currentWeather = CurrentWeather()
        weatherView.currentWeather.getCurrentWeather {
            weatherView.setupAll()
        }
    }

24시간 날씨도 현재 날씨와 마찬가지로 세팅해주지만 getWeeklyWeather에서 받아온 weeklyWeathers를 WeatherView 안에 있는

 

weeklyWeahters로 설정해준 뒤 weatherView의 컬렉션뷰를 reload시켜줍니다.

    private func getWeeklyWeather(weatherView:WeatherView) {
        WeeklyWeather.getWeeklyWeather { (weeklyWeathers) in
            weatherView.weeklyWeathers = weeklyWeathers
            weatherView.weeklyTableView.reloadData()
        }
    }

주간 날씨도 24시간 날씨와 마찬가지로 세팅해줍니다.

   private func getHourlyWeather(weatherView:WeatherView) {
        HourlyWeather.getHourlyWeather { (hourlyWeathers) in
            weatherView.hourlyWeathers = hourlyWeathers
            weatherView.hourlyCollectionView.reloadData()
        }
    }

 

이렇게 모두 마친 후 

 

viewDidLoad에  setupWeatherView 함수를 실행시켜줍니다.

 

(requestAuthorization 함수는 여기 글을 참조해주세요!)

    override func viewDidLoad() {
        super.viewDidLoad()
        requestAuthorization()
        setupWeatherView()
    }

 

 

---

아래와 같이 현재 위치에 있는 현재 날씨와 앞으로의 24시간동안 날씨 그리고 앞으로의 2주간의 날씨가 띄워진 것을 볼 수 있습니다!!!

 

(시뮬레이터로 실행해서 애플 본사가 있는 위치로 되어있네요... ㅎㅎ)

 

 

 

이렇게 2편에 걸친 날씨 알아보기가 끝났는데요.

 

혹시라도 궁금한 점이 있으시거나 지적하실 부분이 있으시면 언제든 댓글 달아주세요!!