2. 화면 구성하기
검색할 주소입력 영역과 결과를 보여줄 화면을 구성해 주도록 하겠습니다.
Last updated
검색할 주소입력 영역과 결과를 보여줄 화면을 구성해 주도록 하겠습니다.
Last updated
경로 거리 및 시간 검색을 하기 위해서는 시작주소와 도착주소를 입력할 수 있는 placeInput 영역과 결과를 보여줄 searchResult 영역을 구성해 주어야 합니다.
검색할 두 주소를 입력하는 영역으로 "inputPlace" 카테고리로 관리하도록 하겠습니다.
레이아웃을 추가하여 레이아웃 명을 placeInput 로 변경하고 데이터 연결을 통해 "inputPlace" 카테고리를 "신규입력" 용도로 연결합니다.
주소 입력을 위한 inputText 2개를 추가해주고 각각 캡션에는 시작지점, 도착지점을 입력합니다. 컬렉션키에는 시작지점은 origins, 도착지점은 destinations를 입력해 줍니다.
결과를 보여줄 영역으로 "searchResult" 카테고리로 관리하도록 하겠습니다.
그룹을 추가하고 그룹 아래에 레이아웃을 추가한 뒤 레이아웃 명을 searchResult 로 변경하고 데이터 연결을 통해 "searchResult" 카테고리를 "조회" 용도로 연결합니다.
결과 시간을 보여줄 Text 컨트롤 2개를 추가해주고 텍스트에 대체텍스트를 활용하여 다음과 같이 입력해줍니다.
거리 : {=distance}m 시간 : {=duration}min
inputPlace 영역에 버튼을 추가하고 버튼명을 "검색" 으로 변경하고 사용하지 않는 스텝버튼은 삭제하도록 합니다.
검색을 위한 약식 화면구성을 해보았습니다.
API연동에서 추가한 모듈을 활용하여 경로검색을 위한 서비스 구성 방법에 대해 알아보겠습니다.
