[안드로이드 스튜디오] 네이버 지도 #6 - 커스텀 정보창(InfoWindow) 표시하기

 

이번 포스트에서는 네이버 지도에 정보창(InfoWindow)을 커스텀으로 표시하는 방법에 대해 설명하도록 하겠습니다.

 

이번에도 역시 지난번 포스팅에 이어서 계속 진행할 예정인 이전 포스팅을 못보신 분들은 아래 글을 참조하시기 바랍니다.

 

2020/06/15 - [안드로이드스튜디오 개발] - [안드로이드 스튜디오] 네이버 지도 #5 - 정보창(InfoWindow) 표시하기

[안드로이드 스튜디오] 네이버 지도 #5 - 정보창(InfoWindow) 표시하기

지난번 포스팅에서는 텍스트만 출력하는 예제를 다루었는데 실제로 보면 너무 밋밋하죠? 그래서 내 맘대로 layout을 만들어서 표시하는 방법을 설명하고자 합니다.

 

먼저 지난번 프로젝트에서 아래 내용을 추가할 겁니다.

1) 아이콘 몇개를 추가합니다.

2) 정보창에 새로 표출할 layout을 추가합니다.

3) 새로만든 layout을 표출하기위해서 Adapter을 추가합니다.

4) 마커 클릭 시 정보창에 새로만든 layout이 표시되도록 합니다.

 

먼저 아이콘 몇개를 추가합니다.

아이콘 추가하는 상세한 방법은 아래 글을 참조하세요

2020/06/15 - [안드로이드스튜디오 개발] - [안드로이드 스튜디오] 네이버지도 #4 - 마커 표시 및 이벤트처리

 

첫번째 아이콘은 ic_account_balance_black_24dp 입니다.

두번째 아이콘은 ic_pin_drop_black_24dp 입니다.

세번째 아이콘은 ic_phone_black_24dp 입니다.

 

