InfoWindow

InfoWindow에 대한 설명.

InfoWindow는 KakaoMapsSDK에서 제공하는 GUI중 한 종류로, GuiImage타입인 body와 tail을 default로 가지고 있으며, 지도 위 특정 좌표에 표시됩니다.

InfoWindow

InfoWindow Properties

InfoWindow는 두가지 분류의 property로 구성됩니다. InfoWindow 자체의 property와 InfoWindow를 구성하는 component의 property로 구성됩니다.

InfoWindow에 대한 property는 아래와 같습니다. 아래 속성중 get only property를 제외하고는 공통적으로 InfoWindow를 지도에 추가한 이후에 해당 속성값을 업데이트하면 별도의 updateGui()호출 없이도 자동으로 업데이트 됩니다.

Property	Description
name	InfoWindow 고유 ID
isShow	InfoWindow가 현재 뷰에 표시되는지 여부
zOrder	InfoWindow의 렌더링 우선순위. InfoWindow 타입끼리만 유효합니다. 값을 설정하면 별도의 updateGui() 호출 없이도 업데이트됩니다.
position	InfoWindow가 표시 될 위치. 값을 설정하면 별도의 updateGui()없이도 업데이트되어 InfoWindow의 위치가 변경됩니다.

아래 예제는 GuiEventDelegate를 이용하여 생성된 InfoWindow가 클릭되었을 때 InfoWindow의 position을 변경하는 예제입니다.

	// 컴포넌트를 구성하여 InfoWindow를 생성한다.
    func createInfoWindow() {
        let view = mapController?.getView("mapview") as! KakaoMap
        let infoWindow = InfoWindow("infoWindow");

        // bodyImage
        let bodyImage = GuiImage("bgImage")
        bodyImage.image = UIImage(named: "white_black_round10.png")
        bodyImage.imageStretch = GuiEdgeInsets(top: 9, left: 9, bottom: 9, right: 9)

        // tailImage
        let tailImage = GuiImage("tailImage")
        tailImage.image = UIImage(named: "white_black.png")
        
        //bodyImage의 child로 들어갈 layout.
        let layout: GuiLayout = GuiLayout("layout")
        layout.arrangement = .horizontal    //가로배치
        let button1: GuiButton = GuiButton("button1")
        button1.image = UIImage(named: "noti.png")!

        let text = GuiText("text")
        let style = TextStyle()
        style.fontSize = 20
        text.addText(text: "안녕하세요~", style: style)
        //Text의 정렬. Layout의 크기는 child component들의 크기를 모두 합친 크기가 되는데, Layout상의 배치에 따라 공간의 여분이 있는 component는 align을 지정할 수 있다.
        text.align = GuiAlignment(vAlign: .middle, hAlign: .left)   // 좌중단 정렬.
        
        bodyImage.child = layout
        infoWindow.body = bodyImage
        infoWindow.tail = tailImage
        infoWindow.bodyOffset.y = -10

        layout.addChild(button1)
        layout.addChild(text)
        
        infoWindow.position = MapPoint(longitude: 126.978365, latitude: 37.566691)
        infoWindow.delegate = self

        let guiManager = view.getGuiManager()
        let _ = guiManager.addGui(infoWindow)
        infoWindow.show()
    }
    
    // 버튼이 클릭될 때 발생
    func guiDidTapped(_ gui: KakaoMapsSDK.GuiBase, componentName: String) {
        print("Gui: \(gui.name), Component: \(componentName) tapped")
        
        // InfoWindow의 position을 업데이트한다.
        (gui as? InfoWindow)?.position = MapPoint(longitude: 126.996, latitude: 37.533)
    }

Components properties

InfoWindow는 기본 구성이 body와 tail, 두 가지 GuiImage를 제공하므로 body에 child component를 직접 구성할 수 있습니다. GuiLayout등을 넣어서 InfoWindow의 body부분에 Component를 원하는대로 구성할 수 있습니다.

InfoWindow

아래 예제는 위의 스크린샷과 같은 InfoWindow를 표시하는 예제입니다.

    func createInfoWindow() {
        let view = mapController?.getView("mapview") as! KakaoMap
        
         // InfoWindow객체 생성
        let infoWindow = InfoWindow("infoWindow");

        // bodyImage
        let bodyImage = GuiImage("bgImage")
        bodyImage.image = UIImage(named: "white_black_round10.png")
        bodyImage.imageStretch = GuiEdgeInsets(top: 9, left: 9, bottom: 9, right: 9)

        // tailImage
        let tailImage = GuiImage("tailImage")
        tailImage.image = UIImage(named: "white_black.png")
        
        //bodyImage의 child로 들어갈 layout.
        let layout: GuiLayout = GuiLayout("layout")
        layout.arrangement = .horizontal    //가로배치
        let button1: GuiButton = GuiButton("button1")
        button1.image = UIImage(named: "noti.png")!

        let text = GuiText("text")
        let style = TextStyle()
        style.fontSize = 20
        text.addText(text: "안녕하세요~", style: style)
        //Text의 정렬. Layout의 크기는 child component들의 크기를 모두 합친 크기가 되는데, Layout상의 배치에 따라 공간의 여분이 있는 component는 align을 지정할 수 있다.
        text.align = GuiAlignment(vAlign: .middle, hAlign: .left)   // 좌중단 정렬.
        
        //body image의 child component로 레이아웃을 넣는다.
        bodyImage.child = layout
        infoWindow.body = bodyImage
        infoWindow.tail = tailImage
        infoWindow.bodyOffset.y = -10

       // layout구성요소
        layout.addChild(button1)
        layout.addChild(text)
        
        // InfoWindow가 표시될 위치
        infoWindow.position = MapPoint(longitude: 126.978365, latitude: 37.566691)
        infoWindow.delegate = self

         // guiManager를 통해 InfoWindow를 뷰에 추가한다. 뷰에 추가하기 전까지는 뷰 위에 표시되지 않는다.
        let guiManager = view.getGuiManager()
        let _ = guiManager.addGui(infoWindow)
        infoWindow.show()
    }

InfoWindow Animation

InfoWindow는 두 가지 형태의 애니메이션 효과를 줄 수 있습니다.

moveAt : 특정 위치로 정해진 시간만큼 이동하는 과정을 보여주는 애니메이션입니다.
Animator : 특정 애니메이션 effect를 갖는 Animator에 InfoWindow를 추가해서 Animator를 동작시킬 수 있습니다.

InfoWindow Controls

InfoWindow는 View 객체에 있는 GuiManager를 통해서 추가가 가능합니다. InfoWindow 객체를 생성하고 GuiManager의 addGui를 호출해야 지도 위에 InfoWindow가 추가되고, 표시할 수 있습니다. addGui를 호출하지 않고 InfoWindow의 show를 호출하면 InfoWindow가 표시되지 않습니다. 즉, InfoWindow를 뷰에 추가해야 InfoWindow를 조작하는 function을 사용할 수 있습니다.