[안드로이드] 스크롤뷰 안에 맵 (googleMap in ScrollView) 예제, Custom FrameLayout

최근 이중 스크롤에 대하여 정리하였습니다.

그럼 ScrollView 안에 GoogleMap 을 사용했을때는 어떨까요?

이중 스크롤에 이어 ScrollView 안에 GoogleMap 에 대해 정리하려고 합니다.

1. ScrollView 안에 GoogleMap 문제

ScrollView 안에 GoogleMap 을 사용했을 때,

googleMap 을 터치하면 ScrollView 의 부모 터치 이벤트가 동작되어 googleMap 을 사용하는데 제한이 생깁니다.

2. 문제 해결 - (1)

문제 해결을 위해 아래와 같은 방향성으로 정리하면 좋을 것 같습니다.

첫번째. google Map 영역의 터치 이벤트 만들기

두번째. google Map 영역의 터치 이벤트일 때는 ScollView 터치 이벤트가 전달되지 않도록 제한

3. 문제 해결 - (2)

"google Map 영역의 터치 이벤트 만들기"

먼저 googleMap 을 올려놓는 Custom FrameLayout 을 만들어줍니다.

이 해당 영역에 Touch Event 와 Listener 를 준비하면 첫번째 목표는 완료겠네요.

class TouchFrameLayout(context: Context, attrs: AttributeSet?) : FrameLayout(context, attrs) {
    var listener: OnTouchListener? = null

    interface OnTouchListener {
        fun onTouch()
    }

    fun setTouchListener(listener: OnTouchListener) {
        this.listener = listener
    }

    override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
        when (event?.action) {
            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_UP -> listener?.onTouch()
        }
        return super.dispatchTouchEvent(event)
    }
}

google map 을 올려놓을 준비가 되었으니 xml에 아래와 같이 CustomLayout 배치할게요.

<com.example.inscrollviewexample.TouchFrameLayout
    android:id="@+id/container_map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

4. 문제 해결 - (3)

"google Map 영역의 터치 이벤트일 때는 ScollView 터치 이벤트가 전달되지 않도록 제한"

mapFragment 를 미리 준비해놓은 TouchFrameLayout 에 올려주고

TouchFrameLayout Touch Event Listener 를 정의해줄게요.

class MainActivity : AppCompatActivity() {

    private var mapFragment: MapFragment = MapFragment()

    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // TouchFrameLayout 에 mapFragment 올려놓기
           val fragmentTransaction = supportFragmentManager.beginTransaction()
    fragmentTransaction.add(R.id.container_map, mapFragment)
    fragmentTransaction.commit()
    mapFragment.mapAsync()

    // TouchFrameLayout 영역에 Touch Event Listener 정의
         val svParent = this.findViewById<NestedScrollView>(R.id.svParent)
    val containerMap = this.findViewById<TouchFrameLayout>(R.id.container_map)
    containerMap.setTouchListener(object : TouchFrameLayout.OnTouchListener {
            override fun onTouch() {
                // ScrollView Disallow Touch Event
                svParent.requestDisallowInterceptTouchEvent(true)
            }
        })
    }
}