[앱 인벤터2] 기본기능 익히기 8-(목록 뷰) 검색 기능 추가

[앱 인벤터2] 기본기능 익히기 8-(목록 뷰) 검색 기능 추가

 

앞에서 저희는 목록뷰(ListView)에 대해서 몇가지를 학습해 보았습니다.

 

[앱 인벤터2] 기본 기능 익히기 1 (목록뷰)

- 목록 뷰에 목록을 보이게 하기

 

[앱 인벤터2] 기본 기능 익히기 1 (목록뷰) -목록 삭제

- 목록 뷰에 선택된 항목을 삭제하기

 

자 이번 시간에는 목록 뷰에 있는 항목에 대해 검색하는 기능에 대해 알아보도록 하겠습니다.

 

간단하게 예제 화면을 보면 아래와 같이 검색이 가능합니다.

 

 

자 이제부터 함께 배워보도록 하겠습니다.

 

[학습내용]

(1) 목록뷰(ListView) 검색 기능 알아보기

 

[기본 개념 이해하기]

(가) 목록 뷰의 항목 표시

목록 뷰에 항목을 표시하기 위해 목록 뷰의 '목록 문자열' 속성을 이용합니다.

 

아래와 같은 형태로 데이터가 ','를 구분된 문자열을 목록 뷰의 목록 문자열 속성 값으로 넣으면 됩니다.

================================

데이터1, 데이터2, 데이터3, ....

================================

 

(나) 목록 뷰 항목 검색기능

그리고 우리는 목록 뷰의 검색 기능을 넣으려면,

'목록 뷰 - 필터 사용' 항목을 이용합니다.

 

'필터 사용' 항목을 체크하면 목록 뷰 위쪽에 검색 창이 뜨게 됩니다.

 

[따라해 보기]

 

[준비작업]

가. http://ai2.appinventor.mit.edu/ 접속하기

나. 언어를 한국어로 설정한다.

다. '새 프로젝트 시작' 선택 후, 프로젝트 이름 원하는 이름으로 작성하기. 영어로 작성해야 합니다.

 

[디자이너편집 화면작업]

가. 추가할 요소

번호	구성요소	위치	사용용도 및 속성값
①	목록 뷰	화면 왼쪽 영역 사용자 인터페이스	목록을 표시하는 구성요소.

 

 

[블록편집 화면작업]

화면이 시작될 때, 목록뷰의 목록문자열에 데이터를 넣기

 

자 앞에서 배운 것을 기억해서 화면이 시작될 때,

이 이벤트는 무엇을 쓸까요? 그렇죠.

'언제 [화면이름] 초기화' 블록 조각을 사용합니다.

 

 

그리고 어떤 것에 값을 넣을 때, 우리는 '지정하기'를 쓰죠.

우리는 목록 문자열에 데이터를 지정할 것이므로

'지정하기 목록뷰. 목록문자열' 블록 조각을 또한 사용합니다.

 

 

자 그런데 여러 항목을 넣으려면  ','을 구분해서 데이터를 지정해야 합니다.

 

여러 문자열을 연결 할 때는 텍스트의 아래 블록을 이용합니다.

처음에 두 개의 문자만 합치기를 할 수 있어, 파란색 부분을 마우스로 선택해서 합칠 문자열 항목을 늘릴 수 있습니다.

 

  

 

 

블록 결합

이를 이용해서 아래 블록을 맞춰보면 다음과 같은 블록이 결합됩니다.

해당 화면이 초기화 될 때(화면 열릴 때) 목록 문자열 값으로 

'경기도 수원시, 서울특별시 종로구, 서울특별시 서초구, 경기도 안양시, 서울특별시 관악구'의 값이 들어가게 됩니다.

그리고 '필터 사용'을 '참'으로 하여 검색 기능을 추가했습니다.

 

장치에 연결 후, 앱을 확인하기

자 그럼 결과를 확인해 볼까요?

자 다음과 같습니다.

 

앞으로 3-4일 간은 앱 인벤터가 아닌 다른 알고리즘과 관련된 내용을 글을 쓸 예정입니다.

참고 부탁 드립니다.

화이팅! 오늘 하루도 수고하셨습니다.

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)