[안드로이드 스튜디오] Ch6. 그리드뷰 & 리스트뷰 (GridView & ListView)

2019년 8월 22일 (목)

 

창업의 길로 가기 위한 두번째 걸음, [안드로이드 스튜디오]로 향해보자!

 

*질적으로 많이 부족한 글입니다. 지적 및 조언 환영합니다.

*이 글에선 "안드로이드 스튜디오"를 줄여서 "안스" 라고 표현합니다. 참고 바랍니다.

 

우선, 본인은 학원에서 'JAVA' 기초 수업을 선수강했다. 안드로이드 스튜디오를 배우기 위해선 피할 수 없는 언어이기 때문이다.

(물론 Kotlin 도 있지만, 대한민국에선 아직 JAVA의 파워가 어마어마 하다고..)

 

이번글에서는 그리드뷰와 리스트뷰에 대해서 배운다.

레이아웃 관련으로는 이번 글이 마지막이 될 것 같다. 내일 또는 다음주부터는 기능파트가 제대로 시작된다.(무섭다..하)

 

---

<차례>

1. 그리드뷰 (GridView) - 실습을 통한 배움(Learn by Practice)

2. 리스트뷰 (ListView)

---

 

1. 그리드뷰 (GridView) - 실습을 통한 배움 (Learn by Practice)

 

1.1 개념

 우선 그리드뷰란 "격자형태로 뷰들을 정렬하기 위한 뷰"이다. (LinearLayout, FrameLayout과 매우 비슷하다.)

 

 

1.2 특징

a. 탑재된 뷰들을 '자'력으로 사용할 수 없다. 

b. (그래서) 총 3개의 파일을 사용한다. (MainActivity / activity_main / ImageAdapter(new class))

 

 

1.3 디자인 (activity_main)

 우선 디자인부터 정해야한다. 디자인이라고 해봐야 대단한건 없다. 이름이 '격자'인 만큼 그냥 격자를 어떻게 만들어 줄거냐는 말이다. 예를 들어 "가로 몇개, 세로 몇개" 이런식이다.

 

이 열과 행을 지정하는 방법은 2가지가 있다:

 

(a) android:numColumns="number"

    android:numRow="number"

 

(b) android:columnCount="number"

    android:rowCount="number"

 

***(a)는 학원에서 배웠고, (b)는 수많은 블로거 프로그래머들이 사용중인 방법이다.

 

 

사진2

 

기본적으로 LinearLayout을 '세로방향'의 부모 레아웃으로 두고, 그리드뷰를 행의 갯수와 함께 그 안에 설정한다.

위의 사진같은 경우 가장 상위 부모는 Constraint이다. 참고하시길.

(가장 상위가 Constraint더라도, 다음 부모가 Linear 라면 그 안의 child는 상관이 없는 듯 하다.)

 

 

1.4 자바 클래스 생성 (new JAVA Class)

 위에서 설명했듯, 그리드뷰(레이아웃)는 탑재된 뷰들을 자력으로 사용할 수 없다. 그러므로, 클래스를 새로 생성해준후, 기능을 담당하는 MainActivity를 통해 뷰들을 실행 해주는 식이다. (...드디어 어려워지기 시작한다)

 

(a) 클래스를 생성해보자.

사진3

 클래스는 java파일안에 있는 com.example.mygridlayout(android) 이라는 곳에 만들어준다. 그 이유는 정확히 모르겠지만,

밑의 나머지 2개 파일들은 test 시도 와 연관이 있는것같다.

 

사진4

이렇게 자바 클래스를 하나 생성해주자.

 

사진5

아래를 보면 필자가 방금 생성한 자바 클래스가 BaseAdapter를 상속(extends) 한다고 적었다.

또, Context 를 통해 context라는 '화면' 변수를 생성했다. (밑에서 나오겠지만 변수선언은 변수선언일뿐,아직 실행은 안되었다.)

그.런.데 잠깐

BaseAdapter가.... 뭐지?

"public abstract class BaseAdapter extends Object implements ListAdapter, SpinnerAdapter"https://developer.android.com/reference/android/widget/BaseAdapter

즉, 저렇게 BaseAdapter를 상속하게 되면, ListAdapter와 SpinnerAdapter를 실행할 수 있게 된다는것이다.

 

그럼, ListAdapter와 SpinnerAdapter는 뭔데?

아니 그보다 Adapter란 무엇인가?

Adapter: 데이터 테이블을 목록 형태로 보여주기 위해 사용되는 것으로 데이터를 다양한 형식의 리스트 형식으로 보여주기 위해서 데이터와 리스트 뷰 사이에 존재하는 객체입니다. 즉, 간단히 말해 데이터와 뷰 사이의 통신을 위한 다리 역할을 합니다.
출처:http://www.gisdeveloper.co.kr/?p=1268

아하! 데이터(클래스 및 객체)와 뷰(디자인)사이의 통신 역할을 한다는게 핵심이구나!

그럼 다시 돌아와보자. BaseAdapter를 상속하게 되면, ListAdapter와 SpinnerAdapter를 실행할 수 있게 된다고 했다.

즉, 두개의 다른 종류의 데이터와 뷰사이의 통신역할을 해주는 멀티 다리 역할의 메서드라는 것을 알 수 있다.

 

근데 또 하나의 의문점, 나의 클래스, 즉 GridView를 위한 클래스가 왜 ListAdapter 또는 SpinnerAdapter가 필요할까?

그 해답은 안드로이드 공식 API에 나와 있었다.

A view that shows items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this view.
출처: http://developer.android.com/reference/android/widget/GridView.html

