[Android/study] 네이버 지도③-2 마커 클릭 이벤트, 레이아웃 visibility 속성

이전 포스팅에서 시도한 방식에서 문제가 발생해 다른 방법으로 시도해보았다. 바로 지도 위에 레이아웃을 추가하고 visibility 속성을 이용하여 마커를 눌렀을때 해당 레이아웃이 나타나도록 하는 것이다. 과정은 이전 포스팅과 매우 비슷하지만, 새로운 액티비티를 만들지 않고 기존의 MapActivity에서 진행하면 된다.

[Android/study] 네이버 지도③-1 마커 클릭 이벤트, 인텐트로 데이터 전달

📌 activity_map.xml

먼저 FrameLayout 위에 fragment와 LinearLayout을 올렸다. 여기서 fragment는 네이버 지도를 보여주고, LinearLayout은 정보창을 보여주는 것이다. 가장 겉에 있는 LinearLayout의 visibility 속성을 우선 gone으로 두고, MapActivity.java에서 마커가 클릭되면 visible로 바뀌도록 설정하였다.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapActivity">

    <fragment
        android:id="@+id/map_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="com.naver.maps.map.MapFragment" />
    <LinearLayout
        android:id="@+id/map_info_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:background="@color/white"
        android:layout_gravity="bottom">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_margin="10dp">
            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@drawable/camera"
                android:layout_gravity="center"/>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/map_info_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="식당명"
                    android:textSize="16dp" />

                <TextView
                    android:id="@+id/map_info_addr"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="주소"
                    android:textSize="12dp" />

                <TextView
                    android:id="@+id/map_info_time"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="영업시간"
                    android:textSize="12dp" />

                <TextView
                    android:id="@+id/map_info_day_off"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="휴무일"
                    android:textSize="12dp" />
            </LinearLayout>
            <ImageButton
                android:id="@+id/map_info_button"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@android:drawable/ic_media_play"
                android:layout_gravity="center"/>
        </LinearLayout>
    </LinearLayout>

</FrameLayout>

📌 MapActivity.java

MapActivity.java의 일부분이다. 여기에는 없지만 겉에서 for문을 돌리며 DB에 있는 데이터를 차례대로 받아오는 작업을 하고 있다. 아래 코드는 마커가 눌렸을때 그에 해당하는 식당의 정보를 가져오는 코드이다. String 변수 mapInfoName, mapInfoAddr에 DB에 저장해놓은 식당명과 주소 텍스트를 할당한다. 그 다음 반복문을 돌면서 activity_map.xml에서 작성한 TextView의 내용을 변경한다. 이때 여기서 끝내면 안되고, 꼭 xml 파일 안의 LinearLayout에 id를 부여하고, visibility 속성이 gone으로 되어있던 해당 레이아웃을 visible로 바꾸어야 화면에 보인다.

markers[i].setOnClickListener(new Overlay.OnClickListener() {
    @Override
    public boolean onClick(@NonNull Overlay overlay)
    {
        // DB에서 차례대로 정보 받아오기
        mapInfoName = naverMapInfo.get(finalI).getStoreName();
        mapInfoAddr = naverMapInfo.get(finalI).getStoreAddr();

        // 받아온 데이터로 TextView 내용 변경
        getMapInfoName.setText(mapInfoName);
       getMapInfoAddr.setText(mapInfoAddr);

       // visibility가 gone으로 되어있던 정보창 레이아웃을 visible로 변경
        mapInfoLayout.setVisibility(View.VISIBLE);
        return false;

    }
});

📌 결과

드디어 마커클릭 - 뒤로가기 - 마커클릭 순이 아닌, 마커클릭 - 마커클릭 - 마커클릭...순으로 부드럽게 정보창을 볼 수 있게 되었다. 이전 포스팅에서 액티비티로 정보창을 만들었던 것과 비교하면 큰 발전이다. 이제 다음에는 영업시간과 휴무일을 DB에 추가해 똑같이 출력해보고, 해당 정보창 오른쪽 화살표 모양의 ImageButton을 클릭하면 식당 상세 페이지가 나오도록 만들어볼 예정이다.

---

🚩 추가

좀 오래되었지만 기록하기위해 작성해놓으려 한다. ImageButton 클릭 시 상세 페이지로 넘어가고, 상세 페이지 내에서 리뷰까지 작성할 수 있도록 해놓은 상태다. 리뷰 탭에서 별점을 통합해서 보여주는 기능, 사진 탭에서 사진을 클릭하면 더 크게 보여주는 기능 등을 추가해볼 예정이다. 그리고 데이터베이스를 phpMyAdmin에서 Firestore로 변경하려고 한다..다시 힘내서 도전!