티스토리 뷰

Android ViewPager 사용하기


안녕하세요. 3월이 시작되는 날입니다 :) 


오늘은 Viewpager 란 것을 알려드리려고하는데요.


Viewpager  : 상단 배너, 화면 슬라이드를 이용할때 사용하실수있는 편리한 위젯입니다.


말로표현하는것보단 직접 해보는것이 더좋겠죠?


1. main.xml 화면을 작성하도록 하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="juno.blog_viewpager.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</RelativeLayout>

2. ViewPager에 들어갈 xml 을 작성합니다.

activity_main_viewpager_image.xml 입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/viewpager_image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

3. ViewPagerAdapter를 작성해봅시다.


package juno.blog_viewpager;

import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;

/**
* Created by Junho on 2017-03-02.
*/

public class ViewPagerAdapter extends PagerAdapter {

ArrayList arrayList;
LayoutInflater inflater;

public ViewPagerAdapter(LayoutInflater inflater , ArrayList arrayList) {
/*
* 1번째인수 : View를 찾을떄스는 인수입니다.
* 2번째인수 : Viewpager에 들어갈 Item(그림?)을 받아올 ArrayList 입니다.
*/
this.inflater=inflater;
this.arrayList = arrayList;
}

@Override
public int getCount() {
return arrayList.size();
}

//ViewPager가 현재 보여질 Item(View객체)를 생성할 필요가 있는 때 자동으로 호출
/*
* 1번째인수 : ViewPager 입니다.
* 2번째인수 : 그화면당 해당 위치 처음부터 ( 0, 1, 2, 3 ...) 입니다.
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {

//새로운 View 객체를 Layoutinflater를 이용해서 생성
View view= inflater.inflate(R.layout.activity_main_viewpager_image, null);

// 메인에서찾는거와다르게 위에서 만들었던 View를 이용하여서 find 를 하는것을 주의하세요 :)
ImageView img= (ImageView)view.findViewById(R.id.viewpager_image);

//ImageView에 현재 position 번째에 해당하는 이미지를 보여주기 위한 작업
int image = (int)arrayList.get(position);
img.setScaleType(ImageView.ScaleType.FIT_XY);
img.setImageResource(image);

//ViewPager에 만들어 낸 View 추가
container.addView(view);

//Image가 세팅된 View를 리턴
return view;
}

//화면에 보이지 않은 View는파쾨를 해서 메모리를 관리함.
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub

//ViewPager에서 보이지 않는 View는 제거
//세번째 파라미터가 View 객체 이지만 데이터 타입이 Object여서 형변환 실시
container.removeView((View)object);

}

@Override
public boolean isViewFromObject(View v, Object obj) {
// TODO Auto-generated method stub
return v==((View)obj);
}

}

4. 마지막으로 MainActivity 를 작성합시다.

package juno.blog_viewpager;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
ViewPagerAdapter viewPagerAdapter;
ArrayList arrayList; // viewPager에서보여줄 item

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
arrayList = new ArrayList();
for (int i=0; i < 4 ; i++){
arrayList.add(R.drawable.ad1 + i );
}
viewPager = (ViewPager)findViewById(R.id.viewpager);
viewPagerAdapter = new ViewPagerAdapter(getLayoutInflater(),arrayList);

viewPager.setAdapter(viewPagerAdapter);
}
}

슬라이드에올라갈이미지는 첨부파일로 올렸으니, drawable 폴더에 넣어주도록합시다 :)


이렇게 작성완료하시면 기본적으로 viewpager를 사용하실수있으십니다. 나머지는 커스텀으로 화면보여지는화면을 수정하시면됩니다.


sample.zip


이번주의 반이상이 지나갔습니다~ 파이팅합시다!!!!!    :) 


읽어주셔서 감사합니다 






Recent Comments