• Like
[NEXT] Android 개발 경험 프로젝트 2일차 (Intent, ListView, Adapter)
Upcoming SlideShare
Loading in...5
×

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

  • 2,510 views
Uploaded on

Written By 정문철 (NHN NEXT 1기) …

Written By 정문철 (NHN NEXT 1기)
Reviewed By 손영수

인텐트, 리스트뷰, 어댑터

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 정문철 학생의 센스가 느껴지는 프리젠테이션.. 거의 손댈게 없었다는.. 감사!!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,510
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
89
Comments
1
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Android
  • 2.   -
  • 3.   Day
  • 4.   2
  • 5.   
  • 6.    안드로이드에게
  • 7.   메세지
  • 8.   보내기
  • 9.    (Intent
  • 10.   
  • 11.   ListView,
  • 12.   Adapter)
  • 13. 학습목표 이 학습을 마치면… -Intent를 사용해 다른 Activity로 전환을 할 수 있습니다. ! -android.R.layout.simple_list_item_1 을 사용하여 한줄이 표시되는 리스트뷰를 만들 수 있습니다. ! -android.R.layout.simple_list_item_2 을 사용하여 두줄이 표시되는 리스트뷰를 만들 수 있습니다. ! -ArrayAdapter를 직접 만들어 자신이 원하는 레이아웃을 가지는 리스트뷰를 만들 수 있습니다.
  • 14. Main SimpleList1 리스트에 글을 한줄씩 출력하는 리스트뷰 실습 Intent를 사용하며 Activity이동 앱 시작시 실행되는 Activity SimpleList2 리스트에 글을 두줄씩 출력하는 리스트뷰 실습 CustomList 리스트뷰의 레이아웃을 직접 구현하는 실습 rowLayout 구현할 앱의 구조
  • 15. -프로젝트, 레이아웃 만들기-
  • 16. 메인 레이아웃을 생성해야 합니다.
  • 17. 빈 프로젝트를 하나 생성해 주세요 (이름은 자유!)
  • 18. 메인 레이아웃을 편집해서
  • 19. TextView하나와 Button3개를 만듭니다. (Linear, Relative Layout은 상관 없이 편한대로!)
  • 20. 속성에서 ID와 Text를 사람이 알기 쉽게 변경합니다. 이 예제에서는 simple_list1, simple_list2, custom_list로 하였습니다. ! (id의 변경은 레이아웃 에디터에서 변경하시길 권장합니다.)
  • 21. id: main_button_simple_list1 id: main_button_simple_list2 id: main_button_custom_list 완성된 레이아웃
  • 22. 한줄 리스트를 표시해줄 레이아웃과 액티비티 클래스를 만들어야 합니다.
  • 23. 작업중인 패키지명을 마우스 오른쪽 클릭을 한 후 New-Other를 선택해줍니다.
  • 24. Android에 Android Activity항목을 선택한 후 계속 진행합니다.
  • 25. Activity Name으로 SimpleList1Activity를 적습니다.
  • 26. 클래스 파일과 레이아웃 파일이 동시에 생성되었습니다.
  • 27. x xml편집창으로 이동합니다.
  • 28. 내용을 다 삭제합니다.
  • 29. 내용이 없는 상태에서
  • 30. x LinearLayout(옵션)과
  • 31. x ListView를 배치합니다.
  • 32. x x ListView의 id는 simple_list1_listView로 하였습니다. (각자 구분가능하도록 자유롭게)
  • 33. Main SimpleList1 리스트에 글을 한줄씩 출력하는 리스트뷰 실습 앱 시작시 실행되는 Activity SimpleList2 리스트에 글을 두줄씩 출력하는 리스트뷰 실습 CustomList 리스트뷰의 레이아웃을 직접 구현하는 실습 SimpleList1과 같은 Activity가 2개 더 필요합니다.
  • 34. 동일한 방법을 이용해서 SimpleList2Activity, CustomListActivity를 생성해야합니다.
  • 35. SimpleList2Activity와…
  • 36. CustomListActivity
  • 37. 레이아웃도 동일하게 ListView를 가지고 있게 하고 각 레이아웃을 구분할 수 있는 Id값을 가지고 있게 합니다. ex)simple_list1_listView, simple_list2_listView, custom_list_listView
  • 38. 이제 메인의 버튼을 누르면 다른 Activity로 이동할 수 있게 해야합니다.
  • 39. 이제 MainActivity를 열어줍니다.
  • 40. onCreateOptionsMenu는 이번 예제에서 사용하지 않으므로 삭제를 하였습니다.(선택사항)
  • 41. Button위젯을 실습했을때 처럼 OnClickListener를 받고 onClick을 만들어줍니다.
  • 42. Button을 생성하고 OnClickListener도 연결해줍니다.
  • 43. OnClick에 switch를 Id값으로 사용해 이벤트를 판별합니다.
  • 44. Intent 안드로이드에서는 액티비티 간의 화면 전환에 인텐트(Intent)를 사용합니다. ! 단순히 화면 전환을 의미하지는 않으나 이 예제에서는 다른 액티비티를 호출하고 호출 될 액티비티에 간단한 값을 전달하는 방법을 알아봅니다.
  • 45. Intent intent = new Intent(this, 이동할액티비티.class); startActivity(intent); 간단히 화면 전환을 위해서는 Intent를 생성하고 생성자로 현재 액티비티의 컨텍스트와 (컨텍스트에 대한 설명은 안드로이드 베이직에서 합니다.) 이동할 액티비티 클래스의 객체를 써주고 ! startActivity(intent)를 해주면 됩니다.
  • 46. MainActivity 인텐트(Intent)로 다른 액티비티를 호출할 때 putExtra(key, value);형식으로 데이터를 같이 전송 할 수 있습니다.
  • 47. MainActivity Activity2 호출된 액티비티에서 데이터를 받을 때에는 getIntent().getExtras().getString(“키값”);으로 합니다. 꼭 String이 아니라 Int나 다른 자료형도 가능하나 ! 객체를 보낼때에는 package라는 것을 사용하지만 이 예제에서는 다루지 않습니다.
  • 48. 이제 다시 프로젝트로 돌아와서…
  • 49. 하고 싶은 내용 Intent startActivity()
  • 50. onClick안의 switch안에 Intent를 만들고 이동할 액티비티 클래스 (SimpleList1Activity.class)를 넣고 startActivity()를 합니다.
  • 51. 나머지 버튼에도 동일하게 Intent를 넣어줍니다.
  • 52. 화면 전환은 잘 되었지만 리스트뷰에 아무 내용도 없어 빈 화면으로 표시됩니다. ! 이제 리스트뷰에 내용을 넣어보겠습니다.
  • 53. SimpleList1에서는 리스트에 한줄짜리 글이 들어가는 리스트를 만들어 봅니다.
  • 54. SimpleList1Activity를 편집합니다. ! Main때와 마찬가지로 onCreateOptionsMenu를 지우고 싶으신 분은 지우셔도 무방합니다.
  • 55. ListView를 생성을 해 줍니다.
  • 56. 리스트에 넣을 데이터를 ArrayList로 관리 할 예정입니다. ArrayList<String>을 생성합니다.
  • 57. add()를 사용해서 ArrayList에 임의의 값을 넣어줍니다. ! (시간에 여유가 있으시면 앞에서 Intent를 배울때 사용한 putExtra()와 getExtra()를 사용하여 데이터를 받아보시는 연습을 해보시는건 어떤가요? ^^;)
  • 58. Adapter
  • 59. 위젯은 단순히 화면을 출력하기 위한 일종의 껍데기인데 Adapter가 데이터를 각 위젯에 맞는 형태로 제어를 해준다. ! (위젯과 데이터를 연결해주는 징검다리 역할)
  • 60. 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의 개념 제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
  • 61. Simple1 실습에서는 리스트에 데이터를 보여주기 위한 어뎁터로 ArrayAdapter를 사용합니다. ! ArrayAdapter에 UI레이아웃과 데이터를 넣어주고 setAdapter()로 ListView에 Adapter를 적용시키는데 ! UI레이아웃을 안드로이드에서 기본 제공하는 simple_list_item_1을 사용하여 하나의 텍스트뷰가 있는 한줄짜리 레이아웃으로 표시합니다.
  • 62. 데이터가 리스트뷰에 맞게 잘 출력되었습니다^^ 참고로 simple_list_item_1은 단순히 TextView가 하나있는 레이아웃xml파일입니다.
  • 63. 이번에는 SimpleList2에서 리스트에 두줄이 표시되는 Adapter를 적용해 보겠습니다.
  • 64. SimpleList2Activity도 1에서 하던 것과 마찬가지로 ListView를 생성합니다.
  • 65. String형태로 key와 value를 가지는 HashMap을 가지고 있는 ArrayList (?!)가 필요합니다.
  • 66. 값을 넣어줄 때에는 HashMap을 생성해서 먼저 HashMap에 값을 put()으로 넣어준 후 ArrayList에 HashMap을 넣어줍니다. ! HashMap의 키캆은 여기서는 임의로 line1과 line2로 설정하였습니다. line1을 키값으로 가지는곳에 첫번째 줄에 올 데이터를, 2에는 두번째 줄에 올 데이터를 넣을 예정입니다.
  • 67. 2줄짜리 simpleList를 사용하기 위해서는 String 배열과 int 배열이 필요합니다. ! String 배열에는 데이터를 가져올때 사용할 HashMap의 키값을 int배열에는 android.R.layout.simple_list_item_2에서 사용할 TextView위젯의 id값이 필요합니다. (고정된 id)
  • 68. SimpleAdapter를 생성하고 데이터 리스트(hashMapList1)와 UI레이아웃(android.R.layout.simple_list_item_2), 그리고 아까 설정한 배열값 (from, to)를 넣어주고 ListView에 어뎁터를 연결해 줍니다.
  • 69. 데이터가 리스트뷰에 맞게 잘 출력되었습니다^^ 참고로 simple_list_item_2은 TextView가 두개있는 레이아웃xml파일입니다.
  • 70. 나는 저런 두줄 형태가 아니라 사진을 넣거나 다른 형태의 리스트를 만들고 싶은데?
  • 71. 이제 나만의 리스트뷰(어뎁터)를 만들어 봅시다.
  • 72. 사진과 텍스트가 같이 있는 리스트 만들기
  • 73. 사진과 텍스트가 같이 있는 리스트를 만들기 위해서는 어댑터를 직접 만들어야 합니다.
  • 74. 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의 개념 제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
  • 75. ListView 1 2 3 4 … Gallery ArrayList Adapter -ArrayList -UI레이아웃 1 2 3 4 … GridView 하나의 요소 UI를 구성할 레이아웃 파일 먼저 UI레이아웃을 만들어 보겠습니다. 1 2 3 4 5 6 7 8 9 Adapter의 개념 제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
  • 76. TextView(Large, Blue) TextView(Small, Gray) ImageView
  • 77. 프로젝트의 res-layout항목을 마우스 오른쪽 버튼으로 클릭하여 New-Android XML File을 선택합니다.
  • 78. 이름을 custom_list_row (임의로) LinearLayout을 선택합니다.
  • 79. TextView(Large, Blue) TextView(Small, Gray) ImageView
  • 80. 레이아웃은 하나의 리스트안의 레이아웃만을 생각하며 작성하셔야 합니다.
  • 81. 이미지뷰 하나와 텍스트뷰 2개를 만들었습니다. (id는 식별하기 좋게 바꿔 주세요)
  • 82. ListView 1 2 3 4 … Gallery ArrayList Adapter -ArrayList -UI레이아웃 1 2 3 4 … GridView 하나의 요소 UI를 구성할 레이아웃 파일 UI레이아웃은 만들었고 이번에는 데이터를 만들어야 합니다. 1 2 3 4 5 6 7 8 9 Adapter의 개념 제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저
  • 83. ArrayList형태로 어댑터에 데이터를 넣어야 하는데 리스트에 표현을 할 데이터가 많으므로 객체로 감싸주겠습니다.
  • 84. 새 클래스를 만들어 줍니다.
  • 85. 이 예제에서는 ListData라는 클래스를 만들었습니다.
  • 86. 빈 클래스가 만들어졌습니다.
  • 87. 사진의 이름(경로)과 TextView에 들어갈 텍스트 내용을2개를 보관할 지역변수를 만들고 생성자를 만들었습니다.
  • 88. 이 예제에서는 데이터를 변경하는 경우가 없어 set함수는 없이 get함수들만을 만들었습니다.
  • 89. ListView 1 2 3 4 … Gallery ArrayList Adapter -ArrayList -UI레이아웃 하나의 요소 UI를 구성할 레이아웃 파일 UI레이아웃과 데이터를 만들었고 ! 이번에야말로 Adapter를 만들어야 합니다. Adapter의 개념 제대로 된 안드로이드 앱 개발을 위한 안드로이드 프로그래밍 / 진성주 최종렬 백정현 신중훈 공저 1 2 3 4 … GridView 1 2 3 4 5 6 7 8 9
  • 90. 어댑터를 만들 클래스를 만들어줘야 합니다.
  • 91. 이 예제에서는 클래스 명을 CustomAdapter로 정했습니다.
  • 92. 아무것도 없는 클래스가 새로 생겼습니다.
  • 93. 아까 만든 ListData를 가지는 ArrayAdapter를 상속받고 생성자에 Context, UI레이아웃의 id, 그리고 ArrayList데이터를 받습니다.
  • 94. ArrayAdapter에서 중요한 부분인 어떻게 보여주것인지에 대한 부분은 getView()에 있습니다. 직접 만든 UI레이아웃에 맞게 고치기 위해 getView()를 오버라이딩 하여 수정을 해야합니다.
  • 95. inflate라는 것은 xml로 정의되어 있는 뷰나 레이아웃을 객체화 시키기 위해서 사용하는 메서드 인데 이 예제에서 간단히 설명을 하자면 -리스트에 보여줄 항목이 있는데 이 항목의 레이아웃을 전에 만든 custom_list_row.xml을 불러와서 사용하는 장면입니다.
  • 96. inflate로 만든 row로부터 텍스트뷰를 인스턴스로 만들어 글씨를 집어 넣습니다. 평소와 달리 row.findViewById()로 row.을 붙여 row의 텍스트뷰를 가져오도록 합니다.
  • 97. ImageView도 전과 같은 방식으로 인스턴스를 만들고
  • 98. 이 예제에서는 getAssets()을 이용하여 assets이라는 곳에서 이미지 데이터를 가져와 표현하는 방법을 사용합니다. ! 안드로이드에서의 assets이라는 공간은 데이터 형식에 상관없이 자유롭게 데이터를 불러 올 공간으로 사용됩니다.
  • 99. assets폴더에는 리스트뷰에서 보여줄 용도로 ListData객체에 정해준 파일들을 복사해 주세요
  • 100. 이제 다시 CustomListActivity로 돌아와 CustomAdapter를 적용해 보겠습니다.
  • 101. CustomAdapter에 값을 집어 넣기 위해서는 ListData를 가지는 ArrayList가 필요합니다.
  • 102. ArrayList에 ListData를 수동으로 집어 넣어 보았습니다.
  • 103. findViewById()를 사용하여 ListView를 가져오고
  • 104. CustomAdapter를 생성하고 context와 UI레이아웃, ListData를 가지고 있는 ArrayList 데이터를 전달합니다.
  • 105. 마지막으로 simpleList를 할 때와 마찬가지로 setAdapter()를 사용하여 리스트에 Adapter를 적용합니다.
  • 106. 레이아웃에 맞게 사진 크기를 조절하거나 ! 메모리를 관리하는 부분이 없어 기종에 따라 화면이보기 흉하게 되거나 OutOfMemory가 발생하는 경우가 있습니다. ! 이럴때에는 레이아웃 파일을 수정을하여 자신의 기종에 맞는 설정을 하거나 ! 메모리 부족이 발생할 때에는 이미지를 축소해서 사용해 주세요
  • 107. 리스트로 부터 이벤트 받기
  • 108. 단순히 리스트 형태로 데이터를 보여주는 것이 아니라 ! 리스트를 터치하면 이벤트를 받아 어떤 동작을 실행 시킬수 있도록 합니다.
  • 109. 버튼을 사용했을때 OnClickListener를 사용하던 것 처럼 implements OnItemClickListener를 받아 옵니다.
  • 110. ListView에 setOnItemClickListener(this);로 리스너를 달아 줍니다.
  • 111. OnItemClick을 재정의를 해줘야합니다. (인자의 이름은 알기 쉽게 adapterView, view, position과 id로 변경했습니다.)
  • 112. position(int arg2)이 리스트의 번호를 의미합니다. 이 position으로 ArrayList로부터 데이터를 가져와서 사용 할 수도 있습니다.
  • 113. 이번 개발 경험 프로젝트에서 만들어야 할 서비스 NEXTAGRAM
  • 114. 다음주 수업 전까지 레이아웃과 Intent를 사용해 액티비티간의 이동은 구현이 되어 있어야 합니다.
  • 115. 스토리보드
  • 116. 메인화면 글 쓰기 글 읽기
  • 117. -메인 리스트 화면Write를 터치하면 글 쓰기 화면으로 이동하여야 함 Button 리스트를 터치하면 해당 글의 상세 글 보기화면으로 이동하여야 함 ImageView TextView(Large, Blue) TextView(Small, Gray)
  • 118. -글 읽기 화면TextView 작성 일자 TextView 작성자 ImageView TextView 글 제목 TextView 글 내용
  • 119. Button 글 쓰기(추후 구현) EditText 작성자 입력 ImageButton 터치를 하면 앨범에서 사진 선택(추후 구현) EditText 글 제목 입력 EditText 글 내용 입력
  • 120. Layout파일 4개가 생성이 되어 있어야 합니다. *메인화면, *커스텀 어댑터용 UI 레이아웃, *게시글 열람 화면, *게시글 작성 화면
  • 121. 메인화면 글 쓰기 메인의 리스트를 터치하면 글 읽기 화면으로, ! Write버튼을 누르면 글 쓰기 화면으로 이동하는 Intent구현도 필요합니다. 글 읽기
  • 122. COMMING SOON