Android #7 - AdapterView (국비33일차)

 

 

오늘은 안드로이드에서 가장 많이 사용한다는 

AdapterView에 대해서 공부할 것이다.

오늘은 이 뷰가 어떻게 작동하는지에 대해서 알아보고

이 원리를 이용해 제일 많이 사용하는 View(AdapterView를 상속받은 뷰)에 대해 더 자세히 알아볼 것이다.

 

1. ListView (배열을 xml에서 만들기)
2. ListView (배열을 java에서 만들기)
3. Spinner
4. GridView
5. 심화 연습

 

 

AdapterView : 대량의 Data를 화면에 보여주기 위해 사용하는 View

 

왜 Adapter라는 표현을 쓸까?

 

우리가 흔히 사용하는 어뎁터는 

서로 다른 규격을 가진 장치를 연결해서 작동하게 도와주는 도구이다.

 

안드로이드에서도 마찬가지다.

대량의 String 데이터는 printf 같은 방식으로

GUI에 출력을 할 수 없다.

 

액티비티에서 공간을 차지하는 뷰를 만들어서

거기에 들어가게 코딩을 해야한다.

 

하지만 AdapterView를 사용하면

이 String 배열이나 리스트를

액티비티에서 보이게 만들 수 있다.

 

 

이 뷰를 상속받은 뷰들이 있는데

하나하나 알아보자.

 

 

1. ListView (배열을 xml에서 만들기)

 

 

우선 새로운 프로젝트를 만들고

액티비티 메인 xml으로 와서

relativeLayout으로 설정을 하였다.

 

여기에 ListView를 입력하면

 

위와 같이 미리 보기가 나타난다.

스크롤도 가지고 있으며

여러 아이템이 위와 같은 방식으로

나온다고 알려주고 있다.

 

 

근데 안드로이드에서 xml을 사용할 때

하드코딩을 선호하지 않는다고 하였다.

그래서 따로 Strings.xml 파일에 입력을 하였는데

이번에 문자열 배열을 xml로 만들어보자.

우선 values폴더를 오른쪽 클릭하여

values resource file을 누르자.

그리고 소문자로 arrays라고 쓰고 만들어주자.

 

그 후 위사진에서 

String-array가 없는 파일이 생길 텐데

string-array를 만들어주고

그 안에 item들을 넣어주자.

 

그 후 ListView에 

entries속성에 이 데이터들을 넣어주자.

이제 실행을 시켜보면

클릭도 가능하고 구분이 되어있는 

화면이 나타난다.

 

이제 저 아이템들을 클릭하면 

작동을 하게 해 보자.

우선 리스트 뷰에 아이디를 부여하고

 

자바로 가서 참조변수를 선언한 후

리스너를 만들어준다.

 이때 리스너는 setOnclickListener가 아니라

setOnItemClickListener다.

그 이유는 뷰 하나를 클릭하는 것이 아니라

뷰안에 있는 아이템을 클릭하는 것이기 때문이다.

 

그리고 아이템이 클릭 됐을 때

나타나는 반응으로 Toast를 만들고자 하면

위처럼 코딩해 주면 된다.

그러면 알아서 index 번호가 나타난다.

만일 String배열에 있는 문자열 그대로 가지고 오고 싶다면

res폴더 안에 있는 관리자를 데려와줘야 한다.

Resources res = getResources();로 데려와서

String[] datas = res.getStringArray(R.aaray.datas);를 써서

문자열들을 받아온다.

그리고 Toast에 이 배열을 입력하면 된다.

 

 

2. ListView (배열을 java에서 만들기)

 

 

Adapter의 작동원리는 위의 사진과 같다.

1. 대량의 데이터를 가지고
2. 레이아웃 모양 설계를 한 후
3. 어뎁터를 이용해서
4. 어뎁터 뷰를 이용해 보여주는

과정을 거친다.

 

배열을 java에서 만드는 경우 위와 

같은 순서대로 해야 한다.

 

우선 대량의 데이터를 가진 리스트 객체를 만들어준다.

 

