MapWidget

1. Overview

MapWidget 은 Widget GUI Components 를 통해 사용자가 자유롭게 UI 를 디자인 할 수 있습니다. 그리고, 지도의 기울기와 회전과 상관없이 항상 일정하게 보이는 특징이 있습니다. MapWidget 과 Compass, ScaleBar 는 화면 좌표상의 특정 지점에 그려지는데, InfoWindow 는 지도의 특정 위치 좌표상에 그려집니다.

Compass & ScaleBar	InfoWindow

2. MapWidgetManager

MapWidgetManager 는 MapWidget 과 관련 된 최상의 클래스이며, InfoWindowLayer 와 MapWidgetLayer 를 가지고 있습니다. 다른 지도 API 와 다르게 MapWidet 은 Layer 를 사용자가 생성 및 추가하지 않고 빌트인 되어 있는 Layer 만 이용합니다.

// MapWidgetManager 를 가져오는 방법
kakaoMap.getMapWidgetManager();

3. InfoWindowLayer

InfoWindowLayer 는 InfoWindow 의 생성 및 삭제와 같은 객체관리를 하는 컨테이너 역할을 합니다.

// InfoWindowLayer 를 가져오는 방법
kakaoMap.getMapWidgetManager().getInfoWindowLayer();

4. MapWidgetLayer

MapWidgetLayer 는 MapWidget 의 생성 및 삭제와 같은 객체관리를 하는 컨테이너 역할을 합니다.

// InfoWindowLayer 를 가져오는 방법
kakaoMap.getMapWidgetManager().getMapWidgetLayer();

5. Gui Components

MapWidget 은 GuiCompoent 들로 구성됩니다. GuiCompoent 를 통해 사용자가 자유롭게 UI 를 디자인 할 수 있습니다. MapWidget 의 전체크기는 그 안에 그려진 Gui Component 의 최종 크기 입니다.

UI 를 구성 할 수 있는 GuiCompoent 종류

아래의 GuiComponent 를 가지고 다양한 MapWidget 과 InfoWindow 를 설정할 수 있습니다.

GuiCompoent 들의 공통 Property

아래의 GuiComponent 를 가지고 다양한 MapWidget 과 InfoWindow 를 설정할 수 있습니다.

GuiLayout

여러 개의 child component 를 가질 수 있고, Orientation 에 따라 child 가 가로로 추가 될 지, 세로로 추가 될 지 결정됩니다.

GuiLayout 을 활용하는 예제코드

// 1. Orientation.Vertical 으로 레이아웃 생성
GuiLayout layout = new GuiLayout(Orientation.Horizontal);
layout.setId("myLayout");
body.setPadding(15, 15, 15, 13);

// 2. 레이아웃에 넣을 bgImage 를 추가
layout.setBackground(new GuiImage(R.drawable.window_body, false));

// 3. 레이아웃에 텍스트 추가
GuiText text = new GuiText("안녕하세요!");
text.setTextSize(23);
text.setPadding(0, 0, 13, 0);

// 4. 레이아웃에 이미지 추가
GuiImage starImage = new GuiImage(R.drawable.star, false);
layout.addView(starImage);

GuiImage

이미지를 나타내는 component 이고, 하나의 child component 를 가질 수 있습니다. GuiImage 안에 포함 된 child 의 크기만큼 이미지를 늘어나게 됩니다. child 크기만큼 늘어나지 않아아야 하는 이미지 영역은 fixedArea 로 크기를 설정 할 수 있습니다.

아래는 말풍선 이미지 각 모서리의 둥근 부분만큼(7px)은 늘어나지 않도록 FixedArea 를 설정하여 고정된 예제 이미지입니다.

FixedArea 를 설정 할 때는 GuiImage 생성 할 때 isNinepatch 를 true 로 설정해야 합니다.

GuiLayout body = new GuiLayout(Orientation.Horizontal);
body.setId("bubble_style");
body.setPadding(20, 20, 20, 18);

// isNinepatch 는 true 로 설정
GuiImage image = new GuiImage(R.drawable.window_body, true);
image.setFixedArea(7, 7, 7, 7); // fixedArea, 단위는 px
body.setBackground(image);

GuiText text = new GuiText("InfoWindow!");
text.setTextSize(30);
body.addView(text);

GuiText

텍스트를 표시 할 수 있는 component 이고, child component 를 가질 수 없습니다.

GuiButton

클릭 이벤트를 가질 수 있는 component 이고, 하나의 child component 를 가질 수 있습니다.

GuiAnimatedImage

gif 처럼 애니메이션 되는 이미지를 나타내는 component 이고, 하나의 child component 를 가질 수 있습니다.