프로젝트 5일차

5일차다 처음에는 백지였던 그림이 시간을 지나 점점 뚜렷하게 보이기 시작한다.

이젠 크게 중요하진 않으나 있으면 좋을 기능을 구현하려한다.

신상표시

우선 Model에 신상인지 아닌지를 판별할 Bool Type의 변수를 하나 만든다.

struct AppleProduct {
    
    let image: UIImage?
    let name: String
    let price: Int
    let category: String
    var value: Int 
    var isNew: Bool // new
    
}

CollectionView내에 새로운 label을 만들었다.

코드로 작성된 디자인이기에 그에 맞춰 작성했다.

그리고 컬렉션 뷰에 적용해야하므로 다음과 같이 extension으로 기능을 확장해준다.

해당 코드는 저번의 ToDoList에서 가져왔다.

extension UIView {
    func blink() {
        self.alpha = 0.7;
        UIView.animate(withDuration: 0.5, //Time duration you want,
                       delay: 0.0,
                       options: [.curveEaseInOut, .autoreverse, .repeat],
                       animations: { [weak self] in self?.alpha = 0.0 },
                       completion: { [weak self] _ in self?.alpha = 1.0 })
    }
    
    func stopBlink() {
        layer.removeAllAnimations()
        alpha = 1
    }
}

그리고 신상품에 대해서 true로 해주고 컬렉션뷰 셀을 담당하는 코드로 가서

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: Constants.contentName, for: indexPath) as! ProductCell
        let product = filteredProducts[indexPath.item]
        cell.configure(with: product)
        //new
        if product.isNew {
            cell.newLabel.isHidden = false
            cell.newLabel.blink()
        } else {
            cell.newLabel.isHidden = true
        }
        
        return cell
    }

다음과 같이 설정을 해준다.

이렇게 실행하면 처음에는 보여지나 두번째에서는 이펙트 없이 Label만 나오게된다.

VC의 생명주기를 이용하여

override func viewWillAppear(_ animated: Bool) {
        mainCollectionView.reloadData()
    }

로드를 새로 해준다.

완료.

하지만 문제점은 셀의 크기는 같지만, 이미지 사이즈가 각각 다르기에 이미지가 Label을 가리는 경우가 생긴다.

이부분은 이미지 조절이 필요할듯하다.

지도 구현.

뭔가 더 특색있게 하는게 낫지 않을까 싶어 지도를 구현한다.

코드로 VC를 구현하려다 AutoLayout이 말썽을 일으켜 StoryBoard 로 대체한다.

CallCenterVC에 아래와 같이 함수를 하나 만들어준다.

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if indexPath.row == 0 {
            if let mapVC = self.storyboard?.instantiateViewController(identifier: Constants.mapVC) as? MapViewController {
                
                self.present(mapVC, animated: true)
            }
        }
    }

첫번째가 매장찾기이므로 첫번째 해당하는것만 화면전환을 했다.

import UIKit
import MapKit // new
import CoreData // new

class MapViewController: UIViewController {

    @IBOutlet weak var mapView: MKMapView!
    
    @IBOutlet weak var branchLabel: UILabel!
    
    let coordinates = CLLocationCoordinate2D(
        latitude: 37.503702192, longitude: 127.025313873406
    )
    
    override func viewDidLoad() {
        super.viewDidLoad()
        mapView.setRegion(MKCoordinateRegion(center: coordinates, span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)), animated: false)
        
        addBranch()
        branchLabel.numberOfLines = 0
        branchLabel.text = "Fine Apple Store 강남점 \n주소: 서울특별시 강남구 강남대로 🍍🍍🍍"
    }
    
    func addBranch () {
        let pin = MKPointAnnotation()
        pin.title = "🍍 Fine Apple Store 강남점"
        pin.subtitle = "본점"
        pin.coordinate = coordinates
        mapView.addAnnotation(pin)
    }
    
}

지도를 구현하기 위해선 MapKit은 필수로 불러와야한다. 현위치를 사용하지 않기 때문에, GPS값을 가져오는것이 아닌 좌표를 입력하여 위치를 지정하므로 CoreData까지 가져온다.

그리과 좌표를 설정해주고.

setRegion을 통해 지도에서 어느위치를 보여질지 정하고, MKCoordinateSpan 값이 클수록 지도의 축척이 커진다.

(더 넓게 보인다는 의미)

가까운 위치를 보여주기위해 0.1씩 주었다.

그리고 핀을 추가해주기 위해 addBranch라는 함수를 만들어 주었다.

확인 완료.

이제 추가할 기능이 뭐가 있나 싶다.