현재의 예제는 2020년 3월 중순 안드로이드 스튜디오 버전 3.6을 기준으로작성 하였음에 유의하자. import 하는 라이브러리들이 영향을 받을 수도 있으므로 Text 모드에서 빨간 색으로 표기된 부분에 대해서 왼쪽 Alt+Enter 키를 친 후 옵션 선택 리스트가 나타나면 imprt...를 선택 클릭 처리 하자. 한편 3.5버전에서는 activity_main.xml 하단에 Design 및 Text 선택 버튼이 있었으나 3.6버전에서는 편집창 상단 우측에 3개의 아이콘이 있으며 각각은 Code, Split, Design 이다. Code는 Text 코드만 보여주며 Split은 왼쪽에 코드 오른쪽에 레이아웃을 보여 준다. Design 은 원래 기능 그대로이다.
스마트폰에서 가장 폭 넓게 사용되는 기법의 하나인 ListView 안드로이드 스튜디오 예제 코드를 작성해 보자. 6개의 과일 이미지 즉 apple, banana, lemon, melon, pera, strawberry를 대상으로 그 명칭을 부여하고 과일의 색상을 분류 기준으로 삼자. 이 6개의 과일 이미지는 인터넷에서 복사 후 그림판에서 붙여 넣기 하여 과일 그림만 남긴 후 픽셀을 60X60 에 가깝게 조절하면 스마트폰 화면에 4∼5개가 디스플레이 되므로 다 보려면 반드시 스크롤 작업을 해야 한다. 즉 ListView 예제란 점을 뜻한다.
1. drawable 폴더에 6개 이미지 설치
준비된 여섯 개의 이미지를 복사하여 안드로이드 스튜디오의 res≻drawable 에 붙여넣기(Paste) 하면 된다.
2. my_custom_list.xml 코드 작성
activity_main.xml 과는 별도로 my_custom_list.xml을 작성하자. 여기에서는 이미지 하나당 첨부되는 2개의 텍스트 라벨과 1개의 버튼을 Relative Layout을 사용하여 설치하기로 한다. 다음 그림에서 왼쪽은 스마트폰 화면이며 오른 쪽은 Design 구성이다.
실제 코드는 다음과 같이 작성된다. my_custom_list.xml에서 전체 화면이 설정된 후 적당한 크기의 ImageView 가 설정되면 이를 기준으로 하여 “toRightOf”와 같은 Relative 용법이 사용된다. 즉 ListView를 구성하는 하나의 요소 크기에 대응하는 설정이 이루어졌다.
3. activity_main.xml 코드 작성
반면에 activity_main.xml 에서의 ListView 크기는 스마트 폰 전체 화면 크기로 지정하며 넘치는 내용들은 스크롤 작업에 의해 ListView 스크린 화면에 들어오게 된다. 즉 activity_main.xml에서 <ListView를 사용하면 따라서 스크롤 속성 지정이 이루어진다.
MainActivity.jave를 코딩하기 전에 가장 간단한 ListView 코드 구조를 살펴보자. ListView 코드 구조는 다음과 같이 리스팅 할 Data와 데이터 저장을 위한 ArrayList 선언 그리고 그 둘을 연결해 주는 ArrayAdapter 3가지로 구성된다.
4. MainActivity.java 코드 작성
위와 같이 아주 간단한 문자열 데이터 나열 사례가 아닌 지금 고려하는 이미지와 그에 딸린 문자열 데이터들로 구성되는 복잡한 경우라면 Adapter 구조가 복잡한 편이므로 다음과 같이 MyCustomListAdapter와 같은 별도의 Class 코드가 필요할 수도 있다.
5. MyCustomListAdapter Class 코드 작성
Class 작성을 위해서는 마우스 오른쪽 버튼 메뉴에서 New≻ⓒJava class를 클릭하면 Class 생성을 위한 창이 뜨면 Class 명을 입력하도록 하자. 다음은 ArrayAdapter 의 핵심 적인 구조에 해당한다. 특히 resource는 선택 클릭된 데이터 아이템의 순번 정보로서 앱인벤터에서는 Selectionindex 에 해당한다. 현재 주어진 과일 ListView 문제에서는 1∼6번까지의 순법을 생각할 수 있을 것이다.
6. MyCustomListAdapter Class 코드 작성
ListView에서 Custom view를 사용하려면 반드시 하나의 열을 기준으로 하는 레이아웃 xml 파일을 별도로 정의해야 한다. 즉 여기서는 앞에서 설명했던my_custom_list.xml 파일을 의미한다. 이 xml 레이아웃으로부터 public View getView 루틴을 사용하여 화면 전체 view 데이터를 가져옴과 동시에 buttonDelete.setOnClickListener 루틴을 모니터하여 특정 아이템 클릭 여부를 확인하게 되면 아이템의 위치에 해당하는 SelectionIndex 즉 position 정보를 확보하여 Remove 루틴을 호출하도록 한다. 클릭된 아이템 열을 삭제하기 위한 Remove 루틴도 별도 Class 로 코딩이 필요하다.
7. removeFruit Class 코드 작성
스마트폰 화면에서 선택 클릭한 아이템 열을 삭제하기 위해서는 “Are you sure you want to delete this?”와 같은 질문을 받게 될 것이며 Yes 또는 No 중에 선택 클릭해야 할 것이다.
이러한 과정을 통해 클릭된 아이템 열이 삭제가 되면 다시 전체 View view를 호출하여 새로운 스마트 폰 화면을 보여 줌과 동시에 또 새로운 특정 아이템 클릳 여부를 대기하게 될 것이다.
8. 효율적인 LIstView 코딩방법 제안
유사한 코딩을 주제로 한 괜찮은 유튜브 영상들도 많지만 이와 같은 내용을 영상만으로 학습한다는 것은 거의 불가능에 가깝다. 물론 코드의 전체 구조 파악 차원에서 한 두 번 보는 것도 필수적이긴 하다. 그러한 의미에서 Simplified Coding 의 ListView 유튜브를 참조했던 것도 사실이며 Simplified Coding 의 오픈소스를 다운받아 실행 보았으나 발생하는 에러를 처리할 수 없었다.
결국 그 오픈 소스를 가지고 나 자신이 새로운 파일 명으로 시작과 동시에 코드를 작성함에 있어서 한줄 또는 한 블록씩 일일이 복사 붙여넣기(Copy & Paste) 전략을 사용하였다. 가장 주의할 점은 파일 명이 바뀜에 따라 package 명이 전부 변동된다는 점이다.
즉 첨부된 파일을 다운 받아 설치 후 오픈 한 상태에서 자신만의 파일명으로 새로이 프로젝트를 오픈하게 되면 우선 첫째로 Android.Manifest.xml에서 자신이 부여한 파일명을 확인해야 할 것이다.
자신이 부여한 파일명이 다음과 같이 여러 곳에서 사용되고 있으므로 복사 붙여넣기하기 위해 다운 받은 파일에서 이 부분을 정확히 수정해야 할 것이다. 다음은 MyCustomListAdapter.java 의 사례인데 맨 첫줄에 자신이 부여한 파일명이 들어가도록 해야 한다는 것이다. 그러한 작업은 Class 코드인 Fruit, MyCustomListAdapter 뿐만 아니라 MainActivity.xml 까지 수정 대상이 된다.
다음의 유튜브 url 주소에서 실행 테스트 결과를 관찰해 보세요.
첨부된 파일을 다운받아 ListView 코드를 실행해 보자.
customlistviewandroid.zip'안드로이드 스튜디오' 카테고리의 다른 글
| 초보를 위한 안드로이드 스튜디오 블루투스 ListPIcking 코드 (0) | 2020.03.22 |
|---|---|
| ListView 실행 테스트 (0) | 2020.03.21 |
| 3.4 안드로이드 스튜디오 ListView 이해를 위한 앱 인벤터 ListView 코딩 (0) | 2020.03.12 |
| 3.3 안드로이드 스튜디오 ListView 예제 (0) | 2020.03.10 |
| 3.2 안드로이드 스튜디오 MP3 사운드 재생 (0) | 2020.02.25 |