이런 경우 xml에

entries를 사용할 수 없다.

 

이 경우 우선

레이아웃 모양을 설정하기 위해

레이아웃을 새로 만들어야 한다.

 

먼저 layout폴더를 오른쪽으로 누르고

layout resource file을 클릭해 준다.

 

그리고 새로 레이아웃 모양을 설계할

layout 파일을 만들어준다.

 

그리고 내가 원하는 형식을 적어주면 된다.

 

미리 보기 화면이 나타나는데

이를 참고해서 수정하자.

 

그 후에 자바로 돌아와서

참조변수를 만들고

아답터 객체를 만들자.

그리고 listView 참조변수 또한 만들어서

 

뷰를 찾아와서 넣어주고

setAdapter를 해준다.

 

만일 리스트의 항목을 클릭했을 때 반응하길 원한다면

아까와 같이 setOnItemClicklistener를 만들어주자.

 

 

 

 

근데 배열로 하지 않고

Arraylist로 배열을 만든 이유는

String 배열을 추가하기 위해서다.

데이터를 추가하기 위해

EditText와 버튼을 추가하고 

참조변수를 선언한 후

그 뷰들을 찾아와서

리스너를 넣어준다.

리스너 안에는 

EditText 안에 적어둔 글씨를 얻어와서

ArrayList에 넣어주는 작업을 하였다.

 

하지만 이렇게 해도

실행해서 글씨를 작성해도 추가되지 않는다.

 

 그 이유는 Adapter가 실행되었을 때

갱신된 것이지 

그 이후로는 갱신되지 않았기 때문이다.

 

그래서 

adapter.notifyDataSetChanged(); 를 해서

데이터 개수가 바뀌었다는 것을 알려주면

제대로 작동을 한다.

 

 

위와 같이 ddd를 추가했더니

바로 화면에 추가되는 모습을 볼 수 있다.

 

그리고 반대로 꾹 눌렀을 때

그 아이템이 삭제하고 싶다면

listView.setOnItemLongClickListener를 만들어서

datas.remove(i)를 통해 삭제해 주고

아답터에게 데이터가 바뀌었음을 알려주면 된다.

 

여기서  reture 값을 꼭 true로 바꿔줘야 한다.

그래야지 onclick()이 발동되지 않는다.

 

 

 

3. Spinner

 

스피너를 만들기 전에

values폴더 오른쪽을 클릭해서

새로운 values xml 파일을 추가한다.

arrays 파일을 만들기 위해서다.

이 안에 string-array를 넣어주고

item들도 추가해 준다.

 

그리고 activity_main xml에

Spinner를 입력해 준다.

 

미리 보기를 봤을 때

이런 화면이 나왔으면 된 것이다.

이때 array를 xml 파일로 만들어놓았으니

entries를 통해서 array를 넣어준다.

그럼 이렇게 결과물이 나온다.

 

그러나 entries를 사용하면

레이아웃을 내 맘대로 설정할 수 없다.

 

내 마음대로 커스텀하기 위해

id를 부여하고

 

새로운 레이아웃을 만들어준다.

레이아웃은 내가 원하는 대로

속성값을 넣어주면 된다.

그리고

늘 그렇듯

참조변수를 만들어주고

id를 통해 뷰를 찾아오게 한 다음에

adapter 객체를 만들고

 setAdapter를 해주자.

 

그럼 위와 같이 내가 커스텀한 형식으로

설정할 수 있다.

 

 

그럼 화살표를 눌러서

드롭다운을 했을 때

다른 테마/레이아웃을 적용하고 싶다면?

그러기 위해서 새로운 레이아웃을 

또 추가해야 한다.

 

그리고 거기에 내가 원하는 레이아웃

속성들을 입력한다.

자바로 와서

adapter.setDropDwonViewResource 기능을 사용해 주면 된다.

 

그럼 위와 같이

드롭다운 되었을 땐

검은 배경이 나타나는 것을 

볼 수 있다.

 

item을 선택했을 때 나타나는 반응을 선택하려면

