[NEXT] Android 개발 경험 프로젝트 2일차 (Intent, ListView, Adapter)

학습목표
이 학습을 마치면…
-Intent를 사용해 다른 Activity로 전환을 할 수 있습니다.

!

-android.R.layout.simple_list_item_1 을 사용하여 한줄이 표시되는

리스트뷰를 만들 수 있습니다.

!

-android.R.layout.simple_list_item_2 을 사용하여 두줄이 표시되는


!

-ArrayAdapter를 직접 만들어 자신이 원하는 레이아웃을 가지는


Main

SimpleList1
리스트에 글을 한줄씩 출력하는 리스트뷰 실습

Intent를 사용하며 Activity이동
앱 시작시

실행되는 Activity

SimpleList2
리스트에 글을 두줄씩 출력하는 리스트뷰 실습

CustomList
리스트뷰의 레이아웃을 직접 구현하는 실습

rowLayout
구현할 앱의 구조

-프로젝트, 레이아웃 만들기-

메인 레이아웃을 생성해야 합니다.

빈 프로젝트를 하나 생성해 주세요

(이름은 자유!)

메인 레이아웃을 편집해서

TextView하나와 Button3개를 만듭니다.

(Linear, Relative Layout은 상관 없이 편한대로!)

속성에서 ID와 Text를 사람이 알기 쉽게 변경합니다.

이 예제에서는 simple_list1, simple_list2, custom_list로 하였습니다.

!
(id의 변경은 레이아웃 에디터에서 변경하시길 권장합니다.)

id: main_button_simple_list1
id: main_button_simple_list2
id: main_button_custom_list

완성된 레이아웃

한줄 리스트를 표시해줄

레이아웃과 액티비티 클래스를

만들어야 합니다.

작업중인 패키지명을 마우스 오른쪽 클릭을 한 후

New-Other를 선택해줍니다.

Android에 Android Activity항목을 선택한 후 계속 진행합니다.

Activity Name으로

SimpleList1Activity를 적습니다.

클래스 파일과 레이아웃 파일이 동시에 생성되었습니다.

x

xml편집창으로 이동합니다.

내용을 다 삭제합니다.

x

ListView를 배치합니다.

x

x

ListView의 id는 simple_list1_listView로 하였습니다.

(각자 구분가능하도록 자유롭게)

Main

SimpleList1
리스트에 글을 한줄씩 출력하는 리스트뷰 실습

앱 시작시

실행되는 Activity

SimpleList2
리스트에 글을 두줄씩 출력하는 리스트뷰 실습

CustomList
리스트뷰의 레이아웃을 직접 구현하는 실습

SimpleList1과 같은 Activity가 2개 더 필요합니다.

동일한 방법을 이용해서

SimpleList2Activity,

CustomListActivity를 생성해야합니다.

레이아웃도 동일하게 ListView를 가지고 있게 하고

각 레이아웃을 구분할 수 있는 Id값을 가지고 있게 합니다.

ex)simple_list1_listView,

simple_list2_listView,

custom_list_listView

이제 메인의 버튼을 누르면

다른 Activity로 이동할 수 있게 해야합니다.

이제 MainActivity를 열어줍니다.

onCreateOptionsMenu는 이번 예제에서 사용하지 않으므로

삭제를 하였습니다.(선택사항)

Button위젯을 실습했을때 처럼

OnClickListener를 받고 onClick을 만들어줍니다.

Button을 생성하고 OnClickListener도 연결해줍니다.

OnClick에 switch를 Id값으로 사용해 이벤트를 판별합니다.

Intent
안드로이드에서는 액티비티 간의 화면 전환에

인텐트(Intent)를 사용합니다.

!

단순히 화면 전환을 의미하지는 않으나

이 예제에서는 다른 액티비티를 호출하고 호출 될 액티비티에

간단한 값을 전달하는 방법을 알아봅니다.

Intent intent = new Intent(this, 이동할액티비티.class);

startActivity(intent);
간단히 화면 전환을 위해서는 Intent를 생성하고

생성자로 현재 액티비티의 컨텍스트와

(컨텍스트에 대한 설명은 안드로이드 베이직에서 합니다.)

이동할 액티비티 클래스의 객체를 써주고

!

startActivity(intent)를 해주면 됩니다.

MainActivity

인텐트(Intent)로 다른 액티비티를 호출할 때

putExtra(key, value);형식으로 데이터를 같이 전송 할 수 있습니다.

MainActivity

Activity2

호출된 액티비티에서 데이터를 받을 때에는

getIntent().getExtras().getString(“키값”);으로 합니다.

꼭 String이 아니라 Int나 다른 자료형도 가능하나

!

객체를 보낼때에는 package라는 것을 사용하지만

이 예제에서는 다루지 않습니다.

이제 다시 프로젝트로 돌아와서…

하고 싶은 내용

Intent

startActivity()

onClick안의 switch안에 Intent를 만들고 이동할 액티비티 클래스

(SimpleList1Activity.class)를 넣고 startActivity()를 합니다.

나머지 버튼에도 동일하게 Intent를 넣어줍니다.

