1. 이미지 다운로드 로딩
메인 화면에서 아직 이미지가 다운로드 되지 않은 채로 InfoView로 들어가면 따로 이미지를 다운로드 받아 띄운다.
그동안은 기본 이미지로 대체하는데 사용자 입장에서는 장소 이미지가 없는건지 새로 받는 중인지 구분할 수 없기 때문에 다운로드 동안 로딩화면을 넣기로 했다.
사실 이건 내가 예전부터 추가했으면 좋겠다 했던 기능이다.
로딩 화면
if loading{
let width = placeImg.frame.midX
let height = placeImg.frame.midY
loadingView.frame = CGRect(x: 0, y: 0, width: placeImg.frame.width, height: placeImg.frame.height)
loadingView.backgroundColor = UIColor.white
self.view.addSubview(loadingView)
let indicator = NVActivityIndicatorView(frame: CGRect(x: width - 25 , y: height - 25 , width: 50, height: 50),
type: .ballRotateChase,
color: .cyan,
padding: 0)
loadingView.addSubview(indicator)
indicator.startAnimating()
}로딩 화면은 NVActivityIndicatorView 을 이용했다. 전에 메인 화면에서 넣으려고 시도했던 적이 있어 금방 해결했다.
self.loadingView.removeFromSuperview()사진을 다운로드 받으면 loading 을 true 로 해서 로딩 화면을 띄우고 다운로드가 완료되면 로딩 화면을 제거한다.
let width = placeImg.frame.midX let height = placeImg.frame.midY let indicator = NVActivityIndicatorView(frame: CGRect(x: width - 25 , y: height - 25 , width: 50, height: 50), type: .ballRotateChase, color: .cyan, padding: 0)
로딩 심볼의 위치와 크기를 결정하는 함수다. 장소 이미지 중간에 로딩을 표시하고 싶었다.
midX, midY 로 해당 frame의 중간 위치를 구할 수 있어 로딩 위치도 midX, midY 로 하면 될 줄 알았는데 애매한 위치가 나와서 고생했다..
frame에서 x, y는 중간이 아닌 왼쪽 상단을 즉, 시작 위치를 기준으로 하기 때문에 로딩 심볼이 오른쪽 아래로 치우치게 나온 것이다.
로딩 심볼 크기를 가로, 세로 50으로 했으니 imgView 가운데에 위치하려면 25씩 이동하면 된다.
+ 함께 보면 좋은 글 : Frame과 Bounds의 차이
2. 장소 추가에서 카테고리 추가
그룹과 분류의 편집은 설정에서만 가능했다. 처음엔 기본 그룹과 분류가 제공되는데 장소를 넣다가 원하는 그룹이나 분류가 없을 때 바로 넣고 싶다는 피드백을 받았다.
장소를 추가하던 중에 원하는 항목이 없으면 설정에 가서 추가하는 것은 번거롭기 때문에 장소 추가 페이지에서도 그룹과 분류를 추가할 수 있도록 했다.
btnAdd.title = "추가"
btnAdd.tintColor = #colorLiteral(red: 0, green: 0.8924261928, blue: 0.8863361478, alpha: 1)
btnAdd.target = self
pickerToolbar.setItems([btnAdd, flexSpace, btnPickerDone], animated: true)inputView에 넣은 toolBar에 추가 버튼도 넣었다.
이미 설정 페이지에서 추가 함수는 구현되어 있기 때문에 그대로 사용하고 추가한 항목을 업로드 하는 함수를 수정했다.
func uploadCategory(_ type: String, item: String){
let categoryRef = db.collection("category").document(Uid)
var target : String!
var array = [String]()
if type == "분류"{
target = "items"
categoryItem.append(item)
array = categoryItem
categoryPicker.reloadAllComponents()
}else{
target = "group"
groupItem.append(item)
array = groupItem
groupPicker.reloadAllComponents()
}
categoryRef.updateData([
target : array
])
}그룹과 분류에서 동시에 사용할 수 있도록 String을 받아 구분하게 했다.
위와 비슷하게 picker를 설정하던 함수도 하나로 통합했다.
3. 장소 이미지 추가 모양 변경
별건 아니지만 장소 이미지를 선택할 때 어떤 버튼인지 헷갈린다 해서 버튼을 크게 하나만 넣고 이미지뷰는 안보이게 했다!
4. Google Map Marker Icon 변경
오래 전부터 기본 마커가 아닌 이미지를 사용하고 싶었으나 다른 기능을 구현하느라 외면하고 있었다..
언니가 가보고 싶은 곳은 구분되면 좋겠다 하여 이 참에 마커 모양을 바꿔봤다.
마커 이미지는 파워포인트로 만들었다. 초반에 이미지 아이콘을 시도했을 때 사이즈가 어마하게 커서 바로 포기했는데 사이즈를 설정하는 함수를 넣어주면 됐다.
extension GMSMarker {
func setIconSize(scaledToSize newSize: CGSize) {
UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
icon?.draw(in: CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height))
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
icon = newImage
}
}가본 장소와 안 가본 장소의 마커를 구분하기 위해 다른 색 아이콘을 이용했다.
if place.visit {
marker.icon = UIImage(named: "marker_basic")
marker.userData = 0
}else{
marker.icon = UIImage(named: "marker_novisit")
marker.userData = 1
}이양 마커 이미지를 넣는 겸 마커를 클릭했을 때도 구분되는 마커를 추가 했다.
func mapView(_ mapView: GMSMapView, didCloseInfoWindowOf marker: GMSMarker) {
if marker.userData as! Int == 0{
marker.icon = UIImage(named: "marker_basic")
}else{
marker.icon = UIImage(named: "marker_novisit")
}
marker.setIconSize(scaledToSize: .init(width: 30, height: 40))
}
func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
marker.icon = UIImage(named: "marker_select")
marker.setIconSize(scaledToSize: .init(width: 30, height: 40))
return false
}
- didTap : 마커 선택 시
- didCloseInfoWindowOf : 마커 선택 해제 시
마커 선택을 해제 하면 다시 원래 마커 이미지로 돌아와햐 했다. 처음 마커를 표시할 때는 placeData에 visit으로 비교하면 됐지만 마커를 클릭하고 해제할 땐 가본 장소인지 구분할 수 없었다.
marker.userData
그래서 marker에 정보를 담을 수 있는 maker.userData에 각각 0과 1을 넣어 0 이면 가본 장소, 1이면 안 가본 장소로 구분해서 마커 아이콘을 설정했다.
