Viewpager를활용한app만들기

장대희
ViewPager를 이용한
App만들기
android.support.v4.view.ViewPager
2013.06
컨버전스앱개발팀 장대희
Copyrightⓒ2013 zzang All rights reserved.

우리가 만들 App 의 실행 화면
좌우 스크롤이 되며, 메뉴 인디케이터가 존재한다.
한 개의 HomeActivity가 존재하며,
Arraylist로 3개의 Layout을 Adapter 에 넣고,
ViewPager 에 Adapter를 적용하게 된다.
※ Project 생성과 기타 설정은 이전 강좌 참조하시고, 바로 소스코드로 갑니다.

1. Title Bar 레이아웃을 위한 Class
타이틀 바를 위한 Class를 만들어 보자.(공통으로 쓰이는 것은 따로 빼서 재사용!)
(1) 좌측 ImageView
(2) 좌측 Button
(3) 중앙 TextView
(4) 우측 ImageButton
4개의 View를 갖고 있는 RelativeLayout 으로 구성

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 에서…

TopHeaderLayout.class
◆ Layout xml 을 Inflate
◆ 각 View를 define
◆ 각 View의 Click 이벤트
등록
◆ Title을 변경할 수 있는
Public Method
◆ 생성자

TopHeaderLayout.class
◆ 좌측 ImageView와
Button 의 toggle method
◆ 좌측 ImageView의
Visible과 이미지 설정
◆ 좌측 Back Button
Visible
◆ 좌측 모든View Gone
◆ 우측 설정 Button
Visible
◆ Back Button,
Setting Button 의
Click Event 처리

2. Indicator 레이아웃을 위한 Class
ViewPager의 이동을 나타내기 위한 Class를 만들어 보자.
(1) 제목 TextView
(2) 빨강색의 Indicator LinearLayout
(3) 박스를 구분하는 라인 LinearLayout X 2
를 포함하는 박스 RelativeLayout X 3

View_pager_indicator.xml
X 3
Resources
bg_title.png
bg_title_press.png
selector를 이용
치수는 dimens.xml 에서…

HomeViewPagerIndicator.class
◆ Indicator 클릭을
위한 Callback
◆ 생성자
◆ Layout xml 을 Inflate
◆ 각 View를 define
◆ 각 View의 Click 이벤트
등록

◆ Indicator 클릭을
위한 Callback을 등록하는
Public Method
◆ 빨강색 Indicator 의
Toggle Method
◆ 메뉴 Box 영역의
Click 이벤트 처리
HomeViewPagerIndicator.class

3. ListView 화면을 위한 Abstract Layout Class
각각의 화면을 FragmentsActivity 또는 Layout으로 처리 할 수 있다.
서로 장단점이 존재한다.
(FragmentsActivity로 하면 ViewPager에 3개 이상을 추가할 때 현재,좌,우 바깥화면은 생명주기를 탄다.)
우리는 Layout으로 처리하기로 한다.
※ 지난 강좌의 MainListActivity 를 Layout 으로 만들 것이다.

이번부터는 좀 고차원적으로 놀아봅시다.
자바 abstract 를 이용하도록 하겠습니다.
반복 코드를 줄이고 효율성을 높이는 방법이 되겠습니다.
3. 1. 동일 Object 로 인식하기 위한 빈 Interface 생성
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

3. 2. LinearLayout 을 extends 한 Base Layout 생성
MenuBaseLayout.class
◆ abstract class
LinearLayout 을 extends
MenuLayout을 implements
일반적인 Layout을 위한
Abstract Class 이다.

3. 3. MenuBaseLayout 을 extends 한 Base ListView Layout 생성
◆ abstract class
ListView 와
BaseAdapter 를 extends한
BaseListAdapter 가 존재함.
ListView형태의 Layout을
위한
MenuBaseListLayout.class
◆ ListView를 Clear 하는
Method

3. 4. MenuBaseListLayout 을 extends 한 Base Request List Layout 생성
MenuBaseRequestListLayout.class
◆ abstract class
AsyncTask,
loading Dialog
존재.
HTTP로 데이터를 가져와
ListView 에 뿌려주는
Layout을 위한
◆ ForChildrenAsyncTask
이전강좌
SkyAsyncTask 와 동일

◆ Utils.isActivityFinished()
static method code :
public static boolean
isActivityFinished(Context context)
{
if (((Activity) context).isFinishing()) {
return true;
}
return false;
}

3. 5. Base Request List Paging Layout 생성
MenuBaseRequestListPagingLayout.class
◆ abstract class
ListView의 Footer
ScrollChanged 포함
HTTP로 데이터를 가져와
ListView 에 뿌려주고,
페이징이 있는
Layout을 위한

◆ 스크롤이 마지막에
오면 다음 페이지를
Load 하는 Method
여기서 footer 를 보여주
거나 어쩌구를 따로
처리 할 수 있다.