화면 전환은 잘 되었지만

리스트뷰에 아무 내용도 없어

빈 화면으로 표시됩니다.

!

이제 리스트뷰에 내용을 넣어보겠습니다.

SimpleList1에서는

리스트에 한줄짜리 글이 들어가는

리스트를 만들어 봅니다.

SimpleList1Activity를 편집합니다.

!
Main때와 마찬가지로 onCreateOptionsMenu를 지우고 싶으신 분은

지우셔도 무방합니다.

ListView를 생성을 해 줍니다.

리스트에 넣을 데이터를 ArrayList로 관리 할 예정입니다.

ArrayListString을 생성합니다.

add()를 사용해서 ArrayList에 임의의 값을 넣어줍니다.

!

(시간에 여유가 있으시면 앞에서 Intent를 배울때 사용한

putExtra()와 getExtra()를 사용하여

데이터를 받아보시는 연습을 해보시는건 어떤가요? ^^;)

위젯은 단순히 화면을 출력하기 위한 일종의 껍데기인데

Adapter가 데이터를 각 위젯에 맞는 형태로 제어를 해준다.

!

(위젯과 데이터를 연결해주는 징검다리 역할)

ListView

1
2
3
4
…

사진

이름

주소
ArrayList

Gallery
Adapter
-ArrayList

-UI레이아웃

1 2 3 4 …

GridView
하나의 요소 UI를

구성할 레이아웃 파일

1 2 3
4 5 6
7 8 9

Adapter의 개념
제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저

Simple1 실습에서는 리스트에 데이터를 보여주기 위한 어뎁터로

ArrayAdapter를 사용합니다.

!
ArrayAdapter에 UI레이아웃과 데이터를 넣어주고

setAdapter()로 ListView에 Adapter를 적용시키는데

!
UI레이아웃을 안드로이드에서 기본 제공하는

simple_list_item_1을 사용하여 하나의 텍스트뷰가 있는 한줄짜리 레이아웃으로 표시합니다.

데이터가

리스트뷰에 맞게 잘 출력되었습니다^^

참고로 simple_list_item_1은

단순히 TextView가 하나있는

레이아웃xml파일입니다.

이번에는 SimpleList2에서

리스트에 두줄이 표시되는 Adapter를

적용해 보겠습니다.

SimpleList2Activity도 1에서 하던 것과 마찬가지로

ListView를 생성합니다.

String형태로 key와 value를 가지는 HashMap을

가지고 있는 ArrayList (?!)가 필요합니다.

값을 넣어줄 때에는 HashMap을 생성해서

먼저 HashMap에 값을 put()으로 넣어준 후

ArrayList에 HashMap을 넣어줍니다.

!

HashMap의 키캆은 여기서는 임의로 line1과 line2로 설정하였습니다.

line1을 키값으로 가지는곳에 첫번째 줄에 올 데이터를,

2에는 두번째 줄에 올 데이터를 넣을 예정입니다.

2줄짜리 simpleList를 사용하기 위해서는

String 배열과 int 배열이 필요합니다.

!

String 배열에는 데이터를 가져올때 사용할 HashMap의 키값을

int배열에는 android.R.layout.simple_list_item_2에서 사용할

TextView위젯의 id값이 필요합니다. (고정된 id)

SimpleAdapter를 생성하고 데이터 리스트(hashMapList1)와

UI레이아웃(android.R.layout.simple_list_item_2),

그리고 아까 설정한 배열값 (from, to)를 넣어주고

ListView에 어뎁터를 연결해 줍니다.

데이터가

리스트뷰에 맞게 잘 출력되었습니다^^
참고로 simple_list_item_2은

TextView가 두개있는

레이아웃xml파일입니다.

나는 저런 두줄 형태가 아니라

사진을 넣거나 다른 형태의

리스트를 만들고 싶은데?

이제 나만의 리스트뷰(어뎁터)를 만들어 봅시다.

사진과 텍스트가

같이 있는 리스트 만들기

사진과 텍스트가

같이 있는 리스트를 만들기 위해서는

어댑터를 직접 만들어야 합니다.

ListView

1
2
3
4
…
Gallery
ArrayList

Adapter
-ArrayList

-UI레이아웃

1 2 3 4 …

GridView


1 2 3
4 5 6
7 8 9

Adapter의 개념

ListView

1
2
3
4
…
Gallery
ArrayList

Adapter
-ArrayList

-UI레이아웃

1 2 3 4 …

GridView


먼저 UI레이아웃을

만들어 보겠습니다.

1 2 3
4 5 6
7 8 9

Adapter의 개념

TextView(Large, Blue)
TextView(Small, Gray)
ImageView

프로젝트의 res-layout항목을 마우스 오른쪽 버튼으로 클릭하여

New-Android XML File을 선택합니다.

이름을 custom_list_row (임의로)

LinearLayout을 선택합니다.

레이아웃은 하나의 리스트안의 레이아웃만을

생각하며 작성하셔야 합니다.

이미지뷰 하나와 텍스트뷰 2개를 만들었습니다.

(id는 식별하기 좋게 바꿔 주세요)

ListView