일단 이 정도로만 하고 흰색바탕에 잘보이도록 아이콘의 색상을 오렌지색 (#ff8800 또는 @android:color/holo_orange_dark)으로 바꿔줄겁니다.

 

아이콘색상은 drawable에서 아이콘을 더블클릭하시고 첫줄의 android:tint="#FF8800" 이 부분을 바꿔주시면 됩니다.

새로 추가한 아이콘도 모두 바꿔줘야겠죠

 

그럼 이제 좌측메뉴 중에서 layout에서 우클릭 => New => Layout Resource File을 선택합니다.

file name을 item_point로 입력하고 OK버튼 !!!

이제 새로운 layout을 만들었으니 item_point.xml에 아래와 같이 코딩합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="224dp"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:background="@drawable/ic_account_balance_black_24dp"
            android:layout_gravity="center"
            android:layout_margin="2dp" />
        <TextView
            android:id="@+id/txttitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_marginBottom="4dp"
            android:layout_marginEnd="4dp"
            android:layout_gravity="center"
            android:text="포인트 지점명"
            android:textSize="14dp"
            android:textStyle="bold" />
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:background="@android:color/holo_orange_dark" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="4dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imagepoint"
            android:layout_width="96dp"
            android:layout_height="64dp"
            android:layout_gravity="center"
            android:layout_margin="0dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="14dp"
                    android:layout_height="14dp"
                    android:background="@drawable/ic_pin_drop_black_24dp"
                    android:layout_margin="2dp" />
                <TextView
                    android:id="@+id/txtaddr"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textSize="12dp"
                    android:text="포인트 지점 주소" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="14dp"
                    android:layout_height="14dp"
                    android:background="@drawable/ic_phone_black_24dp"
                    android:layout_margin="2dp" />
                <TextView
                    android:id="@+id/txttel"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textSize="12dp"
                    android:text="064-0000-0000" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

 

이 레이아웃은 상단에 포인트지점명과 좌측에 포인트지점의 이미지, 우측에 주소와 전화번호가 표시될 예정입니다.

 

이제 정보창과 레이아웃을 연결한 Adapter를 만듭니다.

Adapter는 기존 Activity와 구분하기 위하여 새로운 패키지를 만들어 저장합니다.

 

새로운 패키지는 좌측메뉴의 java 우클릭 => New => package 선택

이름은 Adapter로 합니다.

 

그럼 이제 새로운 Adapter을 추가하기 위하여 이번에도 Adapter 우클릭 => New => Java Class를 선택하고 이름은 pointAdapter로 합니다.

 

이제 pointAdapter.java 파일에 아래와 같이 코딩합니다.

package com.test.navermap.Adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;

import com.naver.maps.map.overlay.InfoWindow;
import com.test.navermap.R;

public class pointAdapter extends InfoWindow.DefaultViewAdapter
{
    private final Context mContext;
    private final ViewGroup mParent;

    public pointAdapter(@NonNull Context context, ViewGroup parent)
    {
        super(context);
        mContext = context;
        mParent = parent;
    }

    @NonNull
    @Override
    protected View getContentView(@NonNull InfoWindow infoWindow)
    {

        View view = (View) LayoutInflater.from(mContext).inflate(R.layout.item_point, mParent, false);

        TextView txtTitle = (TextView) view.findViewById(R.id.txttitle);
        ImageView imagePoint = (ImageView) view.findViewById(R.id.imagepoint);
        TextView txtAddr = (TextView) view.findViewById(R.id.txtaddr);
        TextView txtTel = (TextView) view.findViewById(R.id.txttel);

        txtTitle.setText("제주특별자치도청");
        imagePoint.setImageResource(R.drawable.image_point);
        txtAddr.setText("제주 제주시 문연로 6\n(지번) 연동 312-1");
        txtTel.setText("064-710-2114");

        return view;
    }
}

내용은 Adapter가 생성될때 textview나 imageview에 값을 넣어주는 부분밖에 없어서 크게 어려운 부분은 없으나 Adapter 클래스를 선언할때 InfoWindow.DefaultViewAdapter로 부터 상속을 받는 다는 것만 주의하시면 될듯합니다.

 

그럼 이제 MainActivity에서 마커2를 클릭했을때 새로만든 정보창을 띄워주기 위하여 아래와 같이 코딩합니다.

btnMark2.setOnClickListener(new Button.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        setMarker(marker2, 33.49957, 126.531076, R.drawable.ic_album_black_24dp, 10);

        marker2.setOnClickListener(new Overlay.OnClickListener()
        {
            @Override
            public boolean onClick(@NonNull Overlay overlay)
            {
                ViewGroup rootView = (ViewGroup)findViewById(R.id.fragment_container);
                pointAdapter adapter = new pointAdapter(MainActivity.this, rootView);

                infoWindow3.setAdapter(adapter);

                //인포창의 우선순위
                infoWindow3.setZIndex(10);
                //투명도 조정
                infoWindow3.setAlpha(0.9f);
                //인포창 표시
                infoWindow3.open(marker2);
                return false;
            }
        });
    }
});

새로 만든 Adapter를 선언하고 그 변수를 정보창의 setAdapter에 넣어주면 나머지는 모두 동일합니다.

 

이제 실행해보면 

마커2 버튼을 클릭해서 마커를 생성하고 마커를 클릭하면 새로 만든 레이아웃의 정보창이 뜨는 걸 볼 수 있습니다.

 

다음 포스팅에서는 카메라 무빙에 대하여 포스팅하도록 하겠습니다.

 

 

 

ps. 혹시 레이아웃의 배경색이 검은색으로 나오시면

res => values => styles.xml 파일에 아래 내용을 추가하시고

    <style name="AppTheme.NoActionBar" >
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:statusBarColor">@android:color/background_dark</item>
    </style>

 

 

manifests => AndroidManifest.xml 내용중에 테마를 아래와 같이 변경하시면 됩니다.

android:theme="@style/AppTheme.NoActionBar" 

 

 

PS. 매번 프로젝트만 진행하다가 개인적으로 앱을 하나 출시했습니다.

비록 허접한 앱이기는 하지만 이걸 토대로 몇몇가지 팁에 대해 포스팅을 작성하려고 하오니 아래 포스팅 글 한번 읽어봐 주시면 감사하겠습니다. ^^

andro-jinu.tistory.com/entry/todaysaying1

[안드로이드 스튜디오] 앱 출시 소식 - 오늘의 명언(명언, 고사성어, 속담)