Across 아이폰 캘린더 앱, 드래그&드랍

메인화면에서 날짜를 누르면 아래와 같이 자세히 볼 수 있는 뷰가 펼쳐진다.

일정을 드래그하여 날짜 또는 시간에 드랍하는 방식으로 일정을 변경하고자 하는 기능을 추가했다.
개발하고 사용하고 있는 나도 필요함을 느꼈고 몇몇 사용자분들로 부터 기능 요청도 받았다.
문제는 드래그하려면 롱프레스 이후 드래그하는 방식이 익숙한데 롱프레스 제스쳐가 이미 컨텍스트 메뉴에 할당되어
어떻게 자연스럽게 드래그를 처리할 수 있는지가 어려웠다.

예전에 롱프로스 이후 위치 변경에 따라 드래그 되는 뷰를 이동시키는 방식으로 드래그를 구현해 본적이 있다.
해당 방식은 컨텍스트 메뉴 때문에 적용하기 힘들었다. 또 속도를 위해 날짜 시간표에 표시되는 일정은 뷰가 아니라
그냥 그리는 방식이어서 드래그하는 뷰도 새로 생성해야 해서 생각보다 작업이 많았고 까다로웠다.

우선 시간표 위에 그려지는 일정을 그리는 방식에서 뷰로 수정했다. 새로 생성한 뷰도 내부에서 서브뷰가 아니고 그리는 방식이어서 속도 측면에서 차이가 거의 없다.

시간표 위에 일정을 길게 누르면 현재 버전은 히든버튼을 추가하여 해당 버튼에 메뉴를 추가하는 방식으로 컨텍스트 메뉴를 표시했다. 수정한 버전은 시간표 위에 일정을 하나의 뷰로 생성하고 뷰에 컨텍스트 메뉴를 추가하는 방식으로 변경하였다.
현재 방식에서 버튼에 컨텍스트 메뉴를 추가한 경우 배경이 블러되지 않지만 뷰에 컨텍스트 메뉴를 추가한 경우 배경이 블러된다.

시간표 위에 생성된 일정뷰에 컨텍스트 메뉴를 추가하고 추가로 뷰에 드래그 인터렉션(UIDragInteraction) 을 추가하는 방식으로 컨텍스트 메뉴와 드래그를 동시에 처리할 수 있었다. UIDragInteraction, UIDropInteraction 은 iOS11 부터 지원하기 시작했는데 이번에 처음 알았다. iOS11 이면 2017년부터 지원하기 시작했다는건데… 공부를 너무 안했네 ㅠㅠ

드래그되는 뷰의 프리뷰는 종일일정의 경우 width를 짧게 생성했고 시간일정이나 할일의 경우 기존뷰를 프리뷰에 그대로 사용했다. 드랍되는 쪽에서는 UIDropInteraction을 처리해 주면 되는데 드랍될 때 드래그하는 뷰에 애니메이션을 추가했다.

드래그할 때 이동 가능하지 않는 경우 UIDropProposal을 이용하여 금지 아이콘을 드래그뷰에 추가했다.
드래그 도중 타겟 뷰가 스크롤뷰일 때 뷰 엣지로 가면 자동으로 스크롤되는데 기능에 맞게 적절히 스크롤 되거나 disable 시키고 조건에 따라서 수동으로 스크롤되는 코드도 넣었다.

시간을 이동하는 경우 타겟 시간과 배경이 빨간색으로 하이라이트됨
날짜 변경 드래그하는 모습
이동 불가능한 경우 드래그 뷰 오른쪽 위에 금지 아이콘이 생성됨

드래그 & 드랍 자체가 테이블뷰 셀 순서 이동 이외 구현할 일이 별로 없다.
또 롱프레스(이동) 또는 팬 제스쳐로도 구현 가능하기에 많은 옵션은 개발자로 하여금 더 혼란스럽게 한다.
기능 정의를 하고도 컨텍스트 메뉴와도 겹치는 롱프레스 제스쳐 때문에 구현에 있어서 애매함도 있어서
기능 제공하기까지 오래 걸렸다.

아직 업데이트 전이긴 하지만 꽤 애먹었던 기능이라서 기록에 남긴다.
곧 업데이트 됩니다! 이 글을 우연히 보신다면 앱 사용 한번 해보세요.
https://apple.co/3ZZ8URN

5 thoughts on “Across 아이폰 캘린더 앱, 드래그&드랍

  1. 안녕하세요~ 앱을 사용하다가 궁금증이 있어서 댓글을 남깁니다. 혹시 기본 ios 캘린더, 미리알림을 동기화 하는 것 외에 아이패드-아이폰 간의 동기화는 어떻게 설정하는 것일까요? 아이폰에서 across 앱에 일정을 입력하면 아이패드의 across 앱에서도 자동으로 동기화가 되었으면 좋겠어요.

  2. 윗 댓글자입니다. 아이폰 앱 내 일정등록 → 아이패드 앱 내 동기화가 안되고, 반대로 아이패드 앱 내 일정등록 → 아이폰 앱 내 동기화가 되네요. 제가 무엇을 빠뜨린 것일까요?

    설정에서 icloud 동기화 설정은 전부 했는데 아이폰 across 앱에서 일정등록이 잦아 아이패드에 연동이 안되고 있으니 조금 불편하네요.

    1. iCloud 동기화 안되는 이유는 너무 많아서 말씀드리기가 쉽지 않은데요. across 앱은 기본캘린더, 미리알림과 데이터를 공유하니까 일단 아이폰과 아이패드 기본캘린더 동기화 되도록 해보세요.
      이미 동기화 설정은 전부 하셨다고 하니까요. 아이폰, 아이패드 모두 ios환경설정>캘린더로 이동하셔서 동기화 항목이 “모든 이벤트”로 되어 있는지 확인부탁드립니다.
      또 ios환경설정>캘린더>계정에 iCloud가 제대로 설정되어 있는지 확인 부탁드립니다. 감사합니다.

  3. 아이패드와 아이폰 모두 계정도 같고 위에 설명대로 모든 이벤트로 되어있고 캘린더 계정과 아이폰 계정모두 같은데 여전히 동기화가 안되요

    1. 기기간 연동 오류는 확인해야 할 사항이 많습니다.
      아이폰, 아이패드 모두 확인 부탁드립니다.

      1. 아이폰, 아이패드 같은 애플 아이디로 로그인되어 있는지 확인
      2. iOS 설정> 계정> iCloud 에서 캘린더, 미리 알림 모두 활성화
      3. iOS 설정> 캘린더> 동기화 에서 “모든 이벤트” 선택
      4. iOS 설정> 캘린더> 계정 에서 iCloud 계정 있는지 확인
      5. iOS 설정> 미리알림> 계정에서 iCloud 계정 있는지 확인
      6. iOS 설정> Across> 캘린더, 미리알림 스위치 ON 확인
      7. 캘린더앱(기본앱)을 실행하여 하단 탭에서 캘린더 선택> 캘린더 목록 창에서 아래로 드래그하여 새로고침
      8. 아이폰, 아이패드에서 어크로스앱 실행하여 일정/미리알림 동기화 되었는지 확인
      9. 구글 또는 네이버 캘린더 같은 써드파티 캘린더 계정은 기기마다 각각 계정 추가해 줘야 함

      감사합니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다