안녕하세요 골드입니다.
오늘은 안드로이드에서 많이 사용하는 ListView에 대해서 포스팅하겠습니다.
ListView는 각 아이템들을 vertical 형태로 보여주는 형식입니다.
기본적으로 Adapter를 생성하여 리스트 아이템에 필요한 데이터들을 getView로 보여주는 방식입니다.
안드로이드의 ListView는 사용하기 쉽게 만들어졌습니다.
또한 ListView는 어플리케이션을 만들 때 사용 빈도수가 굉장히 높은 편이기 때문에
알아두면 좋습니다.
Empty Activity로 새로운 프로젝트를 만들겠습니다.
1. 메인 액티비티 xml 파일 설정
activity_main.xml 파일에 ListView를 추가하겠습니다.
TextView를 삭제하고 ListView를 작성했습니다.
상위 태그는 LinearLayout으로 작성하고, layout width, height와 id만 작성했습니다.
미리보기를 보면 ListView가 있는 것을 볼 수 있습니다.
자세히 보면 스크롤바가 자동 생성되어 있는 모습을 볼 수 있습니다.
스크롤바를 하나하나 구현하지 않아도 된다는 점 역시 큰 메리트라고 할 수 있겠습니다.
match_parent로 설정했기 때문에 화면 전체에 ListView가 나타나고
스크롤바가 자동 생성되기 때문에 화면 밖에 아이템도 자동으로 스크롤해서
사용할 수 있습니다.
2. 리스트 아이템을 위한 xml 파일 생성
각 아이템들을 어떻게 나타낼 것인지 설정하는 custom xml파일이 필요합니다.
java -> res -> layout 폴더에 listview_item.xml 파일을 생성하겠습니다.
혹시 폴더 위치를 찾지 못하시는 분들은 뷰 설정을 확인해주세요.
Android 뷰로 설정하시면 제가 말한 폴더 위치를 찾기 수월합니다.
리스트뷰에 어떻게 보여질지를 설정하는 xml파일입니다.
간단한 전화번호부를 만들 것이기 때문에 왼쪽에 사진을 보여주는 ImageView,
그리고 ImageView의 수평방향에 ImageView의 height크기에 맞춰서 이름과 번호를 수직으로 정렬하였습니다.
LinearLayout으로 전체를 감싸고 이미지와 텍스트 버튼을 구성했습니다.
LinearLayout을 활용하면 여러가지 화면 세팅을 쉽게 만들 수 있습니다.
(하지만 태그가 많이 중복되게 되면 코드를 보기 어렵기 때문에
더 적절한 layout이 있는지 생각하는 것도 중요합니다.)
Text를 참조하기 위해 id값을 설정하였습니다. 여러분은 이미지도 바꿔보시기 바랍니다.
drawable 폴더에 res 폴더 안에 이미지들을 복사해서 java 코드로 참조하면 되겠습니다.
3. Data class와 Custom Adapter 생성
리스트 아이템에 필요한 데이터를 새로운 객체로 만들어서 관리하도록 하겠습니다.
MainActivity 상위 폴더를 우클릭해서 새로운 ListItem.class 파일을 만들었습니다.
아주 귀여운 class 파일이 완성되었습니다.
변수를 만들고 이 변수들을 활용하기 위한 getter와 setter를 선언해야 합니다.
이번엔 툴을 좀 활용하겠습니다.
메뉴에서 Code -> Generate를 선택하고 Getter and Setter로 두 변수의 Get Set 메서드를 생성합니다.
Getter와 Setter를 생성한 모습입니다. 마지막 줄에 ListItem 생성자도 하나 생성했습니다.
(물론 Get Set을 직접 작성해도 전혀 문제가 되지 않습니다.)
다음으로 Adapter를 하나 만들겠습니다.
ListItem.class와 같이 ListItemAdapater를 만들도록 하겠습니다.
우리는 BaseAdapter를 상속할겁니다. 그럼 이렇게 빨간줄이 뜨는데 오버라이드가 필요하기 때문입니다.
빨간줄에 포인터를 두고 Alt + Enter를 누르면
Implement methods를 할거냐고 물어봅니다. 가볍게 눌러줍니다.
getCount(), getItem(), getItemId(), getView() 메서드가 생성됩니다.
BaseAdapter를 상속받으려면 이 네 개의 메서드를 반드시 오버라이드해야합니다. (BaseAdapter 내부에 그렇게 정의되어있기 때문입니다.)
이름이 직관적이기 때문에 이름만 보고도 어떤 용도인지 알 수 있습니다.
getCount는 ArrayList의 크기를 리턴합니다. 리스트뷰에 생성될 아이템의 수 입니다.
getItem은 해당 position 위치에 있는 item을 리턴합니다.
예를 들어 특정 position에 있는 아이템을 클릭했을 때 이 아이템이 몇 번째인지 알 수 있습니다.
getItemId는 position을 리턴합니다.
우리도 메서드를 만들때 이런 직관적인 이름으로 용도를 잘 알린다면 좋겠습니다.
중요한 getView 메서드입니다. 이 메서드가 리스트를 어떻게 보여줄지 정하는 메서드입니다.
하나의 아이템을 어떻게 화면에 표현할 것인지를 결정합니다.
주로 inflate한다고 합니다.
view 객체에 이전에 작성했던 listview_item.xml 파일을 inflate 합니다.
그렇게 되면 아이템 뷰 객체들은 listview_item.xml 파일에 레이아웃 형태를 갖게 됩니다.
listview를 부모 뷰그룹으로 설정하면 배열 item들은 뷰그룹에 자식으로 설정됩니다.
그리고 text값들을 설정해주고 원한다면 image도 여기서 설정합니다.
마지막으로 모든 설정이 끝난 view객체를 리턴하면
해당 view객체가 화면에 표시되게 됩니다.
코드를 아름답게 작성한것 같아 보기 좋습니다.
중간에 if문 안에서 View객체가 null이라면 inflate하는 코드입니다.
여기서 우리가 작성한 listitem_list.xml 파일을 참조합니다. view를 이 xml 파일로 보여준다는 얘기입니다.
마지막으로
addItem 메서드를 생성합니다. 후에 MainActivity에서 이 메서드를 사용하여 list에 데이터를 넣을 것입니다.
4. MainAcivity class를 작성합니다.
MainActivity를 작성하도록 하겠습니다.
우리는 지금까지 리스트가 어떻게 보여질 것인지(xml)
리스트에 데이터를 참조하기 위한 ListItem (class)
리스트에 데이터를 넣기 위한 Adapter(class) 를 만들었습니다.
이제 이 재료들로 Main을 요리하겠습니다.
MainActivity의 코드는 간단합니다. 우리가 지금까지 만든 class들을 참조해주고
Adapter 객체에 아이템을 추가해줍니다.
adapter객체에 아이템을 추가한다는 것은 추가한 아이템들이
아까 작성한 class 안에 getView를 통해 설정된다는 뜻입니다.
우리는 생성자를 작성하였기 때문에 객체 선언과 동시에 변수 값을 설정할 수 있습니다.
마지막으로 ListView에 우리가 작성한 ListItemAdapter를 참조하도록 set해줍니다.
이제 핸드폰을 연결해서(혹은 가상머신) 우리가 만든 앱을 확인해보도록 합니다.
잘 만들었습니다.
현재 날짜 기준 요즘은 ListView와 동일한 기능을 가졌지만 효율성이 더 좋은
RecyclerView라는 것이 있습니다. 구글에서도 RecyclerView 사용을 권장하는 만큼
새로운 어플리케이션은 RecyclerView를 사용하길 추천합니다. 하지만 ListView에 대해서도
반드시 알아야 한다고 생각합니다.
오늘은 간단한 Custom ListView를 만들어봤습니다.
여기까지 골드였습니다. 감사합니다.