✨ 네이버맵 locationButton 커스텀 구현

Co-authored-by: yonghanJu <[email protected]>

Author: bngsh

presentation/src/main/java/com/whyranoid/presentation/running/Event.kt

@@ -0,0 +1,5 @@
+package com.whyranoid.presentation.running
+
+sealed interface Event {
+    data class TrackingButtonClick(val mode: TrackingMode) : Event
+}

presentation/src/main/java/com/whyranoid/presentation/running/RunningActivity.kt

@@ -2,6 +2,10 @@ package com.whyranoid.presentation.running
 
 import android.os.Bundle
 import androidx.activity.viewModels
+import com.naver.maps.geometry.LatLng
+import com.naver.maps.map.CameraUpdate
+import com.naver.maps.map.LocationSource
+import com.naver.maps.map.LocationTrackingMode
 import com.naver.maps.map.MapView
 import com.naver.maps.map.NaverMap
 import com.naver.maps.map.OnMapReadyCallback
@@ -52,6 +56,13 @@ internal class RunningActivity :
             locationOverlay.iconHeight = MAP_ICON_SIZE
         }
 
+        observeStateOnMapReady()
+        naverMap.addOnCameraChangeListener { reason, animated ->
+            if (reason == CameraUpdate.REASON_GESTURE) {
+                viewModel.onTrackingCanceledByGesture()
+            }
+        }
+
         paths = mutableListOf()
 
         repeatWhenUiStarted {
@@ -129,6 +140,26 @@ internal class RunningActivity :
         }
     }
 
+    private fun observeStateOnMapReady() {
+        repeatWhenUiStarted {
+            viewModel.trackingModeState.collect { trackingMode ->
+                when (trackingMode) {
+                    TrackingMode.NONE -> {
+                        naverMap.locationTrackingMode = LocationTrackingMode.NoFollow
+                    }
+                    TrackingMode.NO_FOLLOW -> {
+                        viewModel.runningState.value.runningData.lastLocation?.let { location ->
+                            naverMap.moveCamera(CameraUpdate.scrollTo(LatLng(location)))
+                        }
+                    }
+                    TrackingMode.FOLLOW -> {
+                        naverMap.locationTrackingMode = LocationTrackingMode.Follow
+                    }
+                }
+            }
+        }
+    }
+
     private fun provideMogakrunPath(): PathOverlay {
         return PathOverlay().apply {
             color = getColor(R.color.mogakrun_secondary_light)
@@ -171,6 +202,6 @@ internal class RunningActivity :
     companion object {
         const val MAP_MAX_ZOOM = 18.0
         const val MAP_MIN_ZOOM = 10.0
-        const val MAP_ICON_SIZE = 80
+        const val MAP_ICON_SIZE = 50
     }
 }

presentation/src/main/java/com/whyranoid/presentation/running/RunningViewModel.kt

@@ -13,6 +13,10 @@ import androidx.work.WorkManager
 import com.whyranoid.domain.usecase.StartRunningUseCase
 import dagger.hilt.android.lifecycle.HiltViewModel
 import dagger.hilt.android.qualifiers.ApplicationContext
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
@@ -25,6 +29,12 @@ class RunningViewModel @Inject constructor(
 
     val runningState = runningRepository.runningState
 
+    private val _trackingModeState = MutableStateFlow(TrackingMode.FOLLOW)
+    val trackingModeState get() = _trackingModeState.asStateFlow()
+
+    private val _eventFlow = MutableSharedFlow<Event>()
+    val eventFlow get() = _eventFlow.asSharedFlow()
+
     init {
         if (runningRepository.runningState.value is RunningState.NotRunning) {
             viewModelScope.launch {
@@ -64,6 +74,24 @@ class RunningViewModel @Inject constructor(
         }
     }
 
+    fun onTrackingButtonClicked() {
+        when (trackingModeState.value) {
+            TrackingMode.NONE -> {
+                _trackingModeState.value = TrackingMode.NO_FOLLOW
+            }
+            TrackingMode.NO_FOLLOW -> {
+                _trackingModeState.value = TrackingMode.FOLLOW
+            }
+            TrackingMode.FOLLOW -> {
+                _trackingModeState.value = TrackingMode.NONE
+            }
+        }
+    }
+
+    fun onTrackingCanceledByGesture() {
+        _trackingModeState.value = TrackingMode.NONE
+    }
+
     private fun onPauseButtonClicked() {
         runningRepository.pauseRunning()
     }
@@ -72,6 +100,12 @@ class RunningViewModel @Inject constructor(
         runningRepository.resumeRunning()
     }
 
+    private fun emitEvent(event: Event) {
+        viewModelScope.launch {
+            _eventFlow.emit(event)
+        }
+    }
+
     fun onFinishButtonClicked() {
         // TODO: 액티비티에 이벤트 알려주기
         runningRepository.finishRunning()

presentation/src/main/java/com/whyranoid/presentation/running/TrackingMode.kt

@@ -0,0 +1,5 @@
+package com.whyranoid.presentation.running
+
+enum class TrackingMode {
+    NONE, NO_FOLLOW, FOLLOW
+}

presentation/src/main/res/layout/activity_running.xml

@@ -17,16 +17,29 @@
         <com.naver.maps.map.MapView
             android:id="@+id/map_view"
             android:layout_width="match_parent"
-            android:layout_height="match_parent" />
+            android:layout_height="match_parent"
+            app:navermap_tiltGesturesEnabled="false" />
+
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/btn_map_location"
+            android:layout_width="50dp"
+            android:layout_height="50dp"
+            android:text="@string/running_map_location_button"
+            android:onClick="@{() -> vm.onTrackingButtonClicked()}"
+            app:layout_constraintBottom_toTopOf="@id/panel_running_data"
+            app:layout_constraintRight_toRightOf="@id/panel_running_data" />
+
 
         <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/panel_running_data"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_margin="12dp"
             android:background="@color/white"
             android:clickable="false"
             android:paddingHorizontal="12dp"
             android:paddingVertical="8dp"
+            android:elevation="@dimen/cardview_default_elevation"
             app:layout_constraintBottom_toTopOf="@+id/btn_pause_or_resume"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent">

presentation/src/main/res/values/strings.xml

@@ -92,6 +92,7 @@
     <string name="running_notification_title">달려~ 달려~</string>
     <string name="running_channel_name">활동 추적</string>
     <string name="running_channel_description">달리기 활동을 추적하는 알림 채널입니다.</string>
+    <string name="running_map_location_button">🎯</string>
     <string name="text_join_group">그룹 가입하기</string>
     <string name="text_duplicated_group_name">중복된 그룹 이름입니다. 변경해주세요!</string>
     <string name="text_un_duplicated_group_name">사용 가능한 그룹 이름입니다!</string>