setOnItemSelectedlistener를 사용하자.

 

 

4. GridView

 

그리드 뷰는 

그리드 레이아웃 형식으로

처리해 주는 뷰다.

 

사용법은 간단하다.

우선 새로운 프로젝트를 만들고

activity_main.xml에

위와 같이 Gridview를 만들어주자.

(여기서 속성 중 numColumns는 옆으로 몇 칸 할지..)

그리고 어레이리스트를 만들고

ArrayAdapter, GridView 참조변수를 만들어준다.

 

그 후 대량의 데이터를 추가하고

gridviwe 참조변수에 아이디를 찾아 뷰를 넣어주고

adapter를 이용하면 된다.

 

그럼 이렇게 생긴 GridView를 만들 수 있다.

아이템을 클릭했을 땐

위에서 했던 것처럼

setOnItemclickListener를 이용하면 된다.

 

 

5. 심화 연습

 

위 사진 오른쪽에 보이는 화면을 만들려고 한다.

 

이때 대량의 data는 한 개의 자료형이 아닌 여러 개의 자료형을 가지고 있는 상황이고

또 내가 원하는 대로 item의 뷰 모양을 설계하여야 하며

MyAdapter를 만들어서

작동시켜야 한다.

 

우선 새 프로젝트 파일을 만들자.

그리고 activity_main.xml에

앱 맨 위에 보일 이름과

listview를 만들어주자.

그럼 미리 보기에

위와 같이 표시가 될 것이다.

 

이제 아이템들을 넣을 수 있게 작업을 해보자.

우선 좌상단에 java폴더 안에

MainActivity.java 가 있는 폴더를 오른쪽으로

눌러 java class를 만들어주자.

 

내가 생각하는 이름을 넣고 엔터를 누르자.

 

그리고 내가 필요한

자료형들을 선언하고

생성자까지 만들어주자.

 

이제 자바로 돌아와서

대량의 데이터를 추가해 준다.

그리고 내가 원하는 대로 item 레이아웃을

설계하기 위해 레이아웃 폴더에 

새로운 레이아웃을 만들어준다.

 

여기서 내가 원하는 대로

뷰들을 배치해 주자.

 

미리 보기에 

얼추 원하는 모양으로 나왔다.

 

그 후

여러 자료형이 포함된 class를

처리할 수 있는 Adapter를 만들어줘야 한다.

새로운 자바 클래스를 만들어주자.

 

우선 BaseAdapter을 상속받아주자.

그럼 오류가 뜨는데

추상메소드가 있기 때문이다.
(꼭 포함해야 하는 메소드)

implement methods를 누르면

위와 같이 나오는데

다 체크한 후 ok를 눌러주자.

 

그럼 꼭 들어가야 할 메소드 4개가 나온다.

그리고 참조변수와

생성자 또한 만들어주자.

context는 아래에서 쓰이는 것이기에 참조변수로 만든 후

main 자바에서 입력받을 예정이다.

getCount는 총 만들 개수를 말하는 거여서

return 값으로 아까 만든 배열의 사이즈 크기(int형)를 

줘야 한다.

 

getItem은 아이템의 몇 번째 거를 리턴해야 하는지에

대한 것으로 i번째 것을 리턴해주면 된다.

 

이제 4번째 함수였던 getView다.

이 부분이 제일 중요한다.

우선 사용하지 않는 뷰를 찾아서

뷰 객체를 만들어주는 코드부터 작성해 보자.
(이런 식으로 해야 내가 스크롤을 할 때 새로운 뷰가 생겨나고
위로 지나간 뷰들은 사라지면서 에러가 안남)

LayoutInflater를 이용하며

적용할 레이아웃을 inflate 한 것을

파라미터였던 view에 넣고

마지막 return 값에 view를 넣어준다.

 

그리고 내가 만들어야 할 인덱스 번호를 통해 얻은 item에

각각 넣을 뷰들을 참조하고

데이터를 연결시켜 주면 된다.

 

그럼 이렇게 생긴

앱이 완성!!!