Post on 20-Oct-2014
description
Android����������� ������������������ -����������� ������������������ Day����������� ������������������ 2����������� ������������������ ����������� ������������������ 안드로이드에게����������� ������������������ 메세지����������� ������������������ 보내기����������� ������������������
(Intent����������� ������������������ ����������� ������������������ ListView,����������� ������������������ Adapter)
학습목표이 학습을 마치면…-Intent를 사용해 다른 Activity로 전환을 할 수 있습니다. !-android.R.layout.simple_list_item_1 을 사용하여 한줄이 표시되는 리스트뷰를 만들 수 있습니다. !-android.R.layout.simple_list_item_2 을 사용하여 두줄이 표시되는 리스트뷰를 만들 수 있습니다. !-ArrayAdapter를 직접 만들어 자신이 원하는 레이아웃을 가지는 리스트뷰를 만들 수 있습니다.
Main SimpleList1
앱 시작시 실행되는 Activity
리스트에 글을 한줄씩 출력하는 리스트뷰 실습
SimpleList2
리스트에 글을 두줄씩 출력하는 리스트뷰 실습
CustomList
리스트뷰의 레이아웃을 직접 구현하는 실습
rowLayout
Intent를 사용하며 Activity이동
구현할 앱의 구조
-프로젝트, 레이아웃 만들기-
메인 레이아웃을 생성해야 합니다.
빈 프로젝트를 하나 생성해 주세요 (이름은 자유!)
메인 레이아웃을 편집해서
TextView하나와 Button3개를 만듭니다. (Linear, Relative Layout은 상관 없이 편한대로!)
속성에서 ID와 Text를 사람이 알기 쉽게 변경합니다. 이 예제에서는 simple_list1, simple_list2, custom_list로 하였습니다.
!(id의 변경은 레이아웃 에디터에서 변경하시길 권장합니다.)
완성된 레이아웃
id: main_button_simple_list1id: main_button_simple_list2id: main_button_custom_list
한줄 리스트를 표시해줄 레이아웃과 액티비티 클래스를
만들어야 합니다.
작업중인 패키지명을 마우스 오른쪽 클릭을 한 후 New-Other를 선택해줍니다.
Android에 Android Activity항목을 선택한 후 계속 진행합니다.
Activity Name으로 SimpleList1Activity를 적습니다.
클래스 파일과 레이아웃 파일이 동시에 생성되었습니다.
xml편집창으로 이동합니다.
x
내용을 다 삭제합니다.
내용이 없는 상태에서
x
LinearLayout(옵션)과
x
ListView를 배치합니다.
ListView의 id는 simple_list1_listView로 하였습니다. (각자 구분가능하도록 자유롭게)
x x
Main SimpleList1
앱 시작시 실행되는 Activity
리스트에 글을 한줄씩 출력하는 리스트뷰 실습
SimpleList2
리스트에 글을 두줄씩 출력하는 리스트뷰 실습
CustomList
리스트뷰의 레이아웃을 직접 구현하는 실습
SimpleList1과 같은 Activity가 2개 더 필요합니다.
동일한 방법을 이용해서 SimpleList2Activity,
CustomListActivity를 생성해야합니다.
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)를 해주면 됩니다.
인텐트(Intent)로 다른 액티비티를 호출할 때 putExtra(key, value);형식으로 데이터를 같이 전송 할 수 있습니다.
MainActivity
호출된 액티비티에서 데이터를 받을 때에는 getIntent().getExtras().getString(“키값”);으로 합니다. 꼭 String이 아니라 Int나 다른 자료형도 가능하나
!객체를 보낼때에는 package라는 것을 사용하지만
이 예제에서는 다루지 않습니다.
Activity2
MainActivity
이제 다시 프로젝트로 돌아와서…
Intent startActivity()
하고 싶은 내용
onClick안의 switch안에 Intent를 만들고 이동할 액티비티 클래스 (SimpleList1Activity.class)를 넣고 startActivity()를 합니다.
나머지 버튼에도 동일하게 Intent를 넣어줍니다.
화면 전환은 잘 되었지만 리스트뷰에 아무 내용도 없어 빈 화면으로 표시됩니다.
!이제 리스트뷰에 내용을 넣어보겠습니다.
SimpleList1에서는 리스트에 한줄짜리 글이 들어가는 리스트를 만들어 봅니다.
SimpleList1Activity를 편집합니다. !
Main때와 마찬가지로 onCreateOptionsMenu를 지우고 싶으신 분은 지우셔도 무방합니다.
ListView를 생성을 해 줍니다.
리스트에 넣을 데이터를 ArrayList로 관리 할 예정입니다. ArrayList<String>을 생성합니다.
add()를 사용해서 ArrayList에 임의의 값을 넣어줍니다. !
(시간에 여유가 있으시면 앞에서 Intent를 배울때 사용한 putExtra()와 getExtra()를 사용하여
데이터를 받아보시는 연습을 해보시는건 어떤가요? ^^;)
Adapter
위젯은 단순히 화면을 출력하기 위한 일종의 껍데기인데 Adapter가 데이터를 각 위젯에 맞는 형태로 제어를 해준다.
!(위젯과 데이터를 연결해주는 징검다리 역할)
-ArrayList -UI레이아웃
2 3
4 5 6
7 8 9
1
1234…
1 2 3 4 …
ListView
Gallery
GridView
AdapterArrayList
하나의 요소 UI를 구성할 레이아웃 파일
제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
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파일입니다.
나는 저런 두줄 형태가 아니라 사진을 넣거나 다른 형태의 리스트를 만들고 싶은데?
이제 나만의 리스트뷰(어뎁터)를 만들어 봅시다.
사진과 텍스트가 같이 있는 리스트 만들기
사진과 텍스트가 같이 있는 리스트를 만들기 위해서는 어댑터를 직접 만들어야 합니다.
-ArrayList -UI레이아웃
2 3
4 5 6
7 8 9
1
1234…
1 2 3 4 …
ListView
Gallery
GridView
AdapterArrayList
하나의 요소 UI를 구성할 레이아웃 파일
제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
Adapter의 개념
-ArrayList -UI레이아웃
2 3
4 5 6
7 8 9
1
1234…
1 2 3 4 …
ListView
Gallery
GridView
AdapterArrayList
하나의 요소 UI를 구성할 레이아웃 파일
제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
Adapter의 개념
먼저 UI레이아웃을 만들어 보겠습니다.
TextView(Large, Blue)
TextView(Small, Gray)
ImageView
프로젝트의 res-layout항목을 마우스 오른쪽 버튼으로 클릭하여 New-Android XML File을 선택합니다.
이름을 custom_list_row (임의로) LinearLayout을 선택합니다.
TextView(Large, Blue)
TextView(Small, Gray)
ImageView
레이아웃은 하나의 리스트안의 레이아웃만을 생각하며 작성하셔야 합니다.
이미지뷰 하나와 텍스트뷰 2개를 만들었습니다. (id는 식별하기 좋게 바꿔 주세요)
-ArrayList -UI레이아웃
2 3
4 5 6
7 8 9
1
1234…
1 2 3 4 …
ListView
Gallery
GridView
AdapterArrayList
하나의 요소 UI를 구성할 레이아웃 파일
제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
Adapter의 개념
UI레이아웃은 만들었고 이번에는
데이터를 만들어야 합니다.
ArrayList형태로 어댑터에 데이터를 넣어야 하는데 리스트에 표현을 할 데이터가 많으므로
객체로 감싸주겠습니다.
새 클래스를 만들어 줍니다.
이 예제에서는 ListData라는 클래스를 만들었습니다.
빈 클래스가 만들어졌습니다.
사진의 이름(경로)과 TextView에 들어갈 텍스트 내용을2개를 보관할 지역변수를 만들고 생성자를 만들었습니다.
이 예제에서는 데이터를 변경하는 경우가 없어 set함수는 없이 get함수들만을 만들었습니다.
-ArrayList -UI레이아웃
2 3
4 5 6
7 8 9
1
1234…
1 2 3 4 …
ListView
Gallery
GridView
AdapterArrayList
하나의 요소 UI를 구성할 레이아웃 파일
제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
Adapter의 개념
UI레이아웃과 데이터를 만들었고
!이번에야말로
Adapter를 만들어야 합니다.
어댑터를 만들 클래스를 만들어줘야 합니다.
이 예제에서는 클래스 명을 CustomAdapter로 정했습니다.
아무것도 없는 클래스가 새로 생겼습니다.
아까 만든 ListData를 가지는 ArrayAdapter를 상속받고 생성자에 Context, UI레이아웃의 id, 그리고 ArrayList데이터를 받습니다.
ArrayAdapter에서 중요한 부분인 어떻게 보여주것인지에 대한 부분은 getView()에 있습니다.
직접 만든 UI레이아웃에 맞게 고치기 위해 getView()를 오버라이딩 하여 수정을 해야합니다.
inflate라는 것은 xml로 정의되어 있는 뷰나 레이아웃을 객체화 시키기 위해서 사용하는 메서드 인데 이 예제에서 간단히 설명을 하자면
-리스트에 보여줄 항목이 있는데 이 항목의 레이아웃을 전에 만든 custom_list_row.xml을 불러와서 사용하는 장면입니다.
inflate로 만든 row로부터 텍스트뷰를 인스턴스로 만들어 글씨를 집어 넣습니다. 평소와 달리 row.findViewById()로 row.을 붙여
row의 텍스트뷰를 가져오도록 합니다.
ImageView도 전과 같은 방식으로 인스턴스를 만들고
이 예제에서는 getAssets()을 이용하여 assets이라는 곳에서 이미지 데이터를 가져와 표현하는 방법을 사용합니다.
!안드로이드에서의 assets이라는 공간은 데이터 형식에 상관없이
자유롭게 데이터를 불러 올 공간으로 사용됩니다.
assets폴더에는 리스트뷰에서 보여줄 용도로 ListData객체에 정해준 파일들을 복사해 주세요
이제 다시 CustomListActivity로 돌아와 CustomAdapter를 적용해 보겠습니다.
CustomAdapter에 값을 집어 넣기 위해서는 ListData를 가지는 ArrayList가 필요합니다.
ArrayList에 ListData를 수동으로 집어 넣어 보았습니다.
findViewById()를 사용하여 ListView를 가져오고
CustomAdapter를 생성하고 context와 UI레이아웃, ListData를 가지고 있는 ArrayList 데이터를 전달합니다.
마지막으로 simpleList를 할 때와 마찬가지로 setAdapter()를 사용하여 리스트에 Adapter를 적용합니다.
레이아웃에 맞게 사진 크기를 조절하거나
!메모리를 관리하는 부분이 없어
기종에 따라 화면이보기 흉하게 되거나 OutOfMemory가 발생하는 경우가
있습니다. !
이럴때에는 레이아웃 파일을 수정을하여 자신의 기종에 맞는 설정을 하거나
!메모리 부족이 발생할 때에는 이미지를 축소해서 사용해 주세요
리스트로 부터 이벤트 받기
단순히 리스트 형태로 데이터를 보여주는 것이 아니라
!리스트를 터치하면
이벤트를 받아 어떤 동작을 실행 시킬수 있도록 합니다.
버튼을 사용했을때 OnClickListener를 사용하던 것 처럼 implements OnItemClickListener를 받아 옵니다.
ListView에 setOnItemClickListener(this);로 리스너를 달아 줍니다.
OnItemClick을 재정의를 해줘야합니다. (인자의 이름은 알기 쉽게 adapterView, view, position과 id로 변경했습니다.)
position(int arg2)이 리스트의 번호를 의미합니다. 이 position으로 ArrayList로부터
데이터를 가져와서 사용 할 수도 있습니다.
이번 개발 경험 프로젝트에서 만들어야 할 서비스
NEXTAGRAM
다음주 수업 전까지 레이아웃과 Intent를 사용해
액티비티간의 이동은 구현이 되어 있어야 합니다.
스토리보드
메인화면
글 쓰기
글 읽기
TextView(Large, Blue)TextView(Small, Gray)
ImageView
Button
리스트를 터치하면 해당 글의 상세 글 보기화면으로 이동하여야 함
Write를 터치하면 글 쓰기 화면으로 이동하여야 함
-메인 리스트 화면-
TextView 글 제목TextView 글 내용
ImageView
TextView 작성 일자TextView 작성자
-글 읽기 화면-
EditText 글 제목 입력EditText 글 내용 입력
ImageButton 터치를 하면 앨범에서 사진 선택(추후 구현)
Button 글 쓰기(추후 구현)
EditText 작성자 입력
Layout파일 4개가 생성이 되어 있어야 합니다. *메인화면, *커스텀 어댑터용 UI 레이아웃,
*게시글 열람 화면, *게시글 작성 화면
메인화면
글 쓰기
글 읽기
메인의 리스트를 터치하면 글 읽기 화면으로,
!Write버튼을 누르면 글 쓰기 화면으로 이동하는 Intent구현도 필요합니다.
COMMING SOON