돌아오신 것을 환영합니다
이번 영상의 목적은 여기 보이시는것을 만드는것입니다
이 구글 지도 컴포저블이 있습니다
그리고 여기 Set Location 이라는
버튼을 만들고 싶습니다
지금은 못하지만 지도내에서 위치를 선택하고
위치를 set(정하다) 할수 있으면 그게 전부입니다
LocationSelectionScreen 컴포저블 안 밑부분에 Column(컬럼)을
만듭니다 왜냐하면
구글지도 바로 밑에 버튼을 두고싶기 때문입니다
여기에 어떤 modifier(제어자)를 사용할 것이냐면
최대 크기 채우기를 하고싶습니다
그러니까 modifier=Modifier.
정확하게 써야합니다
Modifier.fillMaxSize
이렇게요
그리고 이 컬럼 안엔 제가 말했듯이 구글지도가 있어야 합니다
보시다싶이 이 컴포저블이 사용가능하다고 나옵니다
이 Google Map입니다 선택하고
좋아요
이제 몇가지 modifier들을 패스할 수 있습니다
두가지가 있습니다
그리고 Button이 있습니다
저의 버튼에 onClick 이벤트가 있으면 합니다
Button을 import 해야합니다
Composable Button을 사용합니다
컴포저블 버튼이 맞는지 확인하겠습니다
좋아요
그리고 이 버튼은 onClick 이벤트가 있을것인데 우선 지금은 아무것도 시키지 않겠습니다
그리고 이 버튼은 내용 혹은 텍스트가 있어야합니다
여기 text도 import 하겠습니다
Composable Text로 선택하시고 텍스트는 “위치 정하기”로 하겠습니다
그것이 버튼에 들어갈 말 입니다
이부분은 몇번 해보셨기 때문에 지루한 파트나 다름없습니다
이제 재밌는 부분은
그것은 이 GoogleMap 부분과
버튼을 눌렀을때 어떤일이 일어나는지 입니다
그리고 여기 GoogleMap에도 modifier을 추가합니다
Modifier. 그리고 여기 weight(가중치)라는 개념이 있습니다
Weight이 하는일은 해당 컬럼 내부에 다른 형제 요소에 비례하여
이 요소의 크기를 설정하는것 입니다
쉽게 말해서 이것에게 가중치가 많아서
아주 중요하고 화면에 많은 비중을
차지할것이라 말해주는것입니다
그것이 weight이 하는 일입니다
이것을 1f 로 설정하고
그리고 패딩을 16dp로 설정합니다
DP도 import 해줍니다
좋아요
이것이 우리의 modifier입니다
그리고 여기에 cameraPositionState도
설정할것이고 이것은 앞서 설정해놓은 CameraPositionState를 가져옵니다
구글맵은 이 CameraPosition 세그먼트가 있습니다
여기 제가 import를 제대로 해왔는지 확인하겠습니다
제가 GoogleMap을 잘못 import 해왔습니다
여기 커서를 올리면
Import 선택
저는 composable 버전을 사용하고 싶습니다
Composable Google map을 선택하고 또 제가 표시하고 싶은게 있는데
보시면 이제 오류가 사라졌습니다
그러니까 지금 GoogleMap이 있고
제가 사용하고자 하는 Google Map은 Composable이고
거기에는 modifier와 cameraPositionState가 있습니다
이것들이 제가 오버라이드 하는 것들입니다
다시 말해서 이 cameraPositionState를 저의 cameraPositionState로 설정해서
우리가 있는 곳 즉 사용자의 위치의
position을 차지하는것 입니다
여기 또 추가할 수 있는게 있는데 그것은 onMapClick입니다
여기 onMapClick도 있고 onMapLongClick 이벤트도 있습니다
다양하게 선택 가능합니다
예를들어 지도에서 클릭을 오래 하면 다른 일을 할수 있는것 입니다
우선 지도를 클릭하게 되면 뭔가 하라고 하는것 입니다
저의 경우 userLocation을 그 value로 설정하겠습니다
다시 말하자면 userLocation은 이 remeber 변수 즉 mutableStateOf LatLng이고
무언가를 클릭하면 그것이 새로운 위치가 될 것이라는 뜻입니다
그러니까 실제 GPS 위치가 아닌 사용자가 클릭한 위치가 됩니다
ㅤ
그게 새로운 사용자위치가 되는데 쇼핑아이템 위치 같은것으로 불러도 됩니다
하지만 저는 사용자 위치로 그냥 두겠습니다
이제 지도를 클릭하면 여기 보이다싶이 LatLng 클래스가
표시됩니다
그리고 우리의 userLocation의 타입도 LatLng입니다
그것이 바로 mutableStateOf이고
위도와 경도 객체입니다
그리고 여기 LatLng이 있기때문에
특점 지점에서 지도를 클랙하여 얻은 LatLng값으로
사용자위치의 값을 설정하라고 할 수있습니다
이 GoogleMap안에 들어갈 수 있는것이 또 있습니다
팝업창으로 표시될 이 GoogleMap 컴포저블 안에 Marker(마커)를 설정할 수 있습니다
ㅤ
마커는 구글지도에서 보이는 작은 점 입니다
예를들어 사용자가 클릭한 위치이죠
보여드리겠습니다
좋아요
이 빨갛고 조그만 마커를 말합니다
이게 제가 원하는 작은 점 입니다
Marker을 설정해보겠습니다
이 Marker에는 State가 있는데 우선 Marker을 먼저 import 하겠습니다
또 Composable 버전을 사용합니다
State는 MakerState에 userLocation.value가 있는 position 입니다
그러니까 이 Marker state은 위치를 알고싶은 것 입니다
위치를 위도와 경도로 알고싶은 것 입니다
좋아요
이게 재밌는것입니다
그 외엔 아무것도 신경쓰지 않습니다
너무 심플해서
대단할 지경입니다
이건 그냥
위도랑 경도 뭐야?
거기다가 마커 둘게 라고 하는것입니다
이제는 버튼을 클릭 했을때
밑에 있는 이 ‘위치 정하기’ 버튼을 눌렀을때 저의 새로운 위치는 제가 지도에서
클릭한 곳이여야 합니다
다시 말하면 userLocation이 되어야 합니다 그러니 여기에 var을 쓰는데
Button 바깥으로 여기 윗쪽에 씁니다 var newLocation의 타입은 locationData로 하고
버튼을 클릭했을때 새로운 위치를 LocationData로 설정하는데
그것을 userLocation.value.latitude 그리고
userLocation.value.longitude에서 가져옵니다
좋아요
여기있는 locationData는 위도와 경도만 필요합니다
그죠
그것을 패스하고
그것을 어디서 가지고 오냐면
우리의 remeber 변수인 userLocation에서 가져오고 이것은 지도를 클릭할때마다
덮어쓰기 되는것입니다
왜냐하면 그 시점에는 userLocation의
값이 바뀌었기 때문입니다
이 value와
Latitude와 longitude를 가지고
LocationData 데이터클래스에 패스 시켜서 객체를 만들고 이 newLocation 안에
저장하는것 입니다
이제 newLocation을
onLocationSelected(newLocation)으로 설정하고 싶습니다
이 onLocationSelected이 뭐냐면
이것은 우리의 LocationSelectionScreen 이벤트입니다
그러니까 이 onLocationSelectedScreen 안에 이 onLocationSelected라는 이벤트가 있고
ㅤ
여기에 locationData를 패스하여
실행하고자 하는것을 쓸수있습니다
이제는 newLocation을 지정된 위치 데이터로 패스하는 것 입니다
이제 이 컴포저블을 사용할때마다 우리가 얻는 locationData에 대해서 어떤것을 할지
정할 수 있습니다
예를들어 저장을 할수도 있고
다른 형식으로 변환할수도 있습니다 말하자면 위도와 경도가 아닌
실제로 읽기가 가능한 주소지같은 형식으로
따라서 우리가 쇼핑리스트에 아이템을 추가할때 그 아이템을 어디서 구매할지 위치를 선택할 수 있습니다
위치를 클릭하면 위도와 경도 좌표를 보여주지만
우리가 원하는것은 좌표가 아닌 실제 주소지입니다
그래서 이 정보를 메인 액티비티 혹은 메인 화면에 패스를 해야 하면
그 정보를 조금 더 실행가능한 것으로 변환하게 될 것 입니다
좋아요
이번 영상은 이게 다 입니다
다음 영상에선 여기에서 추가적인 설정을 할 것 입니다
왜냐면 실제 사용할수 있기 전에 뷰 모델을 설정해야 하기 때문입니다
좋아요
거기서 뵙겠습니다