LG QCircle을 개발해보자

퀵서클 가이드 & 개발기

Qcircle?

퀵서클이 뭐지? 라고 생각하지는 분들이 많으실겁니다. 저도 이번에 개발을 하면서 처음듣게 된 용어인데요. 사실 G3를 쓰시는 분들이라면 그리 낮설지 않으실 수도 있겠네요. 바로 아래와 같은 화면을 Qcircle 이라고 합니다.

이를통해 퀵 윈도우 안에 내 앱의 아이콘을 노출 시키고, 이것을 선택하면 아래와 같이 앱이 제공하는 각종 기능들을 편리하게 사용할 수 있도록 도와주게 됩니다.

아래 샘플 이미지만 보시고 혹시 위젯처럼 제약이 있는 상태에서 개발하는거 아니야? 라고 생각하실 수 있는데 일반 레이아웃으로 구성되어 있기 때문에 쉽고 빠르게 개발하실 수 있습니다.

적용조건

1. Android API 19 이상
2. 퀵 커버 기능 지원 단말
3. 퀵 커버

적용조건은 위와 같습니다. 사실 퀵 커버를 사용하는 G3 사용자만 해당 기능이 동작합니다. 허나 추후 LG에서 발매할 단말들은 퀵 커버 기능을 적용할 예정이므로 의미있는 개발이라 말씀드리고 싶네요.

OverView

위에서 설명한 내용들을 정리해보면 QCircle은 퀵 커버를 통해 커버가 닫인 상황에도 아이콘을 선택하여 서비스를 수행할 수 있도록 하는 것을 의미합니다.

이것들의 정확한 명칭은 커버의 circle 사이로 보이는 것을 QuickCircle window, 아이콘을 Application icon 이라고 합니다.

그럼 내 앱을 이 QuickCircle window에 어떻게 노출 시킬까요?

설정 메뉴에서 해당 앱을 선택하면 됩니다. 저는 앱이 노출이 안돼서 코드가 잘못된 줄 알고 한참을 고민했는데.. 여러분들은 그러지 마세요..

Architectural

그림을 보시면 아시겠지만 구조는 그리 복잡하지 않습니다.

1. 어플리케이션에 메니페스트를 통해 설정 리스트에 해당 어플리케이션이 나타나도록 하고
2. 설정메뉴에서 QuickCircle window 에 노출할 서비스를 선택
3. QuickCircle window에 해당 서비스가 노출되고 이를 선택하면 서비스가 실행
4. 실행된 어플리케이션은 Intent를 통해 현재 커버가 열려있는지 닫혀있는지에 대한 이벤틀 전달아 이에 맞는 서비스를 제공
5. 닫혀있는 상태에서 서비스 관련 화면을 노출하기 위해서는 Internal DB를 통해 레이아웃의 구성 및 해당하는 데이터를 가지고 옵니다. (음.. 레이아웃을 보여준다는 겁니다.)

QCircle Application Event Handling Flow

위에서 설명한 커버 열고 닫힘과 같은 Qcircle 에서 전달 이벤트를 받기위해서는 아래와 같은 핸들링 플로우를 따라야 합니다.

1. 이벤트를 전달받을 브로드 캐스트 리시버를 등록

2. Qcircle 인텐트를 전달받는다.

3. Qcircle 을 사용할 수 있는지 체크한다.

4. 커버 상태에 따른 관련 액션을 수행한다.

코드 적용

이제 본격적으로 코드를 적용해 봅시다.

step1. BroadCast Receiver 정의

커버에 대한 이벤트(열림, 닫힘)를 받기위해 인텐트 필터와 액션을 정의하고 브로드 캐스트 리시버를 등록합니다.

step2. 퀵 커버 이벤트 핸들링

퀵 커버를 사용할 수 있는지 여부를 확인하기 위한 값을 LG 단말 DB에서 조회할 수 있습니다.

실제로 코드를 돌려보면 넥서스5의 경우는 0으로 false가 떨어졌고 G3의 경우 1로 true가 떨어졌습니다.

