Viewpager를활용한app만들기
- 1. 장대희 ViewPager를 이용한 App만들기 android.support.v4.view.ViewPager 2013.06 컨버전스앱개발팀 장대희 Copyrightⓒ2013 zzang All rights reserved.
- 2. 우리가 만들 App 의 실행 화면 좌우 스크롤이 되며, 메뉴 인디케이터가 존재한다. 한 개의 HomeActivity가 존재하며, Arraylist로 3개의 Layout을 Adapter 에 넣고, ViewPager 에 Adapter를 적용하게 된다. ※ Project 생성과 기타 설정은 이전 강좌 참조하시고, 바로 소스코드로 갑니다.
- 3. 1. Title Bar 레이아웃을 위한 Class 타이틀 바를 위한 Class를 만들어 보자.(공통으로 쓰이는 것은 따로 빼서 재사용!) (1) 좌측 ImageView (2) 좌측 Button (3) 중앙 TextView (4) 우측 ImageButton 4개의 View를 갖고 있는 RelativeLayout 으로 구성
- 4. 1. Title Bar 레이아웃을 위한 Class Resources bg_title.png bt_back.png bt_back_press.png bt.9.png bt_press.9.png ico_menu_set.png 버튼은 selector를 이용하여 처리하자. layout_top_header.xml 치수는 dimens.xml 에서…
- 5. 1. Title Bar 레이아웃을 위한 Class TopHeaderLayout.class ◆ Layout xml 을 Inflate ◆ 각 View를 define ◆ 각 View의 Click 이벤트 등록 ◆ Title을 변경할 수 있는 Public Method ◆ 생성자
- 6. 1. Title Bar 레이아웃을 위한 Class TopHeaderLayout.class ◆ 좌측 ImageView와 Button 의 toggle method ◆ 좌측 ImageView의 Visible과 이미지 설정 ◆ 좌측 Back Button Visible ◆ 좌측 모든View Gone ◆ 우측 설정 Button Visible ◆ Back Button, Setting Button 의 Click Event 처리
- 7. 2. Indicator 레이아웃을 위한 Class ViewPager의 이동을 나타내기 위한 Class를 만들어 보자. (1) 제목 TextView (2) 빨강색의 Indicator LinearLayout (3) 박스를 구분하는 라인 LinearLayout X 2 를 포함하는 박스 RelativeLayout X 3
- 8. 2. Indicator 레이아웃을 위한 Class View_pager_indicator.xml X 3 Resources bg_title.png bg_title_press.png selector를 이용 치수는 dimens.xml 에서…
- 9. 2. Indicator 레이아웃을 위한 Class HomeViewPagerIndicator.class ◆ Indicator 클릭을 위한 Callback ◆ 생성자 ◆ Layout xml 을 Inflate ◆ 각 View를 define ◆ 각 View의 Click 이벤트 등록
- 10. 2. Indicator 레이아웃을 위한 Class ◆ Indicator 클릭을 위한 Callback을 등록하는 Public Method ◆ 빨강색 Indicator 의 Toggle Method ◆ 메뉴 Box 영역의 Click 이벤트 처리 HomeViewPagerIndicator.class
- 11. 3. ListView 화면을 위한 Abstract Layout Class 각각의 화면을 FragmentsActivity 또는 Layout으로 처리 할 수 있다. 서로 장단점이 존재한다. (FragmentsActivity로 하면 ViewPager에 3개 이상을 추가할 때 현재,좌,우 바깥화면은 생명주기를 탄다.) 우리는 Layout으로 처리하기로 한다. ※ 지난 강좌의 MainListActivity 를 Layout 으로 만들 것이다.
- 12. 이번부터는 좀 고차원적으로 놀아봅시다. 자바 abstract 를 이용하도록 하겠습니다. 반복 코드를 줄이고 효율성을 높이는 방법이 되겠습니다. 3. 1. 동일 Object 로 인식하기 위한 빈 Interface 생성 3. ListView 화면을 위한 Abstract Layout Class 3개의 ListView 화면을 동일한 inteface를 implements 하여 구현한다. 그래야 이후에 PagerAdapter 에서 처리하기가 편리해진다. PagerAdapter 에 데이터를 ArrayList 로 넘기는데, 이때 ArrayList 의 데이터 형태를 통일 시키는 것이다. public class HomeAdapter extends PagerAdapter { private ArrayList<MenuLayout> mDataSetList = null; …… public void setDataSetList(ArrayList<MenuLayout> dataSetList) { mDataSetList = dataSetList; } …… MenuLayout.class
- 13. 3. 2. LinearLayout 을 extends 한 Base Layout 생성 3. ListView 화면을 위한 Abstract Layout Class MenuBaseLayout.class ◆ abstract class LinearLayout 을 extends MenuLayout을 implements 일반적인 Layout을 위한 Abstract Class 이다.
- 14. 3. 3. MenuBaseLayout 을 extends 한 Base ListView Layout 생성 3. ListView 화면을 위한 Abstract Layout Class ◆ abstract class ListView 와 BaseAdapter 를 extends한 BaseListAdapter 가 존재함. ListView형태의 Layout을 위한 Abstract Class 이다. MenuBaseListLayout.class ◆ ListView를 Clear 하는 Method
- 15. 3. 4. MenuBaseListLayout 을 extends 한 Base Request List Layout 생성 3. ListView 화면을 위한 Abstract Layout Class MenuBaseRequestListLayout.class ◆ abstract class AsyncTask, loading Dialog 존재. HTTP로 데이터를 가져와 ListView 에 뿌려주는 Layout을 위한 Abstract Class 이다. ◆ ForChildrenAsyncTask 이전강좌 SkyAsyncTask 와 동일
- 16. 3. 4. MenuBaseListLayout 을 extends 한 Base Request List Layout 생성 3. ListView 화면을 위한 Abstract Layout Class MenuBaseRequestListLayout.class ◆ Utils.isActivityFinished() static method code : public static boolean isActivityFinished(Context context) { if (((Activity) context).isFinishing()) { return true; } return false; }
- 17. 3. 4. MenuBaseListLayout 을 extends 한 Base Request List Layout 생성 3. ListView 화면을 위한 Abstract Layout Class MenuBaseRequestListLayout.class
- 18. 3. 5. Base Request List Paging Layout 생성 3. ListView 화면을 위한 Abstract Layout Class MenuBaseRequestListPagingLayout.class ◆ abstract class ListView의 Footer ScrollChanged 포함 HTTP로 데이터를 가져와 ListView 에 뿌려주고, 페이징이 있는 Layout을 위한 Abstract Class 이다.
- 19. 3. 5. Base Request List Paging Layout 생성 3. ListView 화면을 위한 Abstract Layout Class MenuBaseRequestListPagingLayout.class ◆ 스크롤이 마지막에 오면 다음 페이지를 Load 하는 Method 여기서 footer 를 보여주 거나 어쩌구를 따로 처리 할 수 있다.
- 20. 3. 5. Base Request List Paging Layout 생성 3. ListView 화면을 위한 Abstract Layout Class MenuBaseRequestListPagingLayout.class ◆ 페이징을 위한 파라미터 생성 Method
- 21. 3. 6. BaseListAdapter 생성 3. ListView 화면을 위한 Abstract Layout Class BaseListAdapter.class ◆ BaseAdapter 를 extends ◆ ArrayList Data를 설정하는 Method ◆ 개수 ◆ Data Get ◆ getView는 getIemView에서 처리
- 22. 3. ListView 화면을 위한 Abstract Layout Class 정리하자. Abstract class 를 이렇게 만들어 놓았으므로, 모든 형태의 Layout 을 구현하여 PagerAdapter 에 넣을 수 있다. (1) 단순 view를 포함하는 Layout (2) ListView가 있는 Layout (3) HTTP 통신으로 서버의 데이터를 가져와 뿌리는 목록을 보여주는 Layout (4) HTTP 통신으로 목록의 페이징을 처리 할 수 있는 Layout (5) BaseAdapter 를 구현한 BaseListAdapter 이것을 응용하면 더 많은 Layout 을 처리 할 수 있다. 자, 이제 실제 Youtube 재생목록을 뿌려주는 layout을 만들어 보자.
- 23. 4. 재밌는TV ListView 화면 Layout Class 다시 구현할 화면을 봅니다. 만들어 놓은 Abstract class중에서, MenuBaseRequestListPagingLayout.class 를 상속받아서 만들면 되겠습니다.
- 24. 4. 재밌는TV ListView 화면 Layout Class Layout_menu_main.xml 리소스는 딱히 필요하지 않습니다. 화면 레이아웃 xml : Layout_menu_main.xml
- 25. 4. 재밌는TV ListView 화면 Layout Class 화면 레이아웃 xml : list_row_main.xml ListView 의 한 개의 row 레이아웃 Set_arrow_ico.png Resources ImageView 1개, TextView 2개 ※ 이제 이런 layout 은 모두 할 수 있습니다!!!
- 26. 4. 재밌는TV ListView 화면 Layout Class MenuMainListAdapter.class ◆ ViewHolder 를 내부 에 정의했다. (귀찮아서…) ◆ 가져온 데이터를 Row 에 뿌려준다.
- 27. 4. 재밌는TV ListView 화면 Layout Class MenuMainListLayout.class 채널이름 ◆ MenuBaseRequestList PagingLayout.class 을 extends 했다. ◆ 두개의 생성자에 각각 init() registerHandler() onStar() Method를 순서대로 호출해준다. 구현은 아래 Override 된 Method 에서 처리함. ◆ layout을 inflage 하고, 값들을 초기화.
- 28. 4. 재밌는TV ListView 화면 Layout Class MenuMainListLayout.class ◆ Listview 를 define ※ Activity 가 아니므로 Listview의 itemclick 리스너를 지 정한다. 광고 시작 ◆ 데이터를 요청 ◆ 가져온 데이터로 ListAdapter 에 데이터를 넣고, ListView를 출력한다.
- 29. 4. 재밌는TV ListView 화면 Layout Class MenuMainListLayout.class ◆ Listview Item Click 이벤트 처리 ◆ 데이터 요청 완료 처리 데이터 파싱. 더 불러올 페이지 확인. Listview 출력 요청 ◆ HTTP Method 는 GET
- 30. 4. 재밌는TV ListView 화면 Layout Class MenuMainListLayout.class ◆ Youtube channel url ◆ super의 페이징 처리 값에다가 channel 기본 파라미터를 추가한다. ◆ 우리는 그냥 스크롤 자동 페이징이므로 여기서 할 것이 없다.
- 31. 5. HomeActivity 구현 ◆ 준비가 끝났다. ViewPager 를 이용한 HomeActivity 를 만들어 봅시다. ※ 휴대폰TV와 유투브TV는 재밌는TV 로 대체합니다. (다음 강좌에서 MediaStore DB 와 ContentProvider , Youtube Login 등을 추가합니다.)
- 32. 5. HomeActivity 구현 activity_home.xml 구현 ◆ 우리가 만든 Header layout ◆ 우리가 만든 Indicator layout ◆ ViewPager !!!
- 33. 5. HomeActivity 구현 Abstract BaseActivity class ◆ 또다시 추상화 class다. Activity 를 extends 한다. TopHeaderLayout AdView 를 갖고 있다. ◆ Layout 을 받는 Method ◆ View 의 Define Method ◆ 초기화 Method ◆ Layout 설정 광고 get Header View get
- 34. 5. HomeActivity 구현 HomeAdapter class ◆ MenuLayout 데이터의 ArrayList ◆ 데이터 ArrayList 설정 ◆ 데이터 ArrayList 개수 ◆ MenuLayout의 View를 화면에 더한다.
- 35. 5. HomeActivity 구현 ◆ BaseActivity 를 extends. ViewPager의 change리스너 우리가 만든 Indicator의 click 리스너 ◆ activity_home.xml 레이아웃 ◆ View define 우리가 만든 Indicator get ViewPager get HomeActivity class ◆ Back 를 3초내에 2번 눌렀는지 확인 Handler ◆ title 설정 ViewPager 설정
- 36. 5. HomeActivity 구현 HomeActivity class ◆ 타이틀Bar 제목 ◆ MenuLayout 데이터를 3개 생성해서 HomeAdapter 에 넣고, ViewPager 에 Adapter를 설정한다. ◆ 단말기 Back 하드키 처리 ◆ Handler 를 제거.
- 37. 5. HomeActivity 구현 ◆ Indicator 의 클릭이 왔을때, ViewPager의 해당 항목으로 간다. ◆ ViewPager 가 선택된 화면의 Indicator 의 빨강색 언더라인 그리기 HomeActivity class