◆ 페이징을 위한
파라미터 생성
Method

3. 6. BaseListAdapter 생성
BaseListAdapter.class
◆ BaseAdapter 를
extends
◆ ArrayList Data를
설정하는 Method
◆ 개수
◆ Data Get
◆ getView는
getIemView에서 처리

정리하자.
Abstract class 를 이렇게 만들어 놓았으므로,
모든 형태의 Layout 을 구현하여 PagerAdapter 에 넣을 수 있다.
(1) 단순 view를 포함하는 Layout
(2) ListView가 있는 Layout
(3) HTTP 통신으로 서버의 데이터를 가져와 뿌리는 목록을 보여주는 Layout
(4) HTTP 통신으로 목록의 페이징을 처리 할 수 있는 Layout
(5) BaseAdapter 를 구현한 BaseListAdapter
이것을 응용하면 더 많은 Layout 을 처리 할 수 있다.
자, 이제 실제 Youtube 재생목록을 뿌려주는 layout을 만들어 보자.

4. 재밌는TV ListView 화면 Layout Class
다시 구현할 화면을 봅니다.
만들어 놓은 Abstract class중에서,
를 상속받아서 만들면 되겠습니다.

Layout_menu_main.xml
리소스는 딱히
필요하지 않습니다.
화면 레이아웃 xml : Layout_menu_main.xml

화면 레이아웃 xml : list_row_main.xml
ListView 의 한 개의 row 레이아웃
Set_arrow_ico.png
Resources
ImageView 1개, TextView 2개
※ 이제 이런 layout 은 모두 할 수 있습니다!!!

MenuMainListAdapter.class
◆ ViewHolder 를 내부
에 정의했다. (귀찮아서…)
◆ 가져온 데이터를
Row 에 뿌려준다.

MenuMainListLayout.class
채널이름
◆
MenuBaseRequestList
PagingLayout.class
을 extends 했다.
◆ 두개의 생성자에 각각
init()
registerHandler()
onStar()
Method를 순서대로
호출해준다.
구현은 아래 Override
된 Method 에서 처리함.
◆ layout을 inflage 하고,
값들을 초기화.

◆ Listview 를 define
※ Activity 가 아니므로
Listview의 itemclick 리스너를 지
정한다.
광고 시작
◆ 데이터를 요청
◆ 가져온 데이터로
ListAdapter 에
데이터를 넣고,
ListView를 출력한다.

◆ Listview Item Click
이벤트 처리
◆ 데이터 요청 완료 처리
데이터 파싱.
더 불러올 페이지 확인.
Listview 출력 요청
◆ HTTP Method 는 GET

◆ Youtube channel url
◆ super의 페이징 처리
값에다가
channel 기본 파라미터를
추가한다.
◆ 우리는 그냥 스크롤
자동 페이징이므로
여기서 할 것이 없다.

5. HomeActivity 구현
◆ 준비가 끝났다. ViewPager 를 이용한 HomeActivity 를 만들어 봅시다.
※ 휴대폰TV와 유투브TV는 재밌는TV 로 대체합니다.
(다음 강좌에서 MediaStore DB 와 ContentProvider , Youtube Login 등을 추가합니다.)

activity_home.xml 구현
◆ 우리가 만든
Header layout
◆ 우리가 만든
Indicator layout
◆ ViewPager !!!

Abstract BaseActivity class
◆ 또다시 추상화 class다.
Activity 를 extends 한다.
TopHeaderLayout
AdView 를 갖고 있다.
◆ Layout 을 받는
Method
◆ View 의 Define
Method
◆ 초기화 Method
◆ Layout 설정
광고 get
Header View get

HomeAdapter class
◆ MenuLayout 데이터의
ArrayList
◆ 데이터 ArrayList 설정
◆ 데이터 ArrayList 개수
◆ MenuLayout의 View를
화면에 더한다.

◆ BaseActivity 를
extends.
ViewPager의 change리스너
우리가 만든 Indicator의 click
리스너
◆ activity_home.xml
레이아웃
◆ View define
우리가 만든 Indicator get
ViewPager get
HomeActivity class
◆ Back 를 3초내에 2번
눌렀는지 확인 Handler
◆ title 설정
ViewPager 설정

HomeActivity class
◆ 타이틀Bar 제목
◆ MenuLayout 데이터를
3개 생성해서
HomeAdapter 에 넣고,
ViewPager 에 Adapter를
설정한다.
◆ 단말기 Back 하드키
처리
◆ Handler 를 제거.

◆ Indicator 의 클릭이
왔을때, ViewPager의
해당 항목으로 간다.
◆ ViewPager 가 선택된
화면의 Indicator 의
빨강색 언더라인 그리기
HomeActivity class

Viewpager를활용한app만들기

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

Similaire à Viewpager를활용한app만들기

Similaire à Viewpager를활용한app만들기 (20)

Viewpager를활용한app만들기