[Android/java] Custom GridView(그리드뷰) 사용하기

안녕하세요 골드입니다.

오늘은 GridView 사용법에 대해서 글을 쓰도록 하겠습니다.

 

GridView는 행과 열이 있는 2차원 데이터입니다.

GridView에 대한 가장 좋은 예제는 사진첩입니다.

핸드폰에 있는 사진첩 어플리케이션은 GridView형식으로 데이터를 보여줍니다.

이외에도 GridView 역시 ListView 만큼이나 활용도가 높기 때문에 알아두는 것이 좋습니다.

 

GridView에서 열이 없다면 ListView와 같아 지는 것입니다.

GridView 기본 개념은 ListView와 비슷합니다.

​데이터를 담고 있는 어댑터가 있고 getView 메서드를 통해 각 아이템을 뷰에 맞게 뿌려주는 형식입니다. 

 

1. Custom GridView를 위한 자료형과 xml파일 생성

ListItem이라는 class 파일을 하나 만듭니다.

아주 깔끔한 코드입니다.

GridView 형식으로 전화번호부를 만들 것이기 때문에,

이름과 번호 변수를 선언하였습니다.

여기에 Getter와 Setter를 추가합니다.

메뉴 바에서 Code -> Generate를 클릭합니다.

Getter and Setter를 클릭합니다.

마우스 포인터 위치에 생성되기 때문에 포인터 위치가 올바르지 않다면 제대로 나오지 않습니다.

​

생성자를 생성해주세요.

이렇게 get변수, set변수 메서드들이 자동 생성됩니다.

빨간 박스 안에 생성자는 직접 작성해주세요.

​(다른 메서드도 직접 작성해도 됩니다. 중요한건 코드가 같거나 이런 식으로 작성되어야 한다는 점입니다.)

2. activity_main.xml과 list_item.xml

먼저 activity_main.xml 파일입니다.

간단하게 GridView만 하나 생성합니다.

그리드뷰는 행과 열이 있는 2차원 데이터입니다.

속성 중에 numColumns 속성이 있습니다. 저는 2로 지정했습니다.

만약 numColumns가 1이라면 리스트뷰와 같은 모습이 됩니다.​

Spacing 속성은 각각 아이템들을 10dp만큼 띄어놓는다는 의미입니다.

상하좌우 각각 값을 입력할 수도 있고 horizontal, vertical

혹은 전체 Spacing 값을 입력할 수도 있습니다.

margin은 GridView를 부모 레이아웃으로부터 10dp만큼 간격을 두겠다는 뜻입니다.

Spacing과 margin이 각각 어디에 쓰이는지 다시 한번 확인해주세요.

 

이제 res -> layout에 list_item.xml 파일을 생성합니다.

list_item.xml은 GridView에 item들을 어떻게 보여줄지 정의하는 파일입니다.

사실 ImageView까지 있었는데 ImageView를 빼고 LinearLayout을 지우는 것을 깜빡했습니다.

레이아웃을 만들 때 안 좋은 예가 바로 여기 있습니다.

 

두 개의 TextView를 vertical 형식으로 배치하면 되는데 불필요한 LinearLayout이 하나 더 들어가 있습니다.

이러면 성능을 저하시킬뿐 아무런 이득도 없습니다.

레이아웃 코드를 작성할 때 항상 이런 점을 눈 여겨 보면 좋겠습니다.

 

따라서 작성하실 경우 한 개의 LinearLayout만을 작성하기 바랍니다.

두 개의 TextView를 배치했습니다.

​

3. Custom Adapter class 파일 생성

Adapter class를 하나 만듭니다.

이름은 GridListAdapter 입니다. BaseAdapter를 상속받고 있습니다.

자료형이 ListItem인 ArrayList 변수와 Context 객체 변수를 만들었습니다.

ArrayList에 ListItem 객체를 추가하기 위한 addItem이라는 메서드도 하나 생성합니다.

나중에 MainActivity에서 사용할 것입니다.

 

BaseAdapter를 사용하기 위해 반드시 작성해야 하는 코드입니다.

getCount는 ArrayList의 사이즈를 리턴합니다. list가 얼마나 있는지 알 수 있습니다.

getItem은 해당 position에 있는 item을 리턴합니다. 

예를 들어 버튼을 클릭했을 경우 해당 포지션의 아이템이 무엇인지 알 수 있습니다.

getItemId는 position값을 리턴합니다.

 

빨간줄 위에서 Alt + Enter를 누르고 implement method를 클릭하면 자동완성됩니다.

반드시 오버라이드 해야 하는 getView() 메서드입니다.

설명은 주석으로 대체하겠습니다. getView()메서드는 데이터를 가지고 있는 View객체를 반환합니다.

getView 메서드는 화면에 어떻게 보일지 설정하는 메서드입니다.

먼저 아이템의 부모 레이아웃을 설정하고 아이템 레이아웃을 위한 xml파일은 inflate합니다.

​이 예에서 inflate한 xml파일은 list_item.xml 파일입니다.

해당 xml 파일 안에는 두 개의 TextView가 있습니다.

두 개의 TextView의 text 속성을 정의한 후

view 객체를 리턴하도록 합니다.

 

4. MainActivity에서 adapter 사용

작성한 adapter를 MainActivity.class에 onCreate 안에(혹은 다른 곳에 메서드의 형태로) 적습니다.

addItem을 사용하여 ArrayList 안에 ListItem을 넣어줍니다.

adapter.addItem을 통해 list_item.xml 안에 있는 TextView의 text속성을 정의하고

adapter 코드 안에서 inflate된 view를 리턴합니다.

​

이제 가상머신으로 실행합니다.

개발 좀 하는 사람들의 전화번호를 얻었습니다.

 

ListView와 마찬가지로 GridView 역시 RecyclerView가 대체할 수 있습니다.

 

​

여기까지 골드였습니다.

감사합니다.