2. 화면 구성하기

검색할 주소입력 영역과 결과를 보여줄 화면을 구성해 주도록 하겠습니다.

개발하기

경로 거리 및 시간 검색을 하기 위해서는 시작주소와 도착주소를 입력할 수 있는 placeInput 영역과 결과를 보여줄 searchResult 영역을 구성해 주어야 합니다.

주소 입력 영역

검색할 두 주소를 입력하는 영역으로 "inputPlace" 카테고리로 관리하도록 하겠습니다.

• 레이아웃을 추가하여 레이아웃 명을 placeInput 로 변경하고 데이터 연결을 통해 "inputPlace" 카테고리를 "신규입력" 용도로 연결합니다.

• 주소 입력을 위한 inputText 2개를 추가해주고 각각 캡션에는 시작지점, 도착지점을 입력합니다. 컬렉션키에는 시작지점은 origins, 도착지점은 destinations를 입력해 줍니다.

결과영역

결과를 보여줄 영역으로 "searchResult" 카테고리로 관리하도록 하겠습니다.

• 그룹을 추가하고 그룹 아래에 레이아웃을 추가한 뒤 레이아웃 명을 searchResult 로 변경하고 데이터 연결을 통해 "searchResult" 카테고리를 "조회" 용도로 연결합니다.

• 결과 시간을 보여줄 Text 컨트롤 2개를 추가해주고 텍스트에 대체텍스트를 활용하여 다음과 같이 입력해줍니다. 거리 : {=distance}m 시간 : {=duration}min

검색버튼

• inputPlace 영역에 버튼을 추가하고 버튼명을 "검색" 으로 변경하고 사용하지 않는 스텝버튼은 삭제하도록 합니다.

챕터 마무리

배운 내용

• 검색을 위한 약식 화면구성을 해보았습니다.

다음 챕터에서는?

• API연동에서 추가한 모듈을 활용하여 경로검색을 위한 서비스 구성 방법에 대해 알아보겠습니다.