샘플코드에서는 조건문이 잘못되어 있는데 (0일 경우 사용 가능으로 나오도록 되어 있다.) 위의 코드처럼 조건을 변경하도록 하자.

이제 현재 단말이 실제 퀵 커버를 장작했는지에 대한 여부를 알도록 합니다.

코드로 확인해 보면 넥서스5의 경우 0, G3의 경우 3 으로 확인되었습니다.

G3의 경우 퀵커버를 뺀 상태 (아무 케이스도 장착하지 않은 상태) 에서도 3 으로 확인되어 이 부분에 대해서는 좀 더 확인이 필요하다. 케이스를 벗긴 상태로 재부팅하여 다시 확인해 보았으나 여전히 3 으로 확인된다. 퀵커버가 아닌 일반 케이스를 장착해 테스트가 필요했지만.. 일반 케이스가 없어서 더 이상의 테스트는 불가하였다.

이제 현재 커버가 어떤 상태인지 (열림 혹은 닫힘) 알아보는 코드를 살펴보겠습니다. 이전에 정의한 브로드 캐스트 리시버 내에 아래와 같은 코드를 적용합니다.

여기서 mQuickCoverState 값이 1인 경우는 커버 닫힘 2는 커버 열림 케이스입니다. 각각의 조건에 맞춰 본인이 보여주고자 하는 플로우를 적용합니다.

step3. QuickCircle window 만들기

이제 커버가 닫혀있는 상태에서의 화면을 만들어 봅니다. 만약 QuickCircle window안에 딱맞는 동그란 레이아웃을 만들고자 한다면 레이아웃의 위치 정렬을 위해 아래처럼 코드상 계산이 필요합니다. 이는 매우 복잡하기에 우리는 LG에서 제공하는 값들을 가져다 쓰면 되는데요. 이 제공되는 값들의 속성은 아래와 같습니다.

config_circle_window_x_pos는 레이아웃이 왼쪽으로 얼마나 떨어질지

config_circle_window_y_pos는 위쪽으로 얼마나 떨어질지

config_circle_window_width는 레이아웃의 넓이

config_circle_window_height는 높이

config_circle_diameter는 레이아웃에 실제로 노출될 가로, 세로 크기를 의미합니다.

위 이미지를 보면 알겠지만 config_circle_diameter는 실제 표현되는 윈도우의 크기로서 config_circle_window_width 보다 작기 때문에 값의 차이가 발생한다. 이 차이를 계산하여 offset 값을 도출하는데, 방법은 아래와 같으며

이를 레이아웃의 Top 마진(offset) 으로 적용하도록 합니다.

또한 이러한 앱은 Lock screen 상태일 경우에도 화면이 노출되도록 Lock screen 을 제어할 필요가 있기 때문에

위와 같이 코드 상으로 플래그를 추가합니다.

AndroidManifest.xml file 설정

1. 설정에 퀵서클 케이스에서 지원하는 목록에 서비스가 노출되기 위해서 아래와 같이 인텐트 필터를 정의하고.

2. QuickCircle window에 정확히 표현되기 위해 타이틀바를 제거하고 portrait 상태로 정렬합니다.

3. 또한 QuickCircle window에 노출될 application icon의 이미지를 아래와 같이 정의합니다.

레이아웃 위치 정렬

별도의 레이아웃 정렬을 하지 않는다면 아래와 같이 Qcircle 용 레이이아웃이 노출됩니다. 즉, 위에서 잠깐 이야기 했지만 LG에서 제공하는 값들을 통해 위치를 정렬하는 방법을 알아보도록 하겠습니다.

먼저 Qcircle window의 속성값을 가져옵니다.

이 값들을 이용하여 아래와 같이 레이아웃의 위치를 정의합니다.

그러면 QuickCircle window 의 위치에 딱맞게 위치가 이동되어집니다.

여기까지가 QCircle 개발기 였습니다. 생각보다 어렵지 않으시죠? 좀 더 자세한 내용은 Introduction to the LQ QCircle SDK 를 참조 하시면 될 것 같네요. 혹시 궁금한 점이 있으시면 언제든지 댓글이나 트위터 남겨주시면 감사하겠습니다. ☺