1
2
3
4
…
Gallery
ArrayList

Adapter
-ArrayList

-UI레이아웃

1 2 3 4 …

GridView


UI레이아웃은

만들었고 이번에는

데이터를 만들어야 합니다.

1 2 3
4 5 6
7 8 9

Adapter의 개념

ArrayList형태로 어댑터에 데이터를 넣어야 하는데

리스트에 표현을 할 데이터가 많으므로

객체로 감싸주겠습니다.

새 클래스를 만들어 줍니다.

이 예제에서는 ListData라는 클래스를 만들었습니다.

빈 클래스가 만들어졌습니다.

사진의 이름(경로)과 TextView에 들어갈

텍스트 내용을2개를 보관할 지역변수를 만들고 생성자를 만들었습니다.

이 예제에서는 데이터를 변경하는 경우가 없어 set함수는 없이

get함수들만을 만들었습니다.

ListView

1
2
3
4
…
Gallery
ArrayList

Adapter
-ArrayList

-UI레이아웃



UI레이아웃과

데이터를 만들었고

!

이번에야말로

Adapter를 만들어야 합니다.

Adapter의 개념

1 2 3 4 …

GridView

1 2 3
4 5 6
7 8 9

어댑터를 만들 클래스를 만들어줘야 합니다.

이 예제에서는 클래스 명을 CustomAdapter로 정했습니다.

아무것도 없는 클래스가 새로 생겼습니다.

아까 만든 ListData를 가지는 ArrayAdapter를 상속받고

생성자에 Context, UI레이아웃의 id, 그리고 ArrayList데이터를 받습니다.

ArrayAdapter에서 중요한 부분인 어떻게 보여주것인지에 대한 부분은

getView()에 있습니다.

직접 만든 UI레이아웃에 맞게 고치기 위해

getView()를 오버라이딩 하여 수정을 해야합니다.

inﬂate라는 것은 xml로 정의되어 있는 뷰나 레이아웃을

객체화 시키기 위해서 사용하는 메서드 인데

이 예제에서 간단히 설명을 하자면

-리스트에 보여줄 항목이 있는데 이 항목의 레이아웃을

전에 만든 custom_list_row.xml을 불러와서 사용하는 장면입니다.

inﬂate로 만든 row로부터 텍스트뷰를 인스턴스로 만들어

글씨를 집어 넣습니다. 평소와 달리 row.ﬁndViewById()로 row.을 붙여

row의 텍스트뷰를 가져오도록 합니다.

ImageView도 전과 같은 방식으로 인스턴스를 만들고

이 예제에서는 getAssets()을 이용하여 assets이라는 곳에서

이미지 데이터를 가져와 표현하는 방법을 사용합니다.

!

안드로이드에서의 assets이라는 공간은 데이터 형식에 상관없이

자유롭게 데이터를 불러 올 공간으로 사용됩니다.

assets폴더에는 리스트뷰에서 보여줄 용도로

ListData객체에 정해준 파일들을 복사해 주세요

이제 다시 CustomListActivity로 돌아와

CustomAdapter를 적용해 보겠습니다.

CustomAdapter에 값을 집어 넣기 위해서는

ListData를 가지는 ArrayList가 필요합니다.

ArrayList에 ListData를 수동으로 집어 넣어 보았습니다.

ﬁndViewById()를 사용하여 ListView를 가져오고

CustomAdapter를 생성하고 context와 UI레이아웃,

ListData를 가지고 있는 ArrayList 데이터를 전달합니다.

마지막으로 simpleList를 할 때와 마찬가지로 setAdapter()를 사용하여

리스트에 Adapter를 적용합니다.

레이아웃에 맞게

사진 크기를 조절하거나

!

메모리를 관리하는 부분이 없어

기종에 따라 화면이보기 흉하게 되거나

OutOfMemory가 발생하는 경우가

있습니다.

!

이럴때에는 레이아웃 파일을 수정을하여

자신의 기종에 맞는 설정을 하거나

!

메모리 부족이 발생할 때에는

이미지를 축소해서 사용해 주세요

리스트로 부터 이벤트 받기

단순히 리스트 형태로

데이터를 보여주는 것이 아니라

!

리스트를 터치하면

이벤트를 받아 어떤 동작을

실행 시킬수 있도록 합니다.

버튼을 사용했을때 OnClickListener를 사용하던 것 처럼

implements OnItemClickListener를 받아 옵니다.

ListView에 setOnItemClickListener(this);로

리스너를 달아 줍니다.

OnItemClick을 재정의를 해줘야합니다.

(인자의 이름은 알기 쉽게 adapterView, view, position과 id로 변경했습니다.)

[NEXT] Android 개발 경험 프로젝트 2일차 (Intent, ListView, Adapter)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [NEXT] Android 개발 경험 프로젝트 2일차 (Intent, ListView, Adapter)

Similar to [NEXT] Android 개발 경험 프로젝트 2일차 (Intent, ListView, Adapter) (20)

More from YoungSu Son

More from YoungSu Son (20)

[NEXT] Android 개발 경험 프로젝트 2일차 (Intent, ListView, Adapter)