위 레퍼런스는 GridView에 대한 설명이다. 필요한 부분만 요약하자면, GridView내 아이템들은 ListAdapter에서 온다는 것 이다.

음.. 상식적으로 생각해도 그리드 라는 것 자체가 리스트적인 요소가 주체니까, 어찌보면 당연한 이야기인 것 같다.

결론적으로 GirdView와 ListAdapter는 뗄레야 뗄수 없는 운명인 것 이다. 그리고 이를 위해서 BaseAdapter를 사용하는것 뿐이다.

 

 

(b) 배열을 통해 효율적으로 사용할 데이터를 정리해보자.

 저번 시간에도 배열을 사용했다. 앞으로도 매우 자주 사용하지 싶다.

사진6

미리 총 20개의 사진을 res.drawable파일에 넣어 두었다. (자세한 방법은 전글을 참고하시길)

그리고 Integer, 즉 정수형 배열을 img라는 이름으로 객체 생성 해주어 저장한 모든 사진들을 넣어두었다.

이제부턴 나의 모든 사진들이 저 img라는 객체의 이름과 함께 i(순서)로 호출될 것 이다!

굳이 하나하나의 파일들을 호출할 필요 없어 정말 편리하다.

 

(c) 화면을 출력해보자

사진7

내가 생성한 (ListAdpater를 상속받고 있는) 클래스를 호출해서, 화면을 호출한다. 

 응? 근데 위에서 이미 context를 만들었는데 또 만들어?

헷갈리면 안된다. 위의 Context context(또는 this.context) 는 화면을 출력하는 Context 메서드를 받은 context 객체일 뿐, 아직 implement(실행)는 되지 않았다는 것 이다.

따라서 ImageAdapter 클래스에 의해 화면이 출력되도록 하는 것 이다.

 

(d) Count, item, ItemId, View 를 가져오자

 정말 그리드뷰는 많은걸 요구한다. 하지만 이 모든것들이 필수라고 한다.

우선 get 이란 가져온다는 뜻이다.

그걸 유념하고 밑의 설명을 보자.

 

getCount: 표현하고자 하는 아이템 갯수를 설정해주는 메서드

getitem: 원하는 위치의 아이템을 반환해주는 메서드

getitemId: 아이템의 아이디를 설정해주는 메서드 (배열로 설정했기에, 이 로직은 실질적으로는 필요 없다.)

getView: 실제 아이템을 화면에 배치할 때 호출되는 메서드. (context와는 다른개념이다. context가 종이라면 getView는 그위의 그림 같은 개념이다)

 

(d.a) getCount

사진8

getCount라는 메서드를 선언하고 {} 중괄호 안에서 기능을 설정해주었다.

{return img.length} : {이보게 컴퓨터 양반, img변수 속 모든 사진들을 리턴해주시오}

쯤 되겠다.

 

(d.a) getItem

사진9

getItem 메서드를 선언해주고,

(int position) : 몇번째 위치의 사진을 반환 하겠는지 정해달라는 것이다.

return img[position]; : 다 리턴 할거라서 그냥 position이라고 둔다. 

 

(d.a) getItemId

사진10

getItemId 메서드를 선언한다. 

(int i) : 몇번째, 또는 어떤 아이디의 데이터를 가져올것인지 설정해달라는 것 이다.

Exception e = new Exception() : 예외 (오류) e 라는 내부 클래스를 만들었다.

return 0; : 그 어떤 아이디도 리턴할게 없다는 강경한 입장이다.

 

(d.a) getView

사진11

getView라는 메서드를 선언한다. 이 메서드를 선언하는 방법은 간단하다. [마우스 오른쪽 클릭 -> generator -> Override -> getView]

() 소괄호 속을 보면 알겠지만 뷰란 뷰는 모두 나와버린다.

이 메서드의 핵심은 가장 밑의 return부분이다. imageView를 반환한다는 것이 가장 중요하다.

 

1.5 기능 (MainActivity)

사진12

기능 부분은 상대적으로 간단한 편 이다.

GridView 이름을 gridView로 변수 선언해주고 (기존 디자인파트의 (동일한 이름의) 아이디와는 다른 차원이다)

기존 디자인 부분에서 생성한 그리드뷰의 아이디 gridView를 호출하여 방금 선언한 그 변수에 고대로 넣어준다.

그러한 디자인 부분의 아이디가 들어가 있는 gridView라는 변수에서 여태 만든 ImageAdapter를 초기화 해준다 (참고로, 프로그래밍에서 초기화란 출력준비단계를 의미한다).

--> 변수이름.setAdapter(new ImageAdapter(context: this));

 

2. 리스트뷰 (ListView)

  리스트뷰는 상대적으로 간단하고, 이전글에서 설명한 적이 있어, 최대한 중요한 요소만 말하려고 한다.

우선 리스트뷰란 리스트 형태로 뷰들을 정렬하기 위한 뷰 이다. 이 리스트안에 아이템을 추가시키는 방법은 2가지가 있다.

 

2.1 resource 파일 이용하기

 

 

사진13

이런식으로 아이템을 string-array속에 추가하는 방식인데

이에 대한 자세한 설명은 밑의 링크를 참고하시라. 본인의 예제와 함께 자세히 서술하였다.

https://lepenseur-blog.tistory.com/8

 

 

안드로이드 기초 #5 - 위젯과 실습 (Widget & Practice)

 

2.2 JAVA 이용하기

다음으로는 JAVA를 이용한 아이템 추가 방법이다.

당연하게도 효율을 중요시하는 JAVA는 배열을 기본적으로 사용하게 되며 위 Adapter를 이용한것과 비슷하게

이번엔 ArrayAdapter 메서드 를 이용한